@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp");

* {
    font-family: 'Noto Sans KR', sans-serif;
    box-sizing: border-box;
}

:root {
    --main: #0088FF;
    --sub: #FF6F00;
    --star-color: #FFC300;
    --dark-gray: #707070;
    --gray: #C2C2C2;
}

html, body {
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

/*a태그 리셋*/
a {
    text-decoration: none;
    outline: none;
    color: inherit;
}

a:hover, a:active {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

textarea {
    resize: none;
}

/*이미지 사이즈*/
img {
    max-width: 100%;
}

.material-icons-round {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
}

/* 모바일 에서 보이는 부분 */
@media (max-width: 576px) {
    .font10-12 {
        font-size: 10px;
    }
    .font10-16 {
        font-size: 10px;
    }
    .font12-14 {
        font-size: 12px;
    }
    .font12-16 {
        font-size: 12px;
    }
    .font14-16 {
        font-size: 14px;
    }
    .font14-20 {
        font-size: 14px;
    }
    .font14-18 {
        font-size: 14px;
    }
    .font16-20 {
        font-size: 16px;
    }
    .font16-24 {
        font-size: 16px;
    }
}

/* pc 에서 보이는 부분 */
@media (min-width: 576px) {
    .font10-12 {
        font-size: 12px;
    }
    .font10-16 {
        font-size: 16px;
    }
    .font12-14 {
        font-size: 14px;
    }
    .font14-16 {
        font-size: 16px;
    }
    .font14-18 {
        font-size: 18px;
    }
    .font14-20 {
        font-size: 20px;
    }
    .font16-18 {
        font-size: 18px;
    }
    .font16-20 {
        font-size: 20px;
    }
    .font16-24 {
        font-size: 24px;
    }
}

@media (max-width: 992px) {
    .vh-maxlg-10 {
        height: 10vh;
    }
    .right-gray-arrow {
        width: .7em;
        height: .5em;
        margin: 1em auto;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 30px solid #E4E4E4;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .vh-lg-100 {
        height: 100vh;
    }
    .vh-lg-10 {
        height: 10vh;
    }
    .letter-lg-spacing-1 {
        letter-spacing: -1px;
    }
    .letter-lg-spacing-2_5 {
        letter-spacing: -2.5px;
    }
    .mt-lg-_3 {
        margin-top: -3rem;
    }
    .text-lg-nowrap {
        white-space: nowrap;
    }
    .right-gray-arrow {
        width: .7em;
        height: .5em;
        border-left: 30px solid #E4E4E4;
        border-bottom: 20px solid transparent;
        border-top: 20px solid transparent;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1120px;
    }
}

@media (min-width: 1400px) {
    .vh-xxl-100 {
        height: 100vh;
    }
}

.font12 {
    font-size: 12px;
}

.font14 {
    font-size: 14px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

.rounded-100 {
    border-radius: 6.25rem;
}

.border-bottom-dark {
    border-bottom: 1px solid!important;
}

.border-primary {
    border-color: var(--main)!important;
}

.table-border-top-dark-bottom-none {
    border-top: 2px solid;
    border-bottom: 0;
}

.table-border-top-dark-bottom-none th {
    border-bottom: 0;
}

.opacity-10 {
    opacity: .1;
}

.pt-29 {
    padding-top: 29%;
}

.pt-35 {
    padding-top: 35.714%;
}

.pt-50 {
    padding-top: 50%;
}

.pt-56 {
    padding-top: 56%;
}

.pt-61 {
    padding-top: 61%;
}

.pt-66 {
    padding-top: 66%;
}

.pt-83 {
    padding-top: 83%;
}

.pt-89 {
    padding-top: 89%;
}

.pt-94 {
    padding-top: 94%;
}

.pt-100 {
    padding-top: 100%;
}

.pt-116 {
    padding-top: 116%;
}

.pt-118 {
    padding-top: 118%;
}

.pt-131 {
    padding-top: 131%;
}

.pt-140 {
    padding-top: 140%;
}

.pt-146 {
    padding-top: 146.67%;
}

.vh-50 {
    height: 50vh;
}

.vh-40 {
    height: 40vh;
}

.vh-20 {
    height: 20vh;
}

.vh-10 {
    height: 10vh;
}

.vh-5 {
    height: 5vh;
}

.w-init {
    width: initial;
}

#offcanvasHeader {
    width: 83.333%;
}

.w-2em {
    width: 2em;
}

.h-2em {
    height: 2em;
}

.h-90 {
    height: 90%;
}

.minh-15vh {
    min-height: 15vh;
}

.required::after{
    content: "*";
    color: red;
    margin-left: 0.2rem;
}

.bg-062F6E {
    background-color: #062F6E;
}

.bg-10193C {
    background-color: #10193C;
}

.bg-010B14 {
    background-color: #010B14;
}

.bg-gradient-000000-545454-to-FFFFFF {
    background: linear-gradient(rgba(255,255,255,0) 0%, rgba(84,84,84,.67) 67%, #000000 100%);
}

.bg-gradient-FFFFFF-to-ECF1F7 {
    background: linear-gradient(#FFFFFF, #ECF1F7);
}

.bg-ECF1F7 {
    background-color: #ECF1F7;
}

.bg-0D94DB {
    background-color: #0D94DB;
}

.bg-036497 {
    background-color: #036497;
}

.bg-3A5F97 {
    background-color: #3A5F97;
}

.bg-43BEFF {
    background-color: #43BEFF;
}

.bg-F3F6FF {
    background-color: #F3F6FF;
}

.bg-1A94D9 {
    background-color: #1A94D9;
}

.btn.bg-1A94D9:hover, .btn.bg-1A94D9:active, .btn.bg-1A94D9:focus {
    background-color: #1A94D9;
    opacity: 90%;
    color: white;
}

.blue-circle:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: .9em;
    height: .9em;
    top: .2em;
    left: -1.2em;
    margin-right: .2em;
    border-radius: 100rem;
    background-color: white;
    border: 6px solid #00A6FF;
}

.blue-circle {
    position: relative;
}

.white-circle-bottom-line {
    display: inline-block;
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 100rem;
    background-color: white;
    margin: 12px;
}

.white-circle-bottom-line::after {
    content: "";
    position: absolute;
    top: 7px; /* Center arrow head */
    left: 6px; /* Position at the end of the arrow line */
    width: 0;
    height: 20vh;
    border-left: 1px solid white;
}

.text-062F6E {
    color: #062F6E;
}

.text-0D94DB {
    color: #0D94DB;
}

.answer-arrow {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 0.8em;
    margin-right: 2em;
    background-color: #EEEEEE;
}

.answer-arrow::before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 0.8em;
    bottom: 0.2em;
    height: 1.5em;
    background-color: #EEEEEE;
}

.answer-arrow::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 1em;
    top: .5em;
    left: 2em;
    transform: translateY(-50%);
    border-top: 1.3em solid transparent;
    border-right: 1em solid transparent;
    border-bottom: 1.3em solid transparent;
    border-left: 2em solid #EEEEEE;
    height: 1em;
}

.bar-continuity-circle {
    position: relative;
}

.bar-continuity-circle:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: -.1em;
    top: -.5em;
    width: .1em;
    height: 3.5em;
    border-left: 1px solid #EEEEEE;
}

