/*new style start*/
.main-layout {
}
h1,
h2,
h3,
h4,
h5,
h6,
.function-list {
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
	color: #18150d;
	font-weight: 400;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
section :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/*layout*/
section {
    display: flex;
    justify-content: center;
}

.container-mx-1 {
    margin-left: var(--s-60);
    margin-right: var(--s-60);
    width: 100%;
}

.has-max-width {
    max-width: 1080px;
}

.section-py-large {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
}

.section-pt-large {
    padding-top: 7.5rem;
}

.section-pb-large {
    padding-bottom: 7.5rem;
}

.section-py-mid {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}

.section-pt-mid {
    padding-top: 3.75rem;
}

.section-pb-mid {
    padding-bottom: 3.75rem;
}

.corner-12 {
    border-radius: var(--s-30);
}

.padding-36 {
    padding-top: var(--s-70);
    padding-bottom: var(--s-70);
    padding-left: var(--s-70);
    padding-right: var(--s-70);
}

.mb-12 {
    margin-bottom: var(--s-30);
}

.mb-24 {
    margin-bottom: var(--s-60);
}

/*text style*/
.page-title {
    font-size: calc(var(--font-size-lg) * 2);
    font-weight: 700;
    line-height: 120%;
}

.sub-banner-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 120%;
}


section h1 {
	font-size: 4.5rem;
	font-weight: 700;
}

section h2 {
	font-size: clamp(3.25rem, 3.5vw, 4.5rem);
	font-weight: 700;
	padding-bottom: 0.5em;
	text-wrap-style: balance;
	word-break: keep-all;
}

section h3 {
	font-size: 3.25rem;
	font-weight: 700;
	padding-bottom: 1rem;
	text-wrap-style: balance;
	word-break: keep-all;
}

@media screen and (min-width: 1600px) {
	section h3 {
		font-size: 3.75rem;
		font-weight: 700;
	}
}

@media screen and (max-width: 768px) {
	section h1 {
		/* font-size: 4.5rem; */
		font-size: 3.75rem;
		font-weight: 700;
	}

	section h2 {
		/* font-size: 3.75rem; */
		font-size: 2.75rem;
		font-weight: 700;
	}

	section h3 {
		font-size: 2.75rem;
		font-weight: 700;
	}
}

/*메인배너 좌측*/
.banner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 820px;
}

.left.mainBannerText {
	cursor: default;
}

.mainBannerText h1 {
	will-change: opacity, transform;
}

.bannerContentsWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 820px;
	position: relative;
	gap: 24px;
	padding: 1.5rem;
}

	.bannerContentsWrap .left {
		display: flex;
		gap: 1rem;
		width: 100%;
		height: 100%;
		align-items: center;
		padding-top: 2.25rem;
		padding-bottom: 2.25rem;
		padding-left: 0rem;
		padding-right: 2.25rem;
		position: relative;
	}

@media screen and (max-width:1240px) {
	.bannerContentsWrap .left {
		justify-content: center;
		padding-top: 1rem;
		padding-bottom: 1rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media screen and (max-width:991px) {
	.bannerContentsWrap .left {
		justify-content: center;
		padding-top: 0rem;
		padding-bottom: 0rem;
		padding-left: 0rem;
		padding-right: 0rem;
	}
}

.main-banner-text-wrap {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: absolute;
	top: 8.375rem;
	left: 0;
	z-index: 1;
}


.left.mainBannerText .text p.top {
	font-size: clamp(24px, 1.6vw, 32px);
	font-weight: 600;
	margin-bottom: clamp(0rem, 2.2vw, 0.5rem);
}

.left.mainBannerText .text p.mid {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: clamp(20px, 1.8vw, 48px);
	font-weight: 600;
	margin-bottom: clamp(0rem, 2.2vw, 0.5rem);
	word-break: keep-all;
}

.left.mainBannerText .text p.min {
	font-size: clamp(10px, 0.8vw, 12px);
	font-weight: 400;
}

.left.mainBannerText .text h1 {
	font-size: clamp(36px, 2.4vw, 60px);
	font-weight: 700;
}

.left.mainBannerText .text p.bottom {
	font-size: clamp(16px, 1vw, 20px);
	/* white-space: pre; */
	margin-top: 1.5rem;
}

.left.mainBannerText .text p.last {
	font-size: clamp(16px, 2vw, 32px);
	/* white-space: pre; */
}

.bannerContentsWrap a {
	text-decoration: none;
	padding: 12px 24px;
}

	.bannerContentsWrap a.mainslider10:hover {
		opacity: 1 !important;
	}

	.bannerContentsWrap a.mainslider11:hover {
		opacity: 1 !important;
	}

.bannerContentsWrap p img {
	width: max-content;
	height: 18px;
	object-fit: contain;
}

.main-banner-image {
	width: 560px;
	right: clamp(-267px, calc(-50px + (100vw - 1452px) * 0.4), -50px);
	bottom: -438px;
	position: absolute;
}

	.main-banner-image img {
		width: 100%;
		opacity: 1;
		transition: 0.3s ease-out;
	}

@media screen and (max-width: 992px) {
	.main-banner-image img {
		opacity: 0;
	}
}


#home,
#home2 {
	padding: 0;
	overflow: hidden;
	position: relative;
}

#home {
	padding-top: var(--nav-height);
}

/*메인배너 광고이미지*/
.mainSwiper {
	display: flex;
	flex-direction: column;
	min-width: 586px;
	width: 586px;
	max-width: 586px;
	height: 772px;
	background-color: var(--grayscale-white);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	overflow: hidden;
}


.mainSwiper .swiper-wrapper {
	height: 100%;
}

.mainSwiper .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: var(--s-20);
	background-color: var(--grayscale-white);
}

.mainSwiper .contents-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: var(--s-10);
	overflow: hidden;
	background-color: transparent;
}

	.mainSwiper .contents-box img {
		object-fit: contain;
		width: 100%;
		height: 100%;
		min-height: 390px;
		border-radius: var(--s-10);
	}


	.mainSwiper .contents-box.upgrade-contents .upgrade-container {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		width: 100%;
		height: 100%;
	}

		.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			height: 100%;
			padding: 1.75rem;
			border-radius: 0.125rem;
		}

			.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade.baljugo {
				background-color: var(--baljugo-primary-50);
			}

			.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade.fchago {
				background-color: var(--fchago-primary-50);
			}

			.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade .upgrade-title {
				display: flex;
				flex-direction: column;
				width: 100%;
			}

				.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade .upgrade-title h4 {
					font-family: 'SB Aggro';
					margin-bottom: 1rem;
					font-size: 2.25rem;
					font-weight: 700;
					color: var(--baljugo-primary-900);
				}

			.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade.baljugo .upgrade-title h4 {
				color: var(--baljugo-primary-900);
			}

			.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade.fchago .upgrade-title h4 {
				color: var(--fchago-primary-900);
			}

			.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade .upgrade-body {
				display: flex;
				background-color: white;
				border-radius: 0.25rem;
				padding: 0.75rem;
			}

				.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade .upgrade-body ul {
					list-style-position: outside;
					list-style-type: disc;
					margin-left: 1rem;
				}

					.mainSwiper .contents-box.upgrade-contents .upgrade-container .upgrade .upgrade-body ul li {
						/*content: "";*/
						/*margin-left: -0.25rem;*/
						line-height: 1.5;
					}

.mainSwiper .swiper-button-next.main {
	color: var(--grayscale-white) !important;
	right: 6px;
}

.mainSwiper .swiper-button-prev.main {
	color: var(--grayscale-white) !important;
	left: 6px;
}

.mainSwiper .swiper-pagination {
	display: flex;
	justify-content: center;
	height: fit-content;
	position: static;
	padding: 0.75rem 0;
}

.swiper-pagination-bullet {
	transition: 0.3s ease-in-out;
	border-radius: 0.75rem;
	width: 0.75rem;
	height: 0.75rem;
}

.mainSwiper .swiper-pagination-bullet-active {
	background-color: var(--baljugo-primary-500);
	width: 2.25rem;
}

/* 버튼 스타일 (슬라이드 정지/재생) */
#swiperToggleBtn {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 11;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: unset;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s;
	opacity: 0.8;
}

	#swiperToggleBtn img {
		width: 24px;
		height: 24px;
	}

@media screen and (max-width: 991px) {
	.swiper-pagination-bullet {
		transition: 0.3s ease-in-out;
		border-radius: 0.25rem;
		width: 0.5rem;
		height: 0.5rem;
	}
}


.main-banner-container {
	display: flex;
	width: 100%;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

@media screen and (min-width:1920px) {
	.main-banner-container {
		padding-top: 3vw;
		padding-bottom: 3vw;
	}
}

#home {
	background-color: var(--baljugo-primary-500);
	color: white;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}
