@charset "utf-8";

/*
 * File    : sub-support.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * FLOATING CONTACT
 * 고객의 소리
 * 이메일 무단수집 거부
 * HOVER
 */



/* **************************************** *
 * FLOATING CONTACT
 * **************************************** */
.floating-contact { position: fixed; bottom: 52rem; right: 52rem; z-index: 200; transition: opacity .3s, visibility .3s; }
.floating-contact.floating-contact--fixBottom { position: absolute; bottom: 0; }
.floating-contact__box { position: relative; background: var(--color-point-02); border-radius: var(--round-01); padding: 20rem; margin-bottom: 16rem; }
.floating-contact__box:after { content: ''; display: block; width: 10rem; height: 10rem; background: var(--color-point-02); position: absolute; bottom: 0; right: 24rem; transform: translateY(50%) rotate(45deg); }
.floating-contact__figure { width: 60rem; height: 60rem; margin-right: 0; margin-left: auto; border-radius: 50%; }

.floating-contact__tel { display: block; color: var(--color-black); }
.floating-contact__time { display: block; margin-top: 4rem; }
.floating-contact__txt { margin-top: 8rem; color: var(--color-gray-800); }
.floating-contact__link { display: inline-block; margin-top: 8rem; border-bottom: 1px solid var(--color-black); color: var(--color-black); }



/* **************************************** *
 * 고객의 소리
 * **************************************** */
/* 팝업 */
.jt-form-layer { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; background-color: rgba(27, 27, 27, 0.8); z-index: 9999; }

.jt-form-layer__container { display: flex; align-items: center; width: 100%; height: 100%;; position: absolute; left: 0; top: 0; text-align: center; }
.jt-form-layer__content { position: relative; display: inline-block; vertical-align: middle; width: 480rem; text-align: center; height: fit-content; margin: 0 auto; padding: 60rem 40rem; background: var(--color-point-02); border-radius: var(--round-05); }
.jt-form-layer__content figure { width: 120rem; height: 120rem; border-radius: 50%; margin: 0 auto 40rem; overflow: hidden; }
.jt-form-layer__content figure img { display: block; width: 100%; }
.jt-form-layer__content p { margin-top: 16rem; color: var(--color-gray-800); }
.jt-form-layer__content p > span { display: block; }
.jt-form-layer__actions { display: inline-flex; flex-wrap: nowrap; margin-top: 40rem; }

.jt-form-layer__close { width: 36rem; height: 36rem; margin: 0; padding: 0; position: absolute; top: 30rem; right: 30rem; background: transparent; border: none; outline: none; cursor: pointer; }
.jt-form-layer__close .jt-icon { width: 16rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }

.jt-form-layer--fail b { color: var(--color-quinary); }



/* **************************************** *
 * 이메일 무단수집 거부
 * **************************************** */
.email-security__desc { margin-top: 16rem; color: var(--color-gray-800); }
.email-security__rule-box { margin: 40rem 0; padding: 40rem; border-radius: var(--round-02); background: var(--color-gray-200); }
.email-security__rule-list { margin-top: 16rem; display: flex; flex-direction: column; gap: 8rem; }
.email-security__rule-list li { padding-left: 12rem; position: relative; color: var(--color-gray-800); }
.email-security__rule-list li::before { content: ''; display: block; width: 4rem; height: 4rem; position: absolute; top: 11rem; left: 0; background: var(--color-gray-800); border-radius: 50%; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* FLOATING CONTACT */
    .floating-contact__link:hover { border-bottom-style: dashed; }

}