.bar-continuity-circle:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: -.4em;
    top: 1em;
    width: .5em;
    height: .5em;
    background-color: white;
    border-radius: 500em;
}

.textCut {
    display: -webkit-box;
    --webkit-line-clamp: 2;
    --webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.2;
    height: 2.4em;
}

.text-auto-pharse {
    word-break: auto-phrase;
}

.text-pre-wrap {
    white-space: pre-wrap;
}

.btn-deep-primary {
    background-color: #015AAA;
    color: white;
}

.btn-deep-primary:hover, .btn-deep-primary:active, .btn-primary-shadow:hover, .btn-primary-shadow:active {
    background-color: rgba(1, 90, 170, .7);
    color: white;
}

.shadow-40 {
    box-shadow: 0 0 40px 0.5rem rgba(0, 0, 0 ,.05);
}

.shadow-036 {
    box-shadow: 0 3px 6px #00000029;
}

.cursor-pointer {
    cursor: pointer;
}

.letter-spacing-1 {
    letter-spacing: -1px;
}

.filter-grayscale-100 {
    filter: grayscale(100%);
}

.filter-brightness-200 {
    filter: brightness(200%);
}

.search-btn {
    right: 1%;
}

.lg-switch {
    width: 4.5em!important;
    height: 1.6em;
    background-position: right center!important;
    background-color: #EEEEEE!important;
    border-color: #E4E4E4!important;
}

.lg-switch:checked {
    background-color: #1A94D9!important;
    border-color: #1A94D9!important;
    background-position: left center!important;
}

.lg-switch:after {
    content: 'OFF';
    margin-left: 0.5em;
    font-weight: bold;
}

.lg-switch:checked:after {
    content: 'ON';
    font-weight: bold;
    margin-left: 1.8em;
    color: white;
}

.bg-midNightBlue {
    background-color: #374760;
}

.bg-nightBlue {
    background-color: #232F3F;
}

.btn-ckeck-primary {
    display: inline-block;
    background-color: #F4F4F4;
    color: #6D6D6D;
    padding: 0.5rem 0.8rem;
    letter-spacing: -2px;
    cursor: pointer;
    border-radius: 0.8rem;
    margin-right: 0.75rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.carousel-indicators [data-bs-target] {
    width: 1em;
    height: 1em;
    border-radius: 50em;
    border: 1px solid transparent;
}

.btn-check:checked+.btn-ckeck-primary, .btn-ckeck-primary:hover{
    background-color: #0D94DB;
    color: white;
}

.btn.bg-0D94DB:hover {
    background-color: #0D94DB!important;
}

.selected-list:hover, .selected-list:active, .selected-list.active2 {
    background-color: #D4F0FF;
    color: #1A94D9;
    font-weight: bold;
}

.selected-in-menu:hover, .selected-in-menu:active, .selected-in-menu.active2, .select-filter:hover, .select-filter:active, .select-filter.active2 {
    color: #1A94D9;
    font-weight: bold;
}

.person-filter{
    filter: invert(.5) brightness(1.5);
}

#spinner {
    display: none;
    width: 3rem;
    height: 3rem;
    border: 5px solid grey;
    border-top: 5px solid var(--main);
    border-radius: 50%;
    animation: loading 1s linear infinite;
    margin: 1.5rem auto;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}