@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp-dynamic-subset.min.css");

:root {
    --color-brightest-highlight: #E0FFF9;
    --color-bright-highlight: #C5F9E9;
    --color-default-highlight: #02ce94;
    --color-dark-other-highlight: #162EAB;
    --color-other-highlight: #344ed8;
    --color-bright-other-highlight: #DEE2F6;
    --color-cytology-highlight: #912DE8;
    --color-light-cytology-highlight: #C58AF9;
    --color-bright-cytology-highlight: #f1e5fc;

    --color-almost-white: #f4f4f4;
    --color-white: #fff;

    --color-black: #000;

    --color-bright-gray: #efefef;
    --color-light-gray: #dedede;
    --color-default-gray: #ccc;
    --color-dark-gray: #808080;
    --color-darker-gray: #333;

    --color-orange: #FF4A06;
    --color-danger: #FF1D25;

    --default-font-family: "Pretendard Variable", "Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --quicksand-font-family: "Quicksand", sans-serif;
    --source-code-font-family: "Source Code Pro", monospace;
    --roboto-slab-font-family: "Roboto Slab", serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    /* letter-spacing: -0.1px; */
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: var(--default-font-family);
    font-size: 1rem;
    font-weight: 400;
    font-optical-sizing: auto;
    background: var(--color-almost-white);
}

.quicksand {
    font-family: var(--quicksand-font-family);
}

.sourcecode {
    font-family: var(--source-code-font-family);
}

textarea {
    border-radius: 0;
}

input,
select,
textarea,
button {
    font-family: var(--default-font-family);
    font-size: 1rem;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

input[type="text"],
input[type="password"],
input[type="number"] {
    border: none;
    border-bottom: 1px solid #b3b3b3;
    border-radius: 0;
    color: var(--color-default-highlight);
    background: transparent;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus {
    border-color: var(--color-default-highlight);
}

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled {
    -webkit-text-fill-color: #ccc;
    opacity: 1;
    background: transparent;
    color: #ccc !important;
    border-color: #bbb;
    cursor: not-allowed;
}

input:required {
    -webkit-box-shadow: none;
    box-shadow: none;
}

input:invalid {
    -webkit-box-shadow: none;
    box-shadow: none;
}

input::placeholder {
    color: #ccc;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(0, 0, 0);
    /* fallback */
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.imgClose {
    position: fixed;
    top: 8px;
    right: 8px;
    width: 72px;
    z-index: 20;
    cursor: pointer;
}

.imgCloseForNotice {
    position: fixed;
    top: 8px;
    right: 8px;
    width: 72px;
    z-index: 20;
    cursor: pointer;
}

.divModalWrap {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 90vw;
    max-width: 1024px;
    height: 90vh;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    z-index: 99;
}

.iframeModal {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: perspective(0) translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
}

/* #loading {
    display: none;
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 92px;
    height: 92px;
    border: 8px solid #c5f9e9;
    border-radius: 50%;
    border-top-color: var(--color-default-highlight);
    animation: loadingSpin 1s ease-in-out infinite;
    z-index: 999;
}

@keyframes loadingSpin {
    from {
        transform: translate(50%, 50%) rotate(0deg);
    }

    to {
        transform: translate(50%, 50%) rotate(360deg);
    }
} */


/* #loading {
    display: none;
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    padding: 0.6rem;
    width: 6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-default-highlight);
    -webkit-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
    mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: loadingAnimation 1s infinite linear;
    z-index: 999;
}

@keyframes loadingAnimation {
    to {
        transform: translate(50%, 50%) rotate(1turn)
    }
} */

#loading {
    display: none;
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%) scale(0.8);
    padding: 0;
    width: 6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: url("/img/logo_square_aniscan.jpg") no-repeat center center;
    background-size: cover;
    animation: loadingAnimation 0.6s ease infinite;
    z-index: 999;
}

@keyframes loadingAnimation {
    0% {
        transform: translate(50%, 50%) scale(0.8);
        opacity: 0;
    }

    0% {
        transform: translate(50%, 50%) scale(1);
        opacity: 0.65;
    }

    100% {
        transform: translate(50%, 50%) scale(1.2);
        opacity: 0;
    }
}

.hide {
    display: none !important;
}

/* 엘리먼트 토글 시작 */
.toggle {
    overflow: hidden;
    transition: all 0.4s ease;
    max-height: 75rem;
}

.toggle.collapsed {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*-- 엘리먼트 토글 끝 */


/* 플로팅 메뉴 시작 */
#divFloatingMenuWrap {
    position: fixed;
    right: 2rem;
    bottom: 3rem;
    z-index: 2;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

/* 플로팅 메뉴 끝 */

/* 카카오 채널 채팅 시작 */
#divKakaoChatWrap {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    background: #FDDC3F;
    border-radius: 100px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    user-select: none;
    transition: all .4s linear;
}

#divKakaoChatWrap .divImage {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('/img/banner/img_kakao.png') no-repeat center center;
    background-size: 70% auto;
    border-radius: 50%;
    vertical-align: middle;
    animation-duration: 2.4s;
    animation-name: kakao_bounce;
    animation-iteration-count: infinite;
}