/*#main-banner {
    background-image: linear-gradient(180deg, #287dfa00 90%, #287dfa 100%), url(../bj-images/main/mainslide3_bg.png);
    color: white;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
    overflow: hidden;
}*/

#main-banner h1 {
	font-size: clamp(60px, 6vw, 90px);
	line-height: 1;
}

	#main-banner h1 .agro_b {
		font-family: SBAggro !important;
		font-weight: 700;
	}

	#main-banner h1 .agro_l {
		font-family: SBAggro !important;
		font-weight: 300;
	}

@media only screen and (max-width: 991px) {
	.main-banner-container {
		display: flex;
		width: 100%;
		gap: 1.5rem;
		align-items: center;
		padding-top: unset;
		padding-bottom: unset;
	}

	.banner-container {
		height: 100%;
		min-height: 694px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position-x: center;
		padding: 0rem;
	}
	.mainBannerButton {
		justify-content: center;
	}
	.main-banner-text-wrap {
		padding-top: 1.25rem;
		padding-bottom: 0;
		width: 100%;
		position: static;
	}
		.main-banner-text-wrap .text{
			display: flex;
			flex-direction: column;
			align-items:center;
		}

	:where(#main-banner) :is(h1, p) {
		text-align: center;
	}

	.left.mainBannerText .text p.last {
		font-size: 1.25rem;
	}

	.left.mainBannerText .text p.mid {
		justify-content: center;
	}

	.bannerContentsWrap img {
		height: 100%;
	}

	.bannerContentsWrap a {
		flex: 1;
		text-align: center;
	}

	.mainSwiper {
		position: absolute;
		bottom: 1rem;
		left: 0;
		min-width: unset;
		width: 100%;
		max-width: unset;
		height: 434px;
		max-height: 434px;
		margin: 0rem;
		padding-bottom: 2.25rem;
	}

	.bannerContentsWrap .left {
		align-items: start;
	}

	#card-banner .swiper-wrapper {
		padding-top: 36px;
	}
}

@media only screen and (max-width: 1921px) {
	.left.mainBannerText .text p.top {
		font-size: clamp(24px, 1.6vw, 32px);
		font-weight: 600;
		margin-bottom: 0rem;
	}

	.left.mainBannerText .text h1 {
		font-size: clamp(36px, 2.4vw, 60px);
		font-weight: 700;
	}
}

@media only screen and (max-width: 1200px) {
	.left.mainBannerText .text p.top {
		font-size: clamp(24px, 1.6vw, 32px);
		font-weight: 600;
		margin-bottom: 0rem;
	}

	.left.mainBannerText .text h1 {
		font-size: clamp(36px, 2.4vw, 60px);
		font-weight: 700;
	}

	.left.mainBannerText .text p.bottom {
		font-size: clamp(16px, 1vw, 20px);
		/* white-space: pre-wrap; */
		margin-top: 1.5rem;
	}
}


/*common 요소 start*/
.min-label {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	border-radius: 0.5rem;
	display: inline-block;
	width: fit-content;
	text-wrap: nowrap;
}
.min-label:hover {
	background-color: var(--grayscale-100);
}
/*min-label bg-color*/
.min-label.dark {
	color: var(--grayscale-white);
	background-color: var(--grayscale-dark);
}
.min-label.primary {
	color: var(--grayscale-white);
	background-color: var(--baljugo-primary-600);
}
.min-label.primary:hover {
	color: var(--grayscale-white);
	background-color: var(--baljugo-primary-700);
}
.max-width-m {
	max-width: 1080px;
}
.max-width-l {
	max-width: 1440px;
}

@media screen and (max-width: 1600px){
	section:has(.max-width-l, .max-width-m):not(#review-card-section) {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	section :is(:not(.max-width-l, .max-width-m)) :is(.max-width-l, .max-width-m):not(.swiper, .bannerContentsWrap, .sub-banner-contents) {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/*#video-player start*/
/*layout*/
.video-player-section-main {
	background-color: white;
}
.video-player-container{
	padding-top: 3.75rem;
	padding-bottom: 7.5rem;
}
.video-player-section-main .video-player-contents {
	display: flex;
	gap: 1rem;
}
.video-player-contents {
	width: 100%;
}
.video-player-section-main .video-player-contents .left {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex: 1;
}
.video-player-section-main .video-player-contents .right {
	flex: 1;
}
.video-player-section-main .left .text-area h2 {
	color: var(--baljugo-primary-500);
}
.video-player-section-main .left .text-area p {
	font-size: 1.5rem;
}
.video-trigger-button-group {
	display: grid;
	gap: 0.25rem;
	width: 100%;
}
.video-trigger-button {
	display: flex;
	width: 100%;
	gap: 0.25rem;
}
.trigger-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 0.75rem;
	border-radius: 0.25rem;
	background-color: transparent;
	transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.video-trigger-button.active .trigger-info {
	background-color: #F0F1F3;
	box-shadow: 0px 2px 4px inset rgba(0, 0, 0, 0.15);
}
.video-trigger-button:has(:active, :hover):not(.active) .trigger-info {
	background-color: var(--grayscale-100);
}

.trigger-phrase {
	opacity: 0.625;
	font-size: 1.25rem;
}
.video-trigger-button.active .trigger-phrase {
	opacity: 1;
}

.video-player-section-main .video-area {
	display: flex;
	flex-direction: column;
	background-color: #F0F1F3;
	box-shadow: 0px 2px 4px inset rgba(0, 0, 0, 0.15);
}

.video-area {
	padding: 0.5rem;
	background-color: transparent;
	border-radius: 0.5rem;
	overflow:hidden;
}

	.video-area .video {
		width: 100%;
		height: 360px;
		display: none;
		justify-content: center;
		align-items: center;
		min-height: 200px;
		position: relative;
		overflow: hidden;
	}

.video .body_XL {
	font-size: clamp(0.5rem, 4vw, 1.25rem);
}
.video .body_L {
	font-size: clamp(0.5rem, 3vw, 1rem);
}
.video .body_M {
	font-size: clamp(0.25rem, 2.8vw, 1rem);
}

.video-area .video.active{
	display:flex;
}
.video-area a {
	position: absolute;
	left: 0.5rem;
	bottom: 0.5rem;
}

.dashboard {
	width: 95%;
	border-radius: 0.5rem;
	position: absolute;
	background-color: var(--grayscale-white);
	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15));
	
}
.dashboard-title{
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--grayscale-dark);
	padding-bottom: 0.75rem;
}
.video02-btn {
	padding: 1rem 2rem;
	color: white;
	background-color: var(--baljugo-primary-500);
	border-radius: 0.5rem;
	text-align: center;
	animation: clicked 0.5s 2.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.graphCircle {
	width: 5rem;
	min-width: 5rem;
	max-width: 5rem;
	height: 5rem;
	min-height: 5rem;
	max-height: 5rem;
	background: conic-gradient( from 0deg, var(--baljugo-primary-500) 240deg, var(--fchago-primary-500) 240deg, var(--fchago-primary-500) 320deg, var(--grayscale-100) 320deg );
	border-radius: 999px;
}

@keyframes clicked {
	0% {
		background-color: var(--baljugo-primary-500);
		scale: 1;
	}
	50% {
		background-color: var(--baljugo-primary-900);
		scale: 0.97;
	}
	100% {
		background-color: var(--baljugo-primary-500);
		scale: 1;
	}
}

@media screen and (max-width: 768px) {
	/* .video-player-section-main .video-player-contents .left {
		padding: 0rem 1rem;
	} */

	.video-area .video{
		height: 360px;
	}

	.video-player-section-main .video-player-contents {
		flex-direction: column-reverse;
		gap: 0.75rem;
	}
}

/*progress-bar*/
.video-progress-bar {
	width: 0.25rem;
	height: auto;
	border-radius: 0.25rem;
	background-color: var(--grayscale-100);
}
.video-trigger-button.active .progress-timer-bar {
	width: 100%;
	height: 0%;
	border-radius: 0.25rem;
	background-color: var(--baljugo-primary-600);
}

/*min-label*/
.video-player-section-main .video-trigger-button .min-label {
	color: var(--grayscale-500);
	background-color: unset;
}
.video-player-section-main
	.video-trigger-button:has(:active, :hover)
	.min-label {
	color: var(--grayscale-dark);
	background-color: var(--grayscale-200);
}
.video-player-section-main .video-trigger-button.active .min-label {
	color: var(--grayscale-white);
	background-color: var(--baljugo-primary-600);
}

/*video-area*/
/*#video-player end*/

/*#ticket start*/
#ticket {
	background-color: white;
}
#ticket .ticketSwiper {
	width: 100%;
}
.ticket-item {
	width: 100%;
	height: 9rem;
}
.ticket-contents img {
	width: auto;
	height: 100%;
	border-radius: 0.5rem;
	object-fit: cover;
}

#ticket .swiper-button-next:after, #ticket .swiper-button-prev:after {
	color: white;
}

