/* Contact styles must load before first paint. */
.ho12-contact,
            .ho12-contact * { box-sizing: border-box; }
            .ho12-contact {
                --ho12-muted: #aaa6a3;
                --ho12-soft: #d4d1ce;
                --ho12-yellow: #efb51d;
                width: min(100%, 1000px);
                margin: 0 auto;
                padding: clamp(54px, 8vw, 112px) 24px 70px;
				color: var(--ho12-muted) !important;
            }
            .ho12-contact__form {
                position: relative;
				width: min(100%, 300px);
                margin: 0 auto;
            }
            .ho12-contact__form-error {
                margin: 0 0 22px;
                color: var(--ho12-yellow);
                font-size: 13px;
                text-align: center;
            }
            .ho12-contact__row {
                display: grid;
				grid-template-columns: 72px minmax(0, 228px);
                align-items: start;
				width: 100%;
				min-height: 32px;
            }
            html body #page .ho12-contact__row label {
				height: 32px;
				padding: 0;
                color: var(--ho12-muted) !important;
				font-size: 11px;
				font-weight: 700;
				line-height: 32px;
            }
.ho12-contact__control {
    position: relative;
    min-width: 0;
	min-height: 32px;
}
	html body #page .ho12-contact input,
	html body #page .ho12-contact select,
	html body #page .ho12-contact textarea {
		display: block;
		width: 100%;
		margin: 0;
		height: 32px;
		min-height: 32px;
		padding: 0 28px 0 0;
		border: 0 !important;
		border-width: 0 !important;
		border-style: none !important;
		border-color: transparent !important;
		border-radius: 0 !important;
		outline: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		color: #989490 !important;
		font: inherit;
		font-size: 11px;
		line-height: 32px;
		-webkit-appearance: none;
		appearance: none;
	}
html body #page .ho12-contact textarea {
	height: 88px;
	min-height: 88px;
	max-height: 88px;
	padding-top: 0;
	line-height: 1.55;
    resize: none !important;
}
            .ho12-contact__row--message {
				min-height: 92px;
				margin-top: 0;
            }
			.ho12-contact__row--message.has-conditional { min-height: 136px; }
			html body #page .ho12-contact__native-select {
				position: absolute !important;
				width: 1px !important;
				height: 1px !important;
				min-height: 1px !important;
				padding: 0 !important;
				opacity: 0 !important;
				pointer-events: none !important;
			}
			html body #page .ho12-contact__select-trigger {
				display: flex !important;
				align-items: center !important;
				justify-content: space-between !important;
				width: 100% !important;
				height: 32px !important;
				min-height: 32px !important;
				margin: 0 !important;
				padding: 0 !important;
				border: 0 !important;
				border-radius: 0 !important;
				background: transparent !important;
				box-shadow: none !important;
				color: #989490 !important;
				font-size: 11px !important;
				font-weight: 400 !important;
				line-height: 32px !important;
				transform: none !important;
				cursor: pointer;
			}
			.ho12-contact__select-arrow {
				display: block;
				flex: 0 0 auto;
				width: 8px;
				height: 14px;
				margin-right: 1px;
				opacity: .35;
				object-fit: contain;
				transform: rotate(90deg);
				transition: transform .16s ease, opacity .16s ease;
				pointer-events: none;
			}
			.ho12-contact__select-trigger[aria-expanded="true"] .ho12-contact__select-arrow {
				transform: rotate(-90deg);
			}
			html body #page .ho12-contact__select-trigger:is(:hover, :focus-visible) {
				color: #111 !important;
			}
			.ho12-contact__select-trigger:is(:hover, :focus-visible) .ho12-contact__select-arrow {
				opacity: 1;
			}
			.ho12-contact__select-menu {
				position: absolute;
				top: 30px;
				right: 0;
				z-index: 20;
				width: 64px;
				padding: 2px 0;
				border: 1.5px solid var(--ho12-yellow);
				background: #fff;
				box-shadow: none;
			}
			.ho12-contact__select-menu[hidden] { display: none !important; }
			html body #page .ho12-contact__select-menu button {
				display: block !important;
				width: 100% !important;
				height: 22px !important;
				min-height: 22px !important;
				margin: 0 !important;
				padding: 0 7px !important;
				border: 0 !important;
				border-radius: 0 !important;
				background: #fff !important;
				box-shadow: none !important;
				color: var(--ho12-muted) !important;
				font-size: 10.5px !important;
				font-weight: 400 !important;
				line-height: 22px !important;
				text-align: left !important;
				transform: none !important;
				cursor: pointer;
			}
			html body #page .ho12-contact__select-menu button:is(:hover, :focus-visible),
			html body #page .ho12-contact__select-menu button[aria-selected="true"] {
				color: #111 !important;
			}
			.ho12-contact__conditional {
				height: 44px;
			}
			.ho12-contact__subrow {
				display: grid;
				grid-template-columns: 58px minmax(0, 1fr);
				height: 22px;
				min-height: 22px;
			}
			html body #page .ho12-contact__subrow > label {
				height: 22px;
				padding: 0;
				color: var(--ho12-muted) !important;
				font-size: 10.5px;
				font-weight: 400;
				line-height: 22px;
			}
			.ho12-contact__subrow > .ho12-contact__control { min-height: 22px; }
			html body #page .ho12-contact__subrow input {
				height: 22px;
				min-height: 22px;
				padding: 0;
				font-size: 10.5px;
				line-height: 22px;
			}
            .ho12-contact__question {
                display: none;
                position: absolute;
				left: var(--ho12-contact-question-x, calc(50% - var(--ho12-contact-question-shift, 50px)));
				top: var(--ho12-contact-question-y, 50%);
				width: 18px;
				height: 18px;
                transform: translate(-50%, -50%);
				cursor: pointer;
                z-index: 3;
            }
            .ho12-contact__question img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