#divKakaoChatWrap span {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 18px 0 2px;
    transition: all .4s linear;
}

#divKakaoChatWrap:hover {
    background: #ffcc33;
}

#divKakaoChatWrap:hover span {
    color: #333;
}

@keyframes kakao_bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    4% {
        transform: translateY(4px);
    }

    8% {
        transform: translateY(-4px);
    }

    12% {
        transform: translateY(3px);
    }

    18% {
        transform: translateY(-3px);
    }

    24% {
        transform: translateY(2px);
    }

    32% {
        transform: translateY(-2px);
    }

    40% {
        transform: translateY(0);
    }
}

/* 카카오 채널 채팅 끝 */


#divInterviewVideoWrap {
    display: block;
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    width: 90%;
    max-width: 1400px;
    margin: 0;
}

#divInterviewVideoWrap::after {
    display: block;
    content: "";
    width: 100%;
    aspect-ratio: 16 / 9;
}

#divInterviewVideoWrap>.iframeInterviewVideo {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* 인터뷰 관련 끝 */

.divNoticeModalFrame {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    max-width: 90vw;
    max-height: 80vh;
    width: 480px;
    height: 608px;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    z-index: 99;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.26);
}

.divNoticeModalFrame>.iframeNoticeModal {
    display: block;
    width: 100%;
    height: 100%;
}

.divIEWarningOverlay {
    z-index: 999999999999999;
}

.divIEWarningBox {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    padding: 32px;
    background: #fff;
    z-index: 9999999999999999;
}

.divIEWarningBox>h1 {
    padding: 0;
    margin: 0;
    font-size: 18px;
    color: #f02525;
}

.divIEWarningBox>.divCloseBox {
    margin: 12px 0 0 0;
    font-size: 14px;
    color: #333;
}

.divIEWarningBox>.divCloseBox>input[type="checkbox"] {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
}

.divIEWarningBox>.divCloseBox>span {
    vertical-align: middle;
}

.divIEWarningBox>.divCloseBox>label {
    vertical-align: middle;
}

.divIEWarningBox>.divCloseBox>a {
    vertical-align: middle;
    text-decoration: none;
    color: #333;
}

.divIEWarningBox>.divCloseBox>a:hover {
    text-decoration: underline;
}