.ticketSwiper .swiper-pagination {
	position: absolute;
/*	top: 3.75rem;
	right: 0px;
	left: unset;
	bottom: unset;*/
	bottom: 1.75rem;
	width: 100%;
	height: fit-content;
}

.ticketSwiper .swiper-pagination-bullet {
	transition: 0.3s ease-in-out;
	border-radius: 0.75rem;
	width: 0.75rem;
	height: 0.75rem;
}

.ticketSwiper .swiper-pagination-bullet-active {
	opacity: 1;
	width: 2.25rem !important;
}

@media screen and (max-width: 1128px) {
	#ticket{
		padding-left: 1rem;
		padding-right: 1rem;
	}
}
@media screen and (max-width: 768px) {
	.ticketSwiper .swiper-pagination-bullet {
		transition: 0.3s ease-in-out;
		border-radius: 0.25rem;
		width: 0.5rem;
		height: 0.5rem;
	}
}
@media screen and (max-width: 480px) {
	.ticket-contents p {
		font-size: 1.25rem;
		font-weight: 700;
		text-wrap: balance;
		word-break: keep-all;
	}
	.ticket-contents p:last-child{
		text-align: end;
		white-space: nowrap;
	}
	.ticket-item {
		height: 7rem;
	}
}
/*#ticket end*/
#youtube-video{
	background-color: white;
}
/*.text-box-container*/
.text-box-section {
	color: white;
}
.text-box-section h3{
	font-size: clamp(3.5rem, 10vw, 4rem);
}
.text-box-container {
	display: flex;
	flex-wrap:wrap;
	width: 100%;
	gap: 1rem;
}
.text-box-container h3 {
	/*font-size: 4.5rem;*/
	font-weight: 700;
	flex: 1 1 auto;
}
.text-box-container .text-box-group {
	padding-top: 1rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.25rem;
	flex: 1 1 809px;
}
.text-box-container .text-box-group .text-box {
	display: flex;
	flex-direction: column;

	width: 100%;

	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.text-box-container .text-box-group .text-box .text-box-subtitle{
	font-size: 1.25rem;
}

.text-box-container .text-box-group .text-box .change-text-box{
	font-size: 1.25rem;
	text-align: end;
}

.text-box-container .text-box-group .text-box .change-text-box :where(.change-text, .change-text-tail){
	font-size: 6rem;
}

.text-box-container .text-box-group .text-box .change-text-box .sub-text{
	font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
	.text-box-container h3 {
		font-size: 2.25rem;
		width: 100%;
	}
	.text-box-container .text-box-group {
		display: flex;
		flex-direction: column;
	}
	.text-box-container .text-box-group .text-box .change-text-box{
		text-align: end;
	}
	.text-box-container .text-box-group .text-box .change-text-box :where(.change-text, .change-text-tail){
		font-size: 3.5rem;
	}
}

/*scroll-motion-section*/
#scroll-motion-section {
	/*padding-top: calc(var(--nav-height) * -1);*/
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
	z-index: -1;
	scroll-behavior: smooth;
}

.text-box-section,
#scroll-motion-section {
	/*background-color: var(--baljugo-primary-700);*/
	background-color: #146AEB;
	transition: 3s ease-in-out;
}

#scroll-motion-section.fade-out,
.text-box-section.fade-out{
	background-color: #121416;
}


/*scroll-motion-section pin */
.scroll-section-container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100vh;
	padding-bottom: 0 !important;
}

	.scroll-section-container .circle-box {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.scroll-section-container .circle {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		clip-path: circle(20%);
	}
	.scroll-section-container .bg {
		z-index: -2;
		background: white;
		position: absolute;
		width: 100%;
		height: 100%;
		background: #000 url(../bj-images/background-img-01.webp);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		filter: brightness(0.5);
	}
	.scroll-section-container .title-text {
		z-index: 1;
		font-size: calc(80 / 1920* 100vw);
		font-weight: 700;
		scale: 1;
		opacity: 0;
		color: white;
	}

/*scroll-motion-section text-area*/
.scroll-text-container {
	width: 100%;
	min-height: 100vh;
	height: auto;
	margin-top: calc(1vh * 80);
	margin-bottom: 300px;
}

	.scroll-text-container .text-box {
		color: #fff;
		text-align: center;
		font-size: calc(80 / 1920* 100vw);
		letter-spacing: -0.025em;
	}

		.scroll-text-container .text-box div {
			perspective: calc(1000 / 80* 1em);
			margin-bottom: max(calc(38 / 80* 1em), 20px);
		}

		.scroll-text-container .text-box div p {
			backface-visibility: hidden;
		}

@media screen and (max-width: 768px) {
	.scroll-section-container .title-text {
		z-index: 1;
		font-size: calc(80 / 1080* 100vw);
		scale: 0.8;
		color: white;
	}

	.scroll-text-container .text-box {
		color: #fff;
		text-align: center;
		font-size: calc(80 / 1080* 100vw);
		letter-spacing: -0.025em;
	}
}

/*rolling-card-section*/
#rolling-card-section {
	background-color: #fafafa;
	position: relative;
	z-index: 1;
}
.rollingCardSlider {
	display: flex;
	align-items: center;
	overflow: hidden;
	height: clamp(440px,44vw,1600px);
	padding: 3.75rem 0 7.5rem 0;
}
.rolling-card-group-01 {
	display: flex;
	width: 100%;
	overflow: visible;
	transform: translateX(calc(100% - 50% + -6vw));
	transition: 1.5s ease-in-out;
}

.center-line {
	width: 36vw;
	height: 100px;
	border-left: 1px solid red;
	border-right: 1px solid red;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.rolling-card-group-wrapper {
	display: inline-flex;
	flex-wrap: nowrap;
	-webkit-box-align: center;
	align-items: center;
	gap: 2vw;
}
	.rolling-card-group-01 .rolling-card-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 24vw;
		height: 100%;
		min-height: fit-content;
		transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1);
		overflow: hidden;
		filter:drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.1));
		/*box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);*/
	}
		.rolling-card-group-01 .rolling-card-item.active {
			width: 36vw;
		}

		.rolling-card-group-01 .rolling-card-item.active-prev,
		.rolling-card-group-01 .rolling-card-item.active-next {
			width: 12vw;
		}
		.rolling-card-group-01 .rolling-card-item.active-prev:hover,
		.rolling-card-group-01 .rolling-card-item.active-next:hover {
			scale: 0.95;
		}
		.rolling-card-group-01 .rolling-card-item:not(.active):hover {
			scale: 0.95;
		}

#rolling-card-section .scroll-fill-text {
	font-size: clamp(3.25rem, 3.5vw, 4.5rem);
	color: transparent;
	background: linear-gradient(90deg, #000000 0%, #000000 50%, #d9d9d9 50%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	text-align: center;
	position: relative;
	background-position-x: 100%;
	transition: 0.75s ease-in-out;
}

.rolling-card-video {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 18vw;
	min-height: 300px;
	overflow: hidden;
	border-radius: 0.5rem;
	/*box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);*/
	transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.rolling-card-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rolling-card-video-text {
	position: absolute;
	bottom: clamp(36px, 3vw, 40px);
	text-align: center;
	line-height: 1.2;
	font-size: clamp(0.875rem, 2.6vw, 3.5rem);
	white-space: nowrap;
	color: var(--grayscale-500);
	opacity: 0.1;
}
.rolling-card-item.active-next .rolling-card-video-text,
.rolling-card-item.active-prev .rolling-card-video-text {
	color: var(--grayscale-dark);
	opacity: 0.25;
	bottom: clamp(36px, 3vw, 50px);
}
.rolling-card-item.active .rolling-card-video-text {
	color: var(--grayscale-dark);
	opacity: 1;
	bottom: clamp(36px, 3vw, 70px);
}
.rolling-card-group-01 .rolling-card-item.active .rolling-card-video {
	height: 27vw;
}
.rolling-card-group-01 .rolling-card-item.active-next .rolling-card-video,
.rolling-card-group-01 .rolling-card-item.active-prev .rolling-card-video {
	height: 22.5vw;
}
.rolling-card-text {
	opacity: 0;
	font-size: 1.5rem;
	padding: 0.5rem;
	font-weight: 600;
	text-align: center;
	height: auto;
	transition: 1.5s cubic-bezier(0.19, 1, 0.22, 1);
	white-space: nowrap;
}
.rolling-card-group-01 .rolling-card-item.active .rolling-card-text {
	opacity: 1;
	font-size: clamp(1.5rem, 2vw, 2.5rem);
}

@media screen and (max-width: 480px) {
	.rollingCardSlider {
		height: clamp(350px,44vw,1600px);
		padding: 3.75rem 0 0rem 0;
	}
	.rolling-card-group-01 {
		transform: translateX(calc(8vw));
	}
	.rolling-card-group-01 .rolling-card-item {
		width: 8vw;
	}
	.rolling-card-group-01 .rolling-card-item.active {
		width: 80vw;
	}

	.rolling-card-group-01 .rolling-card-item.active-prev,
	.rolling-card-group-01 .rolling-card-item.active-next {
		width: 8vw;
	}

	.rolling-card-video {
		min-height: 240px;
	}
	.rolling-card-video-text {
		bottom: 16px !important;
		font-size: 6vw;
	}
}

/*rolling-review-card-grid*/
#review-card-section {
	background-color: var(--grayscale-50);
}
.review-card-container {
	display: flex;
	flex-direction: column;
	gap: 3.75rem;
	width: 100%;
	overflow: hidden;
}
.review-card-container h3 {
	text-align: center;
	word-break: keep-all;
}

