/*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;
}


.d-col {
	display: flex;
	flex-direction: column;
}

.col-col-auto {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: -webkit-fill-available;
}

.col-col-2 {
	display: flex;
	flex-direction: column;
	gap: var(--s-05);
}

.col-col-4 {
	display: flex;
	flex-direction: column;
	gap: var(--s-10);
}

.col-col-8 {
	display: flex;
	flex-direction: column;
	gap: var(--s-20);
}

.col-col-12 {
	display: flex;
	flex-direction: column;
	gap: var(--s-30);
}

.col-col-16 {
	display: flex;
	flex-direction: column;
	gap: var(--s-40);
}


.d-row {
	display: flex;
	flex-direction: row;
}

.col-row-2 {
	display: flex;
	gap: var(--s-05);
	align-items: center;
}

.col-row-4 {
	display: flex;
	gap: var(--s-10);
	align-items: center;
}

.col-row-8 {
	display: flex;
	gap: var(--s-20);
	align-items: center;
}

.col-row-12 {
	display: flex;
	gap: var(--s-30);
	align-items: center;
}

.col-row-16 {
	display: flex;
	gap: var(--s-40);
	align-items: center;
}

.col-row-auto {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

section :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}
.transition {
	transition: var(--transition-options, 0.4s cubic-bezier(0.19, 0.78, 0.68, 1));
}
/*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);
}

.page-header {
	margin: 74px 0 10px 0;
	border-bottom: none;
	padding-bottom: 0px;
}

/*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;
	}
}
.webhide {
	display: none;
}

@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;
	}
	.mobilehide {
		display: none;
	}
}




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

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

/*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;
	}
}

/*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;
}
.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*/

/*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*/

/*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*/

/*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;
}
.sub-banner-container {
	width: 100%;
	padding: 1rem;
	display: flex;
	justify-content: center;
}

.sub-banner-contents {
	width: 100%;
	padding: 1rem 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;
}

@media screen and (max-width: 768px) {
	.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;
}
.white-box {
	background-color: var(--grayscale-white);
	border-radius: 0.5rem;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}
.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;
	width: 100%;
}

@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;
	}

}

/*발주고 다운로드*/
/*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;
}

.card-txt-subtitle {
	font-size: 1.25rem;
}

.card-txt-title {
	font-size: 2.25rem;
	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 {
		padding: 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.8;
	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;
}

.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) {
	.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) {
	.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;
}

.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;
	}
}