.ho12-contact__question-tip {
    position: absolute;
    left: calc(100% + 7px);
    top: 50%;
    transform: translateY(-50%);
    min-width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #aaa6a3;
    font-size: 11px;
                line-height: 1.2;
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                z-index: 10;
            }
            .ho12-contact__question:hover .ho12-contact__question-tip,
            .ho12-contact__question:focus .ho12-contact__question-tip {
                opacity: 1;
                visibility: visible;
            }
            .ho12-contact__row.is-invalid > .ho12-contact__control > .ho12-contact__question,
			.ho12-contact__subrow.is-invalid > .ho12-contact__control > .ho12-contact__question { display: block; }
            html body #page .ho12-contact__row.is-invalid > .ho12-contact__control > input,
            html body #page .ho12-contact__row.is-invalid > .ho12-contact__control > select,
            html body #page .ho12-contact__row.is-invalid > .ho12-contact__control > textarea,
			html body #page .ho12-contact__subrow.is-invalid > .ho12-contact__control > input { color: transparent !important; }
			html body #page .ho12-contact__row.is-invalid .ho12-contact__select-trigger { color: transparent !important; }
            .ho12-contact__row.is-invalid .ho12-contact__select-arrow { visibility: visible; }
			.ho12-contact__row--message.has-conditional > .ho12-contact__message-control > .ho12-contact__question {
				top: var(--ho12-contact-question-y, 50%);
			}
            .ho12-contact__conditional[hidden] { display: none !important; }
	.ho12-contact__submit {
		display: block;
		position: relative;
		width: 34px;
		height: 34px;
		margin: 8px 0 0 auto;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		transform: none !important;
		cursor: pointer;
	}
	.ho12-contact__submit:hover,
	.ho12-contact__submit:focus,
	.ho12-contact__submit:active {
		background: transparent !important;
		box-shadow: none !important;
		transform: none !important;
	}
	.ho12-contact__submit img {
		display: block;
		width: 100%;
		height: auto;
		opacity: .42;
		filter: none;
		transform: none !important;
	}
	.ho12-contact__submit::after {
		content: '전송';
		position: absolute;
		top: calc(100% + 2px);
		right: 0;
		color: var(--ho12-muted);
		font-size: 10px;
		line-height: 1;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	.ho12-contact__submit:hover::after,
	.ho12-contact__submit:focus-visible::after {
		opacity: 1;
		visibility: visible;
	}
	html body #page .ho12-contact__row:not(.is-invalid):is(:hover, :focus-within) label,
	html body #page .ho12-contact__row:not(.is-invalid):is(:hover, :focus-within) :is(input, select, textarea) {
		color: var(--ho12-muted, #9b9b9b) !important;
	}
	html body #page .ho12-contact__row:not(.is-invalid):is(:hover, :focus-within) .ho12-contact__subrow.is-invalid input {
		color: transparent !important;
	}
            .ho12-contact__success {
                position: fixed;
                z-index: 2147483646;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: transparent;
                pointer-events: auto;
                outline: none;
            }
            .ho12-contact__success img {
                position: relative;
                z-index: 1;
                display: block;
                margin: auto;
                width: min(238px, 100%);
                height: auto;
            }
            html body .ho12-contact__success .ho12-contact-success-box {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .ho12-contact__history {
                width: min(100%, 300px);
                margin: 72px auto 0;
            }
            .ho12-contact__history h2 {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                padding: 0;
                overflow: hidden;
                clip: rect(0 0 0 0);
                clip-path: inset(50%);
                border: 0;
                white-space: nowrap;
            }
            .ho12-contact__history-loading,
            .ho12-contact__history-empty {
                margin: 0;
                color: var(--ho12-soft);
                font-size: 10.5px;
                text-align: center;
            }
            .ho12-contact__history-list {
                display: flex;
                flex-direction: column;
                gap: 18px;
                width: 100%;
            }
            .ho12-contact__item {
                width: 100%;
                margin: 0;
                padding: 0;
                border: 0 !important;
                background: transparent !important;
                box-shadow: none !important;
            }
            html body #page .ho12-contact__item-button {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) 18px !important;
                grid-template-areas:
                    "date status"
                    "subject status" !important;
                gap: 2px 10px !important;
                align-items: center !important;
                width: 100% !important;
                min-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 0 !important;
                border-radius: 0 !important;
                outline-offset: 3px;
                background: transparent !important;
                box-shadow: none !important;
                color: var(--ho12-muted) !important;
                font: inherit !important;
                text-align: left !important;
                transform: none !important;
                appearance: none;
                cursor: pointer;
            }
            html body #page .ho12-contact__item-button:is(:hover, :focus-visible) {
                background: transparent !important;
                box-shadow: none !important;
                color: #111 !important;
                transform: none !important;
            }
            .ho12-contact__item-date {
                grid-area: date;
                min-width: 0;
                color: inherit;
                font-size: 10.5px;
                font-weight: 400;
                line-height: 1.35;
            }
            .ho12-contact__item-subject {
                grid-area: subject;
                min-width: 0;
                overflow-wrap: anywhere;
                color: inherit;
                font-size: 10.5px;
                font-weight: 400;
                line-height: 1.45;
            }
            .ho12-contact__item-status {
                display: block;
                grid-area: status;
                width: 14px;
                height: 14px;
                justify-self: end;
                object-fit: contain;
                opacity: .5;
                filter: grayscale(1);
                transition: opacity .16s ease, filter .16s ease;
            }
            .ho12-contact__item-status.is-empty { visibility: hidden; }
            .ho12-contact__item-status.is-arrived {
                opacity: 1;
                filter: none;
            }
            .ho12-contact__item-detail {
                display: none;
                width: 100%;
                padding: 9px 28px 2px 0;
                color: var(--ho12-muted);
                font-size: 10.5px;
                font-weight: 400;
                line-height: 1.65;
            }
            html body #page .ho12-contact .ho12-contact__item-detail,
            html body #page .ho12-contact .ho12-contact__question-text,
            html body #page .ho12-contact .ho12-contact__meta,
            html body #page .ho12-contact .ho12-contact__meta * {
                color: var(--ho12-muted) !important;
            }
            .ho12-contact__item.is-open .ho12-contact__item-detail { display: block; }
            .ho12-contact__meta {
                display: grid;
                grid-template-columns: 58px minmax(0, 1fr);
                gap: 1px 6px;
                margin: 0 0 5px;
            }
            .ho12-contact__meta dt,
            .ho12-contact__meta dd { margin: 0; }
            .ho12-contact__question-text {
                margin: 0;
                white-space: pre-wrap;
            }
            .ho12-contact__detail-label {
                font-weight: 600;
            }
            .ho12-contact__reply {
                margin-top: 10px;
                padding: 0;
                border: 0;
                color: var(--ho12-yellow) !important;
                white-space: pre-wrap;
            }
            html body #page .ho12-contact .ho12-contact__reply,
            html body #page .ho12-contact .ho12-contact__reply * {
                color: var(--ho12-yellow) !important;
            }
            .ho12-contact__reply-time {
                display: none;
            }
            @media (max-width: 700px) {
                .ho12-contact { padding-inline: 16px; }
				.ho12-contact__row { grid-template-columns: 72px minmax(0, 228px); }
                .ho12-contact__history { margin-top: 58px; }
                .ho12-contact__item-detail { padding-right: 24px; }
            }