.review-card-grid {
	display: flex;
	flex-direction: column;
	gap: 3.75rem;
}

.rollingReviewSwiper {
	display: flex;
}
.rollingReviewSwiper .swiper-wrapper {
	gap: 3.75rem;
	transition-timing-function: linear;
}
.review-card-lg {
	display: flex;
	width: clamp(320px, 40vw, 520px);
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	background-color: var(--grayscale-white);
}

.review-card-lg .review-card-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: inherit;
	margin: 0;
}

.review-card-lg p::-webkit-scrollbar {
	/*display: none;*/
	width: 4px; /* 세로축 스크롤바 폭 너비 */
	height: 4px; /* 가로축 스크롤바 폭 너비 */
	background-color: transparent;
}

.review-card-lg p::-webkit-scrollbar-thumb {
	background-color: var(--grayscale-300);
	border-radius: 99px;
	cursor: pointer;
}

.review-card-lg p::-webkit-scrollbar-track {
	background-color: var(--grayscale-100);
	border-radius: 99px;
	cursor: pointer;
}

.rollingReviewSwiper[dir="rtl"] .review-card-lg:nth-child(2n + 2) {
	background-color: var(--grayscale-800);
	color: var(--grayscale-white);
}

.rollingReviewSwiper[dir="ltr"] .review-card-lg:nth-child(2n) {
	background-color: var(--grayscale-800);
	color: var(--grayscale-white);
}

.rollingReviewSwiper[dir="rtl"] .review-card-lg:nth-child(2n + 2) p::-webkit-scrollbar-track {
	background-color: var(--grayscale-600);
}
.rollingReviewSwiper[dir="ltr"] .review-card-lg:nth-child(2n) p::-webkit-scrollbar-track {
	background-color: var(--grayscale-600);
}

.review-card-lg p:not(.review-card-title) {
	font-size: 1rem;
	height: 7.8rem;
	overflow-y: auto;
}

.review-card-lg .detail-info {
	display: flex;
}

.review-card-lg .detail-info img {
	width: 7.5rem;
	height: 3.75rem;
	object-fit: contain;
	border-radius: 0.25rem;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}

.review-card-lg .detail-info .reviewier-info {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.review-card-lg .detail-info:has(img) .reviewier-info {
	padding-left: 0.75rem;
}
.review-card-lg .detail-info .industry {
	font-weight: 700;
}
@media screen and (max-width: 768px) {
	.review-card-grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.rollingReviewSwiper .swiper-wrapper{
		gap: 1.75rem;
	}

	.review-card-lg:nth-child(4n + 2),
	.review-card-lg:nth-child(4n + 3) {
		background-color: inherit;
		color: inherit;
	}
	.review-card-lg:nth-child(2n + 2) {
		background-color: var(--grayscale-700);
		color: var(--grayscale-white);
	}
	.review-card-lg p {
		height: 4.8rem;
/*		 text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		word-break: keep-all; */
	}
	.review-card-lg .detail-info {
		font-size: 1rem;
		height: 3.75rem;
	}
}
/*client-section-conatiner*/
#client-section {
	background-color: var(--grayscale-50);
}
.client-section-container {
	width: 100%;
}
	.client-section-container h3 {
		text-align: center;
		margin: 0;
		padding-bottom: 3.75rem;
	}
.clientGroupSwiper .swiper-wrapper .swiper-slide {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, auto);
}
@media screen and (max-width: 768px) {
	.clientGroupSwiper .swiper-wrapper .swiper-slide {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, auto);
	}
	.clientGroupSwiper .swiper-wrapper .swiper-slide figure:nth-child(n + 10) {
		display: none;
	}
}
/*form start*/
#mform-section {
	background: linear-gradient(45deg, var(--baljugo-primary-700), var(--baljugo-primary-500));
	position: relative;
	z-index: 0;
	overflow: hidden;
}
	#mform-section .circle-box {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: -1;
		background: linear-gradient(45deg, var(--baljugo-primary-900), var(--baljugo-primary-500));
	}

		#mform-section .circle-box .circle {
			position: absolute;
			z-index: -2;
			width: 90vw;
			height: 90vw;
			border-radius: 999px;
			background: linear-gradient(45deg, var(--baljugo-primary-900), var(--baljugo-primary-500));
			transition: 0.5s ease-out;
			filter: blur(60px);
		}


.mform-contianer {
	display: flex;
	width: 100%;
	gap: 3rem;
}
.mform-contianer h3 {
	color: var(--grayscale-white);
	font-size: clamp(3.25rem, 3.5vw, 4.5rem);
}
.mform-contianer #mform {
	background-color: var(--grayscale-white);
	border-radius: 0.5rem;
	padding: 1.5rem;
}
#mform button {
	border: unset;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
#mform textarea {
	resize: none;
	height: 10rem;
	border: 1px solid var(--grayscale-100);
	border-radius: 0.25rem;
	padding: 0.5rem;
}
.checkbox-chips-wrap {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.input-wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	font-size: 1rem;
	padding-bottom: 1rem;
}
	.input-wrap span:not(.phone-input-group span) {
		font-weight: 500;
		padding-bottom: 0.5rem;
	}

.input-wrap label:not(.user_inpath_chip) {
	font-weight: 500;
	flex: 1;
	min-width: 48px;
	max-width: 80px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	margin: 0;
}
	.input-wrap .phone-input-group {
		flex: 1 1 196px;
		min-width: 196px;
		max-width: 100%;
		display: inline-flex;
		gap: 0.25rem;
		align-items: center;
	}
	.input-wrap input:not([type="checkbox"]) {
		flex: 1 1 196px;
		min-width: 196px;
		max-width: 100%;
		max-height: fit-content;
		padding: 0.5rem;
		border: 1px solid var(--grayscale-100);
		border-radius: 0.25rem;
	}
	.input-wrap .phone-input-group input:not([type="checkbox"]) {
		width: 100%;
		min-width: 56px;
		text-align: center;
	}
	.input-wrap .phone-input-group input:not([type="checkbox"]):first-child {
		max-width: 60px;
		text-align: center;
	}
	.user_inpath_chip {
		text-align: center;
		padding: 0.5rem 0.75rem;
		font-size: 1rem;
		color: var(--grayscale-500);
		border: 1px solid var(--grayscale-100);
		border-radius: 0.25rem;
		white-space: nowrap;
		cursor: pointer;
	}
.user_inpath_chip:has(input[type="checkbox"]:checked) {
	color: var(--baljugo-primary-600);
	border: 1px solid var(--baljugo-primary-600);
	background-color: var(--baljugo-primary-50);
}
label[for="privacyChk"]:focus-within {
	/*outline: 2px auto var(--baljugo-primary-500);*/
}
.user_inpath_chip input {
	display: none;
}
.mform-checkbox {
	width: 1rem;
	height: 1rem;
}
/* .mform-checkbox {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	border-radius: 0.25rem;
	border: 1px solid var(--grayscale-100);
	outline: 0;
}
.mform-checkbox::after {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	display: none;
	height: 65%;
	left: 0%;
	position: relative;
	top: -5%;
	transform: rotate(45deg);
	width: 39%;
}
input.mform-checkbox[type="checkbox"]:checked {
	background: var(--baljugo-primary-500);
	border: 1px solid var(--baljugo-primary-500);
}
input.mform-checkbox[type="checkbox"]:checked::after {
	display: block;
} */
.submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--baljugo-primary-600);
	color: var(--grayscale-white);
	font-size: 1.5rem;
	font-weight: 500;
	padding: 1rem;
	border-radius: 0.25rem;
	width: 100%;
}
.submit-button.disabled{
	background-color: var(--grayscale-500);
}
.submit-button:active {
	background-color: var(--baljugo-primary-800);
}
.submit-button.disabled:active{
	background-color: var(--grayscale-700);
}
.captcha-img {
	width: 162.5px;
	height: 31.25px;
}
.captcha-img img {
	width: 100%;
	height: 100%;
}
.captcha-reload-button {
	background-color: var(--grayscale-50);
	border-radius: 0.25rem;
	color: var(--grayscale-900);
}
@media screen and (max-width: 768px) {
	.mform-contianer {
		flex-direction: column;
	}
	#mform {
		padding: 1rem 0.75rem 0.75rem 0.75rem;
	}
	.input-wrap {
		padding-bottom: 0.5rem;
	}
	.submit-button {
		font-size: 1.25rem;
		padding: 0.75rem 1rem;
	}
}
/*form end*/

