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

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

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

.font14 {
    font-size: 14px;
}

.font18 {
    font-size: 18px;
}

.font20 {
    font-size: 20px;
}

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

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

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

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

.object-position-63-50 {
    object-position: 63% 50%;
}

.vh-50 {
    height: 50vh;
}

.vh-20 {
    height: 20vh;
}

.vh-10 {
    height: 10vh;
}

.vh-5 {
    height: 5vh;
}

.w-90 {
    width: 90%;
}

.h-90 {
    height: 90%;
}

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

.arrow-dash-line {
    width: 60%;
    height: 2px;
    border-top: 2px dashed #CECECE;
}

.arrow-dash-line-right-top {
    width: 70%;
    transform: rotate(-45deg) translate(3px, -7px);
}

.arrow-dash-line-right-bottom {
    width: 70%;
    transform: rotate(45deg) translate(3px, 5px);
}

.arrow-dash-line-right {
    width: 60%;
    transform: translateY(-1px);
}

.arrow {
    display: inline-block;
    width: 10%;
    height: 2px;
    background: linear-gradient(90deg, #CECECE 20%, transparent 20%) repeat-x, linear-gradient(0deg, #CECECE 20%, transparent 20%) repeat-y;
    background-size: 5px 20px;
    margin: 2em 0;
}

.arrow::after {
    content: "";
    position: absolute;
    top: -4px; /* Center arrow head */
    right: -6px; /* Position at the end of the arrow line */
    width: 0;
    height: 0;
    border-left: 10px solid #CECECE;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
.arrow--left {
    transform: rotate(-180deg);
}
.arrow--right-top {
    transform: rotate(-45deg);
}
.arrow--right {
    transform: rotate(0deg);
}
.arrow--top {
    transform: rotate(-90deg);
}
.arrow--right-bottom {
    transform: rotate(45deg);
}
.arrow--bottom {
    transform: rotate(90deg);
}

.blue-circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 100rem;
    background-color: #0D94DB;
    margin: 12px;
}

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

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

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

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

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

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

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

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