/* Air Datepicker 오버라이드 시작 */
.air-datepicker {
    /* --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
    --adp-font-family: var(--default-font-family);
    --adp-font-size: 0.875rem;
    --adp-width: 246px;
    --adp-z-index: 100;
    --adp-padding: 4px;
    --adp-grid-areas: "nav" "body" "timepicker" "buttons";
    --adp-transition-duration: .3s;
    --adp-transition-ease:
        ease-out;
    --adp-transition-offset: 8px;
    --adp-background-color: #fff;
    --adp-background-color-hover: #f0f0f0;
    --adp-background-color-active: #eaeaea;
    --adp-background-color-in-range: rgba(92, 196, 239, .1);
    --adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
    --adp-background-color-selected-other-month-focused: #8ad5f4;
    --adp-background-color-selected-other-month: #a2ddf6;
    --adp-color: #4a4a4a;
    --adp-color-secondary: #9c9c9c;
    --adp-accent-color: #4eb5e6;
    --adp-color-current-date: var(--adp-accent-color);
    --adp-color-other-month: #dedede;
    --adp-color-disabled: #aeaeae;
    --adp-color-disabled-in-range: #939393;
    --adp-color-other-month-hover: #c5c5c5;
    --adp-border-color: #dbdbdb;
    --adp-border-color-inner: #efefef;
    --adp-border-radius: 4px;
    --adp-border-color-inline: #d7d7d7;
    --adp-nav-height: 32px;
    --adp-nav-arrow-color: var(--adp-color-secondary);
    --adp-nav-action-size: 32px;
    --adp-nav-color-secondary: var(--adp-color-secondary);
    /* --adp-day-name-color: #ff9a19; */
    --adp-day-name-color: var(--color-other-highlight);
    --adp-day-name-color-hover: #8ad5f4;
    --adp-day-cell-width: 1fr;
    --adp-day-cell-height: 32px;
    --adp-month-cell-height: 42px;
    --adp-year-cell-height: 56px;
    --adp-pointer-size: 10px;
    --adp-poiner-border-radius: 2px;
    --adp-pointer-offset: 14px;
    --adp-cell-border-radius: 4px;
    --adp-cell-background-color-hover: var(--adp-background-color-hover);
    /* --adp-cell-background-color-selected: #5cc4ef; */
    --adp-cell-background-color-selected: var(--color-default-highlight);
    /* --adp-cell-background-color-selected-hover: #45bced; */
    --adp-cell-background-color-selected-hover: var(--color-default-highlight);
    --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);
    --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);
    --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
    --adp-btn-height: 32px;
    /* --adp-btn-color: var(--adp-accent-color); */
    --adp-btn-color: var(--color-other-highlight);
    --adp-btn-color-hover: var(--adp-color);
    --adp-btn-border-radius: var(--adp-border-radius);
    --adp-btn-background-color-hover: var(--adp-background-color-hover);
    --adp-btn-background-color-active: var(--adp-background-color-active);
    --adp-time-track-height: 1px;
    --adp-time-track-color: #dedede;
    --adp-time-track-color-hover: #b1b1b1;
    --adp-time-thumb-size: 12px;
    --adp-time-padding-inner: 10px;
    --adp-time-day-period-color: var(--adp-color-secondary);
    --adp-mobile-font-size: 1rem;
    --adp-mobile-nav-height: 40px;
    --adp-mobile-width: 320px;
    --adp-mobile-day-cell-height: 38px;
    --adp-mobile-month-cell-height: 48px;
    --adp-mobile-year-cell-height: 64px;
}

/*-- Air Datepicker 오버라이드 끝 */



/* Tippy.js 시작 */
.tippy-box[data-theme~="aniscan"] {
    background-color: var(--color-darker-gray);
    color: var(--color-white);
}

.tippy-box[data-theme~="aniscan"][data-placement^="top"]>.tippy-arrow::before {
    border-top-color: var(--color-darker-gray);
}

.tippy-box[data-theme~="aniscan"][data-placement^="bottom"]>.tippy-arrow::before {
    border-bottom-color: var(--color-darker-gray);
}

.tippy-box[data-theme~="aniscan"][data-placement^="left"]>.tippy-arrow::before {
    border-left-color: var(--color-darker-gray);
}

.tippy-box[data-theme~="aniscan"][data-placement^="right"]>.tippy-arrow::before {
    border-right-color: var(--color-darker-gray);
}

/* Tippy.js 끝 */


/* Choices.js 커스텀 스타일 */
.choices {
    margin-bottom: 0;
}

.choices__inner {
    background-color: var(--color-white);
    padding: 0.6rem;
    border: 1px solid var(--color-light-gray);
    font-size: 1rem;
    min-height: auto;

    border-radius: 0.4rem;
}

.is-open .choices__inner {
    border-radius: 0.4rem 0.4rem 0 0;
}

.choices__list--single {
    padding: 0 1rem 0 0;
}

/*-- Choices.js 커스텀 스타일 끝 */


/* 공용 푸터 (사업자 정보) 시작 */
.divCommonFooterWrap {
    border-top: 1px solid var(--color-light-gray);
    text-align: center;
    font-size: 0.725rem;
    font-weight: 400;
    color: var(--color-dark-gray);
    padding: 1.6rem 1rem;
    line-height: 140%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.4rem;
}

.divCommonFooterWrap>.divInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.divCommonFooterWrap>.divInfo>.divItem {
    flex-shrink: 0;
}

/*-- 공용 푸터 (사업자 정보) 끝 */



@media screen and (max-width: 560px) {
    html {
        font-size: calc(100vw * 20 / 560);
    }

    .divModalWrap {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .iframeModal {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .imgClose {
        width: 32px;
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -o-filter: invert(1);
        -ms-filter: invert(1);
        filter: invert(1);
        z-index: 9999 !important;
    }

    .imgCloseForNotice {
        display: none;
    }

    #divFloatingMenuWrap {
        right: 1.2rem;
        bottom: 2rem;
    }

    /* 카카오 채널 채팅 시작 */
    #divKakaoChatWrap {
        left: 16px;
        bottom: 16px;
    }

    /* 카카오 채널 채팅 끝 */

    /* 인터뷰 관련 모바일에서 숨기기 */
    #divInterviewIconWrap {
        display: none;
    }
}