/*fqa-section*/
#fqa-section {
	background-color: var(--grayscale-dark);
	color: var(--grayscale-white);
}

.fqa-section-container h3 {
	text-align: center;
}
.fqa-section-container h4{
	font-weight: 600;
}
/*fqa-end*/

/*text-swiper*/
.client-group {
	background-color: var(--grayscale-white);
	padding: 1rem;
	box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
	border-radius: 0.75rem;
}
.client-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 2.25rem;
	border-radius: 0.5rem;
	background-color: var(--baljugo-primary-600);
	color: var(--grayscale-white);
	height: 5.625rem;
	overflow: hidden;
}
	.client-group-header a {
		color: var(--grayscale-white);
		transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
	}
	.client-group-header a:hover {
		color: var(--grayscale-white);
		scale: 1.1;
	}
.slide-text-group {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 0.75rem;
	white-space: nowrap;
	font-weight: 700;
	font-size: 1.75rem;
	color: rgba(255, 255, 255, 0.75);
}
.textSwiper .swiper-wrapper .swiper-slide-active {
	font-size: 2.25rem;
	color: var(--grayscale-white);
}
.textSwiper {
	width: 120px;
	height: 100%;
}
.textSwiper .swiper-wrapper {
	display: flex;
}
.textSwiper .swiper-wrapper .swiper-slide {
	display: flex;
	white-space: nowrap;
	align-items: center;
	justify-content: center;
	transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width: 768px) {
	.client-group-header a {
		margin-left: auto;
		font-size: 0.75rem;
	}
	.client-group-header {
		padding: 1rem;
		flex-wrap: wrap;
		height: 4rem;
	}
	.slide-text-group {
		font-size: 1rem;
		height: 32px;
	}
	.textSwiper {
		width: 64px;
		height: 100%;
	}
	.textSwiper .swiper-wrapper .swiper-slide-active {
		font-size: 1.5rem;
		color: var(--grayscale-white);
	}
}
/*common 요소 end*/

/*effect 요소 start*/
.flat-3d-shadow {
	box-shadow: -1px -1px 1px inset rgba(0, 0, 0, 0.4),
		1px 1px 1px inset rgba(255, 255, 255, 0.5);
}
/*effect 요소 end*/

/*new style end*/


/*발주고 소개*/
.sub-banner-container {
	width: 100%;
	padding: 1rem;
	display: flex;
	justify-content: center;
}



.sub-banner-contents {
	width: 100%;
	padding: 2.25rem 0rem;
	display: flex;
	border-radius: 0.5rem;
}

:where(.sub-banner-container.baljugo-download, .sub-banner-container.fchago-download) .sub-banner-contents {
	padding-left: 0rem;
	padding-right: 0rem;
}

/*section title 가운데정렬*/
.sub-section:not(#mform-section, .no-title-text-center)
:is(h1, h2, h3, h4, h5, h6) {
	text-align: center;
	margin: 0;
}

.sub-banner-contents .left {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}
:where(.sub-banner-container.baljugo-download, .sub-banner-container.fchago-download) .sub-banner-text.left {
	align-items: start;
}
.sub-banner-contents .right {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
}

:where(.sub-banner-container.baljugo-download, .sub-banner-container.fchago-download) .sub-banner-contents .right {
	align-items: end;
}

.baljugo-intro {
	background: var(--baljugo-primary-500);
	background-image: url(../bj-images/main/mainslide3_bg.webp), linear-gradient(to left bottom, #287dfa, #277af4, #2677ed, #2574e7, #2471e1);
	color: white;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.sub-banner-container.baljugo-download {
	background: linear-gradient( 30deg, var(--baljugo-primary-500), var(--baljugo-primary-800) );
	padding-bottom: 4rem;
}

.sub-banner-container.fchago-download {
	background: linear-gradient( 30deg, var(--fchago-primary-500), var(--fchago-primary-800) );
}

@media screen and (max-width: 768px) {
	.sub-banner-container.baljugo-download {
		padding-bottom: 0rem;
	}

	.sub-banner-container {
		padding: 0;
	}

		.sub-banner-container h2 {
			text-align: center;
		}

	.sub-banner-contents .sub-banner-iframe {
		display: none;
	}

	:where(.sub-banner-container.baljugo-download, .sub-banner-container.fchago-download) .sub-banner-text.left {
		align-items: center;
	}
	:where(.sub-banner-container.baljugo-download, .sub-banner-container.fchago-download) .sub-banner-contents .right {
		align-items: center;
	}

	.fchago-download .sub-banner-contents,
	.baljugo-download .sub-banner-contents {
		flex-direction: column-reverse;
	}
}
/*border-radius*/
.corner-025 {
	border-radius: 0.25rem;
}

.corner-05 {
	border-radius: 0.5rem;
}

.corner-075{
	border-radius: 0.75rem;
}

.corner-10 {
	border-radius: 1rem;
}

/*그리드 레이아웃*/
.gap-025 {
	gap: 0.25rem;
}

.gap-05 {
	gap: 0.5rem;
}

.gap-075 {
	gap: 0.75rem;
}

.gap-10 {
	gap: 1rem;
}

.gap-125 {
	gap: 1.25rem;
}

.gap-15 {
	gap: 1.5rem;
}

.gap-225 {
	gap: 2.25rem;
}

.gap-25 {
	gap: 2.5rem;
}

.gap-35 {
	gap: 3.5rem;
}

.gap-375 {
	gap: 3.75rem;
}

.sub-section {
	padding: 0px 1rem;
}

.sub-section-container {
	display: flex;
	flex-direction: column;
}

.pharse-20 {
	font-size: 2.0rem;
	line-height: 1.3;
	text-wrap: balance;
	word-break: keep-all;
}

.pharse-15 {
	font-size: 1.5rem;
	line-height: 1.2;
	text-wrap: balance;
	word-break: keep-all;
}

.pharse-125 {
	font-size: 1.25rem;
	line-height: 1.2;
	text-wrap: balance;
	word-break: keep-all;
}

.flex-wrap-container {
	display: flex;
	flex-wrap: wrap;
}

.grid-container {
	display: grid;
}

	.grid-container.two-block {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-container .full-block {
		grid-column: 1 / 3;
	}

.grid-box:not(:has(.grid-box)) {
	width: 100%;
	border-radius: 0.5rem;
	padding: 2rem;
}

.grid-box-label {
	display: inline-block;
	width: fit-content;
	font-size: 1.25rem;
	font-weight: 700;
	padding: 0rem 0.5rem;
	color: white;
	background-color: var(--baljugo-primary-500);
	border-radius: 0.25rem;
}

.grid-box-text-label {
	display: inline-block;
	width: fit-content;
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--baljugo-primary-600);
}

#fqa-section .grid-box-text-label {
	color: var(--baljugo-primary-400);
}

.grid-box-header{
	font-size: 1.5rem;
	font-weight: 700;
}

.grid-box.col-row-auto {
	display: flex;
}

.grid-box.col-col-auto {
	display: flex;
	flex-direction: column;
}

:where(.grid-box) :is(.left, .right) {
	flex: 1;
}

.grid-box .text-box {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
/*rolling-banner-conatainer*/
.rollingBannerSwiper:nth-child(2n + 1) {
	position: relative;
	left: clamp(80px, 10%, 100px);
}

.rolling-banner-conatainer .rollingBannerSwiper .swiper-wrapper {
	transition-timing-function: linear;
	height: auto;
}

.rolling-banner-conatainer.logo-contents-layout figure {
	width: clamp(120px, 20%, 200px) !important;
	min-width: 120px;
	box-shadow: unset;
}

@media screen and (max-width: 768px) {
	.rolling-banner-conatainer.logo-contents-layout
	.rollingBannerSwiper:nth-child(n - 2) {
		margin-bottom: 1rem;
	}

	.grid-box .text-box{
		gap: 0.5rem;
	}
}

.rolling-banner-conatainer.logo-contents-layout figure figcaption {
	font-size: clamp(0.5em, 3.3vw, 1em);
	color: var(--grayscale-500);
}
/*발주고 소개 02*/
.contents-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.25rem;
	padding: clamp(1rem, 5vw, 2.25rem);
	border-radius: 0.5rem;
	height: 100%;
}

.left-img-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 1.5rem;
	border: 2px dashed var(--grayscale-white);
	border-radius: 1rem;
}

#big-arrow-right {
	width: 100%;
	min-width: 2.25rem;
	max-width: 4rem;
	height: 100%;
}

.order-paper-set-image {
	width: 25%;
	height: auto;
	object-fit: contain;
}

.img-column {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
}

	.img-column img {
		width: 100%;
		min-width: 1rem;
		max-width: 3rem;
		height: 100%;
		max-height: 1rem;
		max-height: 3rem;
	}

.payment-img-card-group {
	display: flex;
	gap: 0.5rem;
}

.payment-img-card {
	display: flex;
	flex-direction: column;
	flex: 1;
	background-color: var(--grayscale-dark);
	border-radius: 0.5rem;
}

	.payment-img-card .img-box {
		width: 100%;
		height: 100%;
		padding: 0.5rem;
	}

	.payment-img-card img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 0.25rem;
	}

	.payment-img-card span {
		color: var(--grayscale-white);
		text-align: center;
		padding-bottom: 0.5rem;
	}

.thirdpl-intro-group {
	display: flex;
	width: 100%;
}

.thirdpl-intro:not(:nth-child(2)) {
	flex: 2;
}

.thirdpl-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 0.5rem;
	background-color: var(--grayscale-white);
	border-radius: 0.5rem;
}

	.thirdpl-intro.first-box {
		border: 2px solid #5368F5;
	}

	.thirdpl-intro.third-box {
		border: 2px solid #184b96;
	}

	.thirdpl-intro .p-group {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 0.75rem;
		gap: 0.75rem;
		height: 100%;
	}

.p-group p {
	text-align: center;
}

.thirdpl-intro .label {
	padding: 0.25rem 1rem;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 0.25rem;
}

.thirdpl-intro.first-box .label {
	color: #fff;
	background-color: #5368F5;
}

.thirdpl-intro.third-box .label {
	color: #fff;
	background-color: #184b96;
}

.second-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 2;
	position: relative;
	padding-top: 1rem;
}

	.second-box .text {
		position: absolute;
		top: 0;
		text-align: center;
		word-break: keep-all;
	}

.arrow-chip {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arrow-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
}

.arrow-chip .chip {
	padding: 0.25rem 1rem;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 999px;
	white-space: nowrap;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.order.chip {
	color: white;
	background-color: #5368F5;
}

.delivery.chip {
	color: white;
	background-color: #184b96;
}

.arrow-item hr {
	margin-top: 20px;
	margin-bottom: 20px;
	width: 95%;
	border: 1px dashed transparent;
}

.arrow-item.order hr {
	border-color: #5368F5;
}

.arrow-item.order .arrow {
	border-right-color: #5368F5;
}

.arrow-item.delivery hr {
	border-color: #184b96;
}

.arrow-item.delivery .arrow {
	border-right-color: #184b96;
}

.arrow-left .arrow {
	position: absolute;
	left: 0;
}

.arrow-left hr {
	margin-left: 4px;
}

.arrow-right .arrow {
	position: absolute;
	right: 0;
	rotate: 180deg;
}

.arrow-right hr {
	margin-right: 4px;
}

.second-box .arrow {
	width: 0;
	height: 0;
	margin: 1rem auto;
	border-top: 0.5rem solid transparent;
	border-bottom: 0.5rem solid transparent;
	border-right: 1rem solid transparent;
}

.reviewier-card {
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15);
	background-color: var(--grayscale-white);
	border-radius: 0.5rem;
}

.reviewier-card-title {
	font-size: 1.5rem;
	font-weight: 700;
}

.reviewier-card-body {
	font-size: 1.25rem;
}

.star-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

	.star-area .stars {
		display: grid;
		grid-template-columns: repeat(5, clamp(24px, 4.4vw, 36px));
		width: 70%;
	}

		.star-area .stars .star {
			width: 100%;
		}

	.star-area span {
		font-size: 1rem;
		color: var(--grayscale-500);
		white-space: nowrap;
	}
/**/
#award {
	background: url(../bj-images/icons/award-bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 6rem 0;
}

.award-item-group {
	justify-content: center;
	gap: 3rem;
}

.award-item {
	display: flex;
}

	.award-item .text-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: white;
		min-width: 160px;
	}
		.award-item .text-area h3{
			font-size: 2.75rem;
		}

		.award-item .text-area p:first-child {
			font-size: 1.25rem;
		}

		.award-item .text-area * {
			text-align: center;
			word-break: keep-all;
		}

.icon-box-group {
	justify-content: space-around;
}

.icon-box-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

	.icon-box-item .img-box {
		padding: 1.5rem;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
		background-color: white;
		border-radius: 0.75rem;
	}

	.icon-box-item span {
		font-size: 1.25rem;
		font-weight: 700;
	}

.white-box {
	background-color: var(--grayscale-white);
	border-radius: 0.5rem;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

.change-effect-text p.first {
	font-size: 2.25rem;
	font-weight: 500;
}

.change-effect-text p.second {
	font-size: 1.5rem;
	font-weight: 400;
}

.system-box-grid {
	grid-template-columns: repeat(3, 1fr);
}

.light-blue-box {
	background-color: var(--baljugo-primary-50);
	border-radius: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

	.light-blue-box p {
		text-align: center;
	}

.system-info-container {
	position: relative;
}

.white-shadow {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5rem;
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.bj-image-00 {
	background: url(../bj-images/icons/baljugo-app-img-00.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

@media screen and (max-width: 768px) {
	section:not(#home, #sub-banner, #award, #scroll-motion-section, #rolling-card-section, #review-card-section, #sol-client-section, #client-logo-rolling-banner) {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.gap-05 {
		gap: 0.25rem;
	}

	.gap-075 {
		gap: 0.5rem;
	}

	.gap-10 {
		gap: 0.75rem;
	}

	.gap-125 {
		gap: 1rem;
	}

	.gap-15 {
		gap: 0.75rem;
	}

	.gap-225 {
		gap: 1.5rem;
	}

	.gap-25 {
		gap: 1.75rem;
	}

	.gap-35 {
		gap: 2.75rem;
	}

	.pharse-15 {
		font-size: 1.25rem;
	}

	.pharse-125 {
		font-size: 1rem;
	}

	.grid-container.two-block:not(.no-change-direction) {
		display: flex;
		flex-direction: column;
	}

	.grid-box.col-row-auto:not(.no-reverse) {
		flex-direction: column-reverse;
	}

	.grid-box.col-row-auto.no-reverse {
		flex-direction: column;
	}

	.contents-container {
		flex-direction: column;
	}

	.left-img-container,
	.img-column {
		gap: 0.75rem;
	}

	#big-arrow-right {
		rotate: 90deg;
		width: 3rem;
	}

	.left-img-container {
		padding: 0.5rem;
	}

	.order-paper-set-image {
		width: 50%;
		height: auto;
		object-fit: contain;
	}

	.thirdpl-intro-group {
		flex-direction: column;
	}

	.second-box {
		flex-direction: row;
		padding-top: 0;
		min-height: 100px;
	}

	.arrow-item {
		rotate: 90deg;
		width: 100px;
		height: 100%;
	}

	.reviewier-card-title {
		font-size: 1rem;
		font-weight: 700;
	}

	.reviewier-card-body {
		font-size: 0.875rem;
		height: 100%;
	}

	.star-area .stars {
		grid-template-columns: repeat(5, clamp(16px, 4.4vw, 28px));
		width: 70%;
	}

	.star-area span {
		font-size: 0.875rem;
	}

	.icon-box-group {
		gap: 1rem;
	}

	.system-box-grid {
		grid-template-columns: repeat(2, 1fr);
	}

		.system-box-grid :last-child {
			grid-column: 1 / 3;
		}

	.grid-box:not(:has(.grid-box)) {
		padding: 1rem;
	}

	.flex-wrap-container:not(.no-change-direction) {
		flex-direction: column;
	}

	.second-box .text {
		top: 50%;
		transform: translateY(-50%);
		font-size: 0.875rem;
	}

	.change-effect-text p.first {
		font-size: 1.75rem;
		font-weight: 500;
	}

	.change-effect-text p.second {
		font-size: 1.25rem;
		font-weight: 400;
	}

	.section-06 .grid-box .pharse-125 {
		font-size: 0.75rem;
	}

	.section-06 .grid-box .pharse-15 {
		font-size: 1.25rem;
	}

	.section-06 .grid-box.light-blue-box .pharse-15 {
		font-size: 1rem;
	}
}

/*발주고 다운로드*/
/*article*/
.download-bg-image {
	width: 80%;
	height: auto;
}
.download-card {
	border-radius: 0.5rem;
	border: 1px solid var(--grayscale-100);
	background-color: var(--grayscale-white);
	word-break: keep-all;
}
.download-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.download-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	border: 1px solid var(--grayscale-100);
	border-radius: 0.25rem;
	padding: 0.25rem;
	width: 100%;
}
.weblink {
	height: 3.25rem;
}
.download-form.baljugo:focus-within {
	outline: 2px solid var(--baljugo-primary-500);
}
.download-form.fchago:focus-within {
	outline: 2px solid var(--fchago-primary-500);
}
.download-form input {
	width: 100%;
	height: 3.25rem;
	border: unset;
	padding: 0 0.5rem;
	flex: 1 0 max-content;
}
.download-form input:focus {
	outline: unset;
}
.download-form button {
	display: flex;
	flex: 1 0;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	gap: 0.5rem;
	padding: 0.5rem 1.5rem;
	width: fit-content;
	height: 3.25rem;
	border: unset;
	border-radius: 0.25rem;
	background-color: var(--grayscale-300);
	color: var(--grayscale-white);
	font-size: 1.5rem;
	font-weight: 700;
	transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.download-form button.baljugo-download.active {
	background-color: var(--baljugo-primary-500);
}
.download-form button.fchago-download.active {
	background-color: var(--fchago-primary-600);
}

.qr-tag{
	display: flex;
	border: 1px solid var(--grayscale-100);
	padding: 0.25rem;
	border-radius: 0.5625rem;
}
.qr-image .qr-tag img {
	width: 1.5rem;
	height: 1.5rem;
	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.15));
}
.qr-image .qr-tag span {
	width: 100%;
	color: var(--grayscale-dark);
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	padding: 0px 0.5rem;
	text-wrap: nowrap;
}

.qr-image {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	width: 7.5rem;
	height: auto;
	font-size: 1rem;
}
.qr-image img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.download-article {
	position: absolute;
	transform: translateY(-50%);
}
.card-txt-subtitle {
	font-size: 1.25rem;
}

.card-txt-title {
	font-size: 2.5rem;
	text-align: end;
}
@media screen and (max-width: 768px) {
	.sub-banner-contents .left {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.sub-banner-contents .left p {
		text-align: center;
		word-break: keep-all;
	}
	.padding-y-160 {
		padding-top: 1rem !important;
	}
	.main-layout section:last-child {
		padding-bottom: 3.5rem;
	}
	.download-article {
		position: static;
		transform: translateY(0%);
		padding: 1rem 1rem 2rem 1rem;
		flex-wrap: wrap;
	}
	.download-article .grid-box {
		flex-basis: fit-content;
		flex-grow: 1;
		flex-shrink: 0;
	}
	.card-txt-subtitle {
		font-size: 0.875rem;
	}

	.card-txt-title {
		font-size: 1.25rem;
		text-align: end;
	}
	.qr-image {
		width: 60px;
	}

	.qr-tag {
		border: unset;
		justify-content: center;
	}

	.qr-image .qr-tag img {
		width: 2.25rem;
		height: 2.25rem;
	}

	.qr-image .qr-tag span {
		display: none;
	}


}

/*br*/
br.mobileOnly {
	display: none;
	visibility: hidden;
}

@media screen and (max-width: 768px) {
	br.mobileOnly {
		display: block;
		visibility: visible;
	}
}


.more-button {
	opacity: 0.75;
	text-decoration: underline;
	text-underline-offset: 4px;
}

	.more-button:hover {
		opacity: 1;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

/*swiper*/
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
	font-weight: bold;
	font-size: 1.5rem;
	width: 40px;
	height: 40px;
	align-content: center;
	text-align: center;
	color: #ffffff;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {	
	font-weight: bold;
	font-size: 1.5rem;
	width: 48px;
	height: 48px;
	align-content: center;
	text-align: center;
	color: #ffffff;
}

/*add*/
.bannerContentsWrap a {
	border-radius: var(--s-20);
}

.mainBannerButton {
	display: flex;
	gap: var(--s-40);
}


.outlineBtn.white {
	border: 1px solid var(--grayscale-white);
	color: var(--grayscale-white);
}

.fillBtn.white {
	background-color: var(--grayscale-white);
	color: var(--baljugo-primary-600);
}


@media screen and (min-width: 769px) and (max-width: 991px) {
	.logo-contents-layout:not(.main, .rolling-banner-conatainer) {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (max-width: 768px) {
	:root {
		--fullwidth-layout-padding: 20px;
	}

	/* .tabs-wrap .primary-tab-box:first-child {
    margin-left: var(--s-20);
    margin-right: calc(var(--s-20) / 2);
  }

  .tabs-wrap .primary-tab-box:last-child {
    margin-left: calc(var(--s-20) / 2);
    margin-right: var(--s-20);
  } */

	.second-tab-box {
		min-width: fit-content;
		padding: var(--s-20);
	}

	.second-tab-box-inner {
		background-color: var(--grayscale-white);
		border-radius: var(--s-20);
		padding: var(--s-40) var(--s-40);
		min-width: 96px;
	}

	.second-tab-box .second-tab-box-inner img {
		border: 0rem solid var(--grayscale-white);
		height: 36px;
	}

	.second-tab-box-inner p {
		font-size: clamp(1rem, 3vw, 1.25rem);
	}
	/* 
  .third-group-tabs {
    margin-left: var(--s-20);
  } */

	.logo-contents-layout:not(.main) {
		grid-template-columns: repeat(auto-fill, minmax(31.5%, auto));
		padding-left: 12px;
		padding-right: 12px;
	}

	.logo-contents-layout figure {
		margin: 0;
		padding-bottom: 1.75em;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

		.logo-contents-layout figure img {
			height: 84px;
			padding-left: 0.5em;
			padding-right: 0.5em;
			border: 0.5rem solid transparent;
		}

		.logo-contents-layout figure figcaption {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 1.75em;
			font-size: 1em;
			padding-left: 0.25em;
			padding-right: 0.25em;
			bottom: 0;
		}
}

@media screen and (max-width: 540px) {
	.sub-banner-mid {
		flex-wrap: wrap;
		justify-content: center !important;
	}

		.sub-banner-mid h2,
		.sub-banner-mid p {
			text-align: center;
		}

		.sub-banner-mid h2 {
			word-break: keep-all;
		}

			.sub-banner-mid h2 strong {
				white-space: pre;
			}

		.sub-banner-mid p {
			font-size: var(--font-size-dl);
		}

		.sub-banner-mid figure {
			width: 100%;
			margin-top: 24px;
		}

		.sub-banner-mid figcaption {
			font-size: 0.875em;
		}

	.client-chart {
		width: 100%;
		height: 72px;
		border-radius: 12px;
		background: linear-gradient( 60deg, var(--baljugo-primary-500) var(--linear-percentage), var(--baljugo-primary-900) var(--linear-percentage) );
		rotate: 0deg !important;
	}

	.client-banner-area {
		margin: 16px 16px 0px 16px;
		font-size: 20px;
	}

		.client-banner-area .client-banner-img .card-banner-bg {
			display: flex;
			justify-content: space-between;
			min-width: 360px;
			width: 100%;
			padding: var(--s-40) var(--s-40);
			background: linear-gradient( 110deg, var(--baljugo-primary-600) 00%, var(--baljugo-primary-500) 100% );
			box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
			backdrop-filter: blur(2px);
		}

		.client-banner-area .client-banner-img {
			height: 100%;
		}

			.client-banner-area .client-banner-img img {
				width: 84px;
			}

	#third-group-tabs-area {
		justify-content: start;
	}

	.logo-contents-layout figure {
		margin: 0;
		padding-bottom: 1.75em;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

		.logo-contents-layout figure img {
			height: 72px;
			padding-left: 0.25em;
			padding-right: 0.25em;
			border: 0.25rem solid transparent;
		}

		.logo-contents-layout figure figcaption {
			height: 2.5em;
			font-size: 0.875em;
			padding-left: 0.25em;
			padding-right: 0.25em;
			bottom: 0;
		}
}


.swiper-button-next:after,
.swiper-button-prev:after {
	color: var(--grayscale-500);
}


.loader, .loader:before, .loader:after {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	animation-fill-mode: both;
	animation: bblFadInOut 1.8s infinite ease-in-out;
}


.loader {
	font-size: 7px;
	position: relative;
	text-indent: -9999em;
	transform: translateZ(0);
	animation-delay: -0.16s;
}

	.loader:before,
	.loader:after {
		content: '';
		position: absolute;
		top: 0;
	}

	.loader:before {
		left: -3.5em;
		animation-delay: -0.32s;
	}

	.loader:after {
		left: 3.5em;
	}

@keyframes bblFadInOut {
	0%, 80%, 100% {
		box-shadow: 0 2.5em 0 -1.3em
	}

	40% {
		box-shadow: 0 2.5em 0 0
	}
}

.loader-container {
	/*z-index: 9999;
    position: fixed;
    display: flex;
    top: 0; */
	align-items: center;
	justify-content: center;
	/*background-color: rgba(0, 0, 0, 0.25);*/
}

/* 스켈레톤 스타일 */
/*로고 스켈레톤*/
.logo-contents-layout .figure-skeleton .figure-skeleton-image {
	width: 100%;
	height: 108px;
	padding-left: 1.5em;
	padding-right: 1.5em;
	border-radius: 4px;
	border: 0.75rem solid white;
	animation: shimmer 1.5s infinite linear;
}

.logo-contents-layout .figure-skeleton .figure-skeleton-text {
	animation: shimmer 1.5s infinite linear;
	width: 40%;
	height: 20px;
	border-radius: 4px;
	margin: 0 auto;
}

.figure-skeleton-image,
.figure-skeleton-text {
	background: linear-gradient(120deg, #EDEDEF 25%, #F2F3F4 38%, #F8F8F8 50%, #F3F3F4 68%, #EDEDEF 75% );
	background-size: 200% 100%;
}

/*공지사항 스켈레톤*/
.skeleton-image {
	background: #e0e0e0;
	animation: shimmer 1.5s infinite linear;
}

.skeleton-text-wrap {
	padding: var(--s-40);
}

.skeleton-text {
	width: 100%;
	height: 20px;
	border-radius: 4px;
	animation: shimmer 1.5s infinite linear;
}

.boardbox.modalVer .boarddate.skeleton-text.date {
	width: 40%;
	align-content: end;
	margin-left: auto;
	margin-top: var(--s-40);
}

/* 스켈레톤 애니메이션 */
@keyframes shimmer {
	0% {
		background-position: 100%;
	}

	100% {
		background-position: -100%;
	}
}

.skeleton-image,
.skeleton-text {
	background: linear-gradient(120deg, #EDEDEF 25%, #F2F3F4 38%, #F8F8F8 50%, #F3F3F4 68%, #EDEDEF 75% );
	background-size: 200% 100%;
}



.relative {
	position: relative;
}

/*floating*/
.floating-container {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1rem;
	position: fixed;
	right: clamp(8px, 2vw, 108px);
	bottom: clamp(8px, 2vw, 108px);
	z-index: 998;
}

.floating-wrapper{
	display:flex ;
	flex-direction: column;
}

	.floating-header.closed {
		border-radius: 999px;
		overflow: hidden;
	}

.floating-box {
	background-color: white;
	border-radius: 0.5rem;
	transform-origin: right;
}
.floating-box:has(.floating-header.closed) {
	border-radius: 50%;
}

.floating-header,
.one-time-floating-header {
	display: flex;
	align-items: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 1rem;
	padding-right: 0.5rem;
}
	.floating-header.closed {
		padding: 0rem;
	}

.square-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: unset;
	background-color: #ffffff;
	transition: 0.3s ease-in-out;
	position: relative;
}
	.square-button.open-button img {
		/*background-position-y: 0%;*/
		scale: 1;
	}
	.square-button.open-button:hover img{
		scale: 1.125;
	}

	.square-button.open-button img {
		transform: rotate(8deg) scale(1.125);
		width: 100%;
		height: 100%;
		object-fit: contain;
		animation: breath 10s infinite linear;
	}

@keyframes breath{
	0% {
		transform: rotate(0deg), scale(1);
	}
	25% {
		transform: rotate(-4deg) scale(1.05);
	}
	50% {
		transform: rotate(0deg) scale(0.95);
	}
	75% {
		transform: rotate(8deg) scale(1.05);
	}
	100% {
		transform: rotate(0deg) scale(1);
	}
}

.square-button.close-button {
	font-size: 1.5rem;
	font-weight: bold;
	background-color: transparent;
}

.floating-header .text-area {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-left: 0.75rem;
	transform-origin: right;
}
		.floating-header.closed .text-area {
			transform: scaleX(0);
		}

		.floating-header .text-area .floating-title{
			font-size: 1rem;
			font-weight: 600;
		}

.floating-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
	transform: translate(0%, 0%);
}
.floating-body.closed {
	opacity: 0;
	max-width: 0;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	transform: translateX(50%, 50%);
}
	.floating-body .popup-image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: clamp(280px, 26vw, 26vw);
		padding-left: 1rem;
		padding-right: 1rem;
	}
.floating-body .popup-image img{
	width: 80%;
	height: 80%;
	object-fit: contain;
	position: relative;
	scale: 1;
}
.floating-body .popup-image img:hover{
	scale: 1.125;
}

.floating-body .button-group{
	display: flex;
	gap: 0.5rem;
}

.floating-body .button-group .popup-button{
	display: flex;
	flex:1;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	border:unset;
	background-color: unset;
}

.floating-body .button-group .popup-button.inquiry {
	color: var(--baljugo-primary-900);
	background-color: var(--baljugo-primary-50);
	border: 2px solid var(--baljugo-primary-900);
}
	.floating-body .button-group .popup-button:hover{
		filter: brightness(0.85);
	}

	.floating-body .button-group .popup-button.kakao {
		color: #040000;
		background-color: #F0D822;
		border: 2px solid #F0D822;
	}


/*floating-popup*/
.floating-popup,
.one-time-floating-popup {
	z-index: -1;
	padding: 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	text-wrap: nowrap;
	color: var(--baljugo-primary-600);
	position: absolute;
	background-color: white;
	top: 50%;
	left: 0%;
	opacity: 1;
	transform: translate(-110%, -50%) scaleX(1);
}

	.floating-popup.closed {
		opacity: 0;
		transform: translate(-20%, -50%) scaleX(0);
	}

	.floating-popup svg {
		position: absolute;
		top: 50%;
		right: 0.25rem;
		transform: translate(100%, -50%);
	}

.floating-header.closed .text-area, .floating-header.closed .close-button {
	opacity: 0;
	max-width: 0;
	max-height: 0;
	overflow: hidden;
	padding: 0;
}

.one-time-floating-wrapper .square-button.close-button {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	z-index: 1;
	background-color: transparent;
}

/*floating shadow*/
.floating-shadow {
	filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.15));
}


/*floating transition*/
.floating-box {
	transition: 0.5s cubic-bezier(0, 0.7, 0.65, 1);
}

.floating-header {
	transition: 0.5s cubic-bezier(0, 0.7, 0.65, 1);
}

.square-button.open-button img {
	transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.floating-body .popup-image img {
	transition: 0.5s cubic-bezier(0, 0.7, 0.65, 1);
}
.floating-header .text-area {
	transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.floating-body {
	transition: 0.5s cubic-bezier(0, 0.7, 0.65, 1);
}
.floating-header .text-area, .floating-header .close-button, .floating-body {
	transition: 0.5s cubic-bezier(0, 0.7, 0.65, 1);
}

.floating-popup {
	transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.floating-body .button-group .popup-button {
	transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

/*one-time-floating-wrapper*/
.one-time-floating-wrapper {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translate(0%, 10%);
	opacity: 0;
	scale: 1;
	transition: 0.5s cubic-bezier(0.38, 0, 0.36, 1.5);
}
	.one-time-floating-wrapper.opened {
		transform: translate(0, 0);
		display: flex;
		opacity: 1;
		scale: 1;
	}
	.one-time-floating-wrapper .floating-box {
		background-color: var(--baljugo-primary-500);
		background-color: white;
	}
.floating-header .text-area .floating-text {
	font-size: 0.875rem;
	font-weight: 400;
}

.one-time-floating-wrapper .floating-body{
	gap: 0.5rem;
}

.one-time-floating-wrapper .floating-body .popup-image {
	padding-left: 0rem;
	padding-right: 0rem;
}
.one-time-floating-wrapper .floating-body .popup-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: relative;
	scale: 1;
}
.one-time-floating-wrapper .floating-body .button-group {
	flex-direction: column;
}
.floating-body .button-group .popup-button.one-day-close-button {
	color: var(--grayscale-500);
	font-weight: 400;
	flex: 0 1 auto;
	padding: 0rem;
}
.floating-body .button-group .popup-button.blog-link-button {
	color: var(--grayscale-white);
	background-color: var(--baljugo-primary-600);
	border: 2px solid var(--baljugo-primary-600);
}
/*os-info 추가 2025.03.17 LGW*/
.left-border {
	border-left: 1px solid #bbb;
}

.mobilehide.flex {
	display: flex;
}

.os-info-layout {
	gap: 0.75rem;
	padding-top: 0.75rem;
	color: var(--grayscale-700);
	font-size: 14px;
}

	.os-info-layout div:nth-child(2) {
		border-top: unset;
		padding-top: 0rem;
	}

.os-info-col {
	gap: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid #E2E2E2;
}

.os-icon {
	--os-icon-size: 24px;
	width: var(--os-icon-size);
	min-width: var(--os-icon-size);
	height: var(--os-icon-size);
	min-height: var(--os-icon-size);
}

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

.os-check-icon {
	--os-icon-size: 16px;
	width: var(--os-icon-size);
	min-width: var(--os-icon-size);
	height: var(--os-icon-size);
	min-height: var(--os-icon-size);
}

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

@media only screen and (max-width : 768px) {
	.left-border {
		border-left: unset;
	}

	.mobilehide.flex {
		display: none;
	}
}