@charset "UTF-8";

.visual-area {
    position: relative;
    overflow: hidden;
    background: #eceff5;
}

.visual-area::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translateX(-50%) translateY(0%);
    width: 100.1%;
    height: 100%;
    background: transparent url(../img/content/main_visual.webp) no-repeat center top / cover;
}

@media (min-width: 1921px) {
    .visual-area::before {
        width: 100%;
        background-size: contain;
    }
}

.visual-area .inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 530px;
}

.visual-tit {
    position: relative;
    display: inline-block;
    top: 12rem;
    padding-left: 8rem;
    height: fit-content;
}

.visual-tit .tit {
    color: var(--color-gray-80);
    font-size: var(--pc-font-size-display-medium);
    padding-bottom: var(--padding-8);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    font-size: 3.9rem;
    line-height: 1;
    text-shadow: 0px 2px 5px rgba(255, 255, 255, 1);
    letter-spacing: -2px;
}

.visual-tit .tit span {
    color: #0E47BB;
    font-weight: var(--font-weight-bold);
    font-size: 4.1rem;
}

.visual-tit .tit span:first-child {
    color: #40929B;
}

.visual-tit .tit span:last-child {
    color: #0E47BB;
    font-weight: var(--font-weight-regular);
    font-size: 3.7rem;
}

.visual-tit p {
    color: var(--light-color-text-basic);
    font-size: var(--pc-font-size-body-medium);
}

.visual-tit p span {
    font-weight: var(--font-weight-bold);
}

.visual-tit p br.inline {
    display: contents;
}

@media (max-width: 1279px) {
    .visual-tit .tit {
        font-size: var(--pc-font-size-heading-xlarge);
        padding-bottom: var(--padding-4);
    }
}

@media (max-width: 1023px) {
    .visual-area::before {
        left: -10%;
        top: 0%;
        transform: translateX(0%) translateY(0%);
        width: 130%;
        height: 38rem;
    }

    .visual-area .inner {
        flex-direction: column;
        justify-content: flex-start;
        height: 38rem;
        gap: var(--gap-7);
    }

    .visual-tit {
        top: 4.8rem;
        padding-left: var(--padding-4);
    }

    .visual-tit .tit {
        font-size: var(--pc-font-size-heading-large);
        padding-bottom: var(--padding-4);
    }

    .visual-tit .tit span {
        font-size: var(--pc-font-size-heading-large);
    }

    .visual-tit .tit span:last-child {
        font-size: var(--pc-font-size-heading-large);
    }

}

@media (max-width: 767px) {
    .application-area .inner {
        padding: 0;
    }

    .visual-area .inner {
        height: 36rem;
    }

    .visual-area::before {
        width: 170%;
        left: -35%;
        top: 0%;
        transform: translateX(0%) translateY(0%);
        background: transparent url(../img/content/main_visual.webp) no-repeat center top / contain;
        background-color: #eceff5;
    }

    .visual-tit {
        top: 3.6rem;
        padding-left: 0;
    }

    .visual-tit p br.inline {
        display: block;
    }
}

@media (max-width: 560px) {
    .visual-area .inner {
        height: 34rem;
    }

    .visual-area::before {
        width: 180%;
        left: -40%;
    }

    .visual-tit {
        top: 2.4rem;
    }

    .visual-tit .tit {
        font-size: 2.8rem;
        padding-bottom: var(--padding-4);
    }

    .visual-tit .tit span,
    .visual-tit .tit span:last-child {
        font-size: 2.8rem;
    }
}

@media (max-width: 480px) {
    .visual-area .inner {
        height: 32rem;
    }

    .visual-tit .tit {
        font-size: var(--pc-font-size-heading-medium);
        padding-bottom: var(--padding-4);
    }

    .visual-tit .tit span,
    .visual-tit .tit span:last-child {
        font-size: var(--pc-font-size-heading-medium);
    }

}

@media (max-width: 440px) {
    .visual-area .inner {
        height: 30.6rem;
    }

    .visual-area::before {
        width: 230%;
        left: -65%;
    }

    .application-area {
        margin-top: 0;
    }

    .visual-tit p {
        font-size: var(--pc-font-size-body-xsmall);
    }
}


.application-area {
    position: relative;
    color: var(--light-color-text-basic-inverse);
    margin-top: -11rem;
}

.application-wrap {
    max-width: 120rem;
    margin: 0 auto;
    background-color: #2E4BBA;
    border-radius: 2.4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--padding-6) var(--padding-8) var(--padding-8);
    gap: var(--number-17);
}

.application-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    width: calc(100% / 3);
}

.application-list::after {
    content: "";
    display: block;
    position: absolute;
    width: 4rem;
    height: 4em;
    right: -4.8rem;
    top: 50%;
    background: url(../img/content/main_application_list08.svg) center top no-repeat;
}

@media (max-width: 1200px) {
    .application-wrap {
        gap: var(--number-10);
    }

    .application-list::after {
        top: 0;
        right: -2.8rem;
        width: 2.8rem;
        height: 2.8em;
        background-size: contain;
    }
}

.application-list:last-child:after {
    background: none;
}

.application-list ol::before,
.application-list ol::after {
    border-radius: inherit;
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 1.6rem;
}

.application-list ol::before {
    border: 1px solid #fff;
    mask-image: linear-gradient(160deg, hsl(0, 0%, 100%), hsla(0, 0%, 100%, 0%)10%, hsla(0, 0%, 100%, 0)40%, hsla(0, 0%, 100%, 0)43%, hsla(0, 0%, 100%, 0)60%, hsla(0, 0%, 100%, 20%)100%);
}

.application-list ol::after {
    border: 1px solid #979FEE;
    mask-image: linear-gradient(160deg, hsla(0, 0%, 100%, 0), hsl(0, 0%, 70%)10%, hsla(0, 0%, 100%, 0)40%, hsla(0, 0%, 100%, 0)43%, hsla(0, 0%, 100%, 50%)60%);
}

.application-list h3 {
    font-size: var(--pc-font-size-heading-small);
    padding-left: var(--padding-8);
}

.application-list h3 span {
    font-weight: var(--font-weight-regular);
    color: #B4FFFA;
}
.application-list h3 br {
    display: contents;
}
.application-list ol {
    background: rgba(216, 229, 253, 0.15);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: var(--gap-5);
    padding: var(--padding-7) var(--padding-6) var(--padding-6);
    flex: 1;
    box-sizing: border-box;
    border-radius: 1.6rem;
}

@media (max-width: 1023px) {
    .application-list.active ol {
        padding: 6.2rem var(--padding-6) var(--padding-6);
    }
}

.application-list:last-child:after {
    background: none;
}

.application-list li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-4);
    width: 100%;
}
.application-list li strong {
    font-size: var(--pc-font-size-heading-xsmall);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #0B1968;
    border-radius: 10rem;
    height: 5rem;
    width: 100%;
}
.application-list li a {
    width: 100%;
}
.application-list li a:hover strong {
    background-color: #46B9FF;
    color: #000;
    transition: 0.3s ease-in-out;
}
.application-list li strong::before,
.application-list li strong::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 10rem;
    bottom: 0;
    width: 100%;
    height: 5rem;
}

.application-list li strong::before {
    border: 1px solid #fff;
    mask-image: linear-gradient(160deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0%)10%, hsla(0, 0%, 100%, 0)40%, hsla(0, 0%, 100%, 0)43%, hsla(0, 0%, 100%, 0)60%, hsla(0, 0%, 100%, 20%)100%);
}

.application-list li strong::after {
    border: 1px solid #979FEE;
    mask-image: linear-gradient(160deg, hsla(0, 0%, 100%, 100%), hsl(0, 0%, 70%)10%, hsla(0, 0%, 100%, 0)40%, hsla(0, 0%, 100%, 0)43%, hsla(0, 0%, 100%, 50%)60%);
}

.application-list li::before {
    content: "";
    display: block;
    position: relative;
    width: 5.6rem;
    height: 5.6rem;
    top: 0;
}

.application-list:nth-child(1) li:nth-child(1)::before {
    background: url(../img/content/main_application_list01.svg) center top no-repeat;
}

.application-list:nth-child(1) li:nth-child(2)::before {
    background: url(../img/content/main_application_list02.svg) center top no-repeat;
}

.application-list:nth-child(2) li:nth-child(1)::before {
    background: url(../img/content/main_application_list03.svg) center top no-repeat;
}

.application-list:nth-child(2) li:nth-child(2)::before {
    background: url(../img/content/main_application_list04.svg) center top no-repeat;
}

.application-list:nth-child(3) li:nth-child(1)::before {
    background: url(../img/content/main_application_list05.svg) center top no-repeat;
}

.application-list:nth-child(3) li:nth-child(2)::before {
    background: url(../img/content/main_application_list06.svg) center top no-repeat;
}

.application-list li div {
    display: none;
}

.application-list.active li div {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding-top: 2px;
    right: -12px;    
    bottom: 4px;
    font-size: 2.4rem;
    color: #0B1968;
    width: 4.2rem;
    height: 4.2rem;
    background: url(../img/content/main_application_list07.svg) no-repeat;
    font-weight: var(--font-weight-bold);
}

.application-list.active li div span {
    font-size: 1.2rem;
    font-weight: var(--font-weight-regular);
}

@media (max-width: 1023px) {
    .application-list li {
        gap: var(--gap-3);
    }

    .application-list li::before {
        width: 4.2rem;
        height: 4.2rem;
        background-size: contain !important;
    }

    .application-list.active:nth-child(1) li:nth-child(1)::before,
    .application-list.active:nth-child(1) li:nth-child(2)::before,
    .application-list.active:nth-child(2) li:nth-child(1)::before,
    .application-list.active:nth-child(2) li:nth-child(2)::before,
    .application-list.active:nth-child(3) li:nth-child(1)::before,
    .application-list.active:nth-child(3) li:nth-child(2)::before {
        background: none;
        height: 0;
    }

    .application-list.active li div {
        bottom: 5.8rem;
        left: calc(50% - 2.1rem);
        right: inherit;
    }
}

@media (max-width: 767px) {

    .application-wrap {
        border-radius: 0;
        gap: var(--number-8);
    }

    .application-list h3 {
        font-size: var(--pc-font-size-heading-xsmall);
        padding-left: var(--padding-4);
    }

    .application-list ol {
        gap: var(--gap-3);
        padding: var(--padding-7) var(--padding-3) var(--padding-3);
    }

    .application-list.active ol {
        padding: 6.2rem var(--padding-3) var(--padding-3);
    }

    .application-list li strong {
        font-size: var(--pc-font-size-heading-xxsmall);
        height: 4rem;
    }

    .application-list li strong::before,
    .application-list li strong::after {
        height: 4rem;
    }

    .application-list.active li div {
        bottom: 4.8rem;
    }

    .application-list::after {
        top: .4rem;
        right: -1.6rem;
        width: 1.6rem;
        height: 1.6em;
        background-size: contain;
    }
}

@media (max-width: 560px) {
    .application-list h3 {
        font-size: var(--pc-font-size-heading-xxsmall);
    }

    .application-list li strong {
        font-size: var(--pc-font-size-body-xsmall);
    }
}

@media (max-width: 480px) {
    .application-wrap {
        flex-direction: column;
        padding: var(--padding-6);
        gap: var(--gap-4);
    }

    .application-list ol {
        width: 100%;
        gap: var(--gap-5);
        padding: var(--padding-3);
        border-radius: var(--radius-large1);
    }

    .application-list.active ol {
        padding: var(--padding-3);
    }

    .application-list ol::before,
    .application-list ol::after {
        border-radius: var(--radius-large1);
    }

    .application-list {
        width: 100%;
        flex-direction: row;
        align-items: center;
    }
    .application-list h3 {
        padding-left: 0;
    }
    .application-list h3 br {
        display: block;
    }
    .application-list::after {
        background: none;
    }

    .application-list li::before {
        min-height: 3.2rem;
        min-width: 3.2rem;
        top: 4px;
    }

    .application-list li {
        display: inline-flex;
        flex-direction: row-reverse;
    }

    .application-list li strong,
    .application-list li strong::before,
    .application-list li strong::after {
        border: 0;
        height: 3.2rem;
    }

    .application-list.active li div {
        width: 3.6rem;
        height: 3.6rem;
        background-size: contain;
        bottom: -2px;
        right: 0;
        left: inherit;
        font-size: var(--pc-font-size-body-medium);
        padding-top: 5px;
    }

}

/* 공지사항 자료실 */
.main-sect01 {
    padding: var(--padding-10) 0;
}

@media (max-width: 767px) {
    .main-sect01 {
        padding: var(--padding-8) 0;
    }
}

.main-sect01 .inner {
    display: flex;
    flex-direction: row;
    gap: var(--gap-9);
}

.notice-area {
    display: flex;
    gap: var(--gap-7);
    width: 100%;
}

@media (max-width: 1279px) {
    .notice-area {
        gap: var(--gap-6);
    }
}

@media (max-width: 1023px) {
    .main-sect01 .inner {
        flex-direction: column;
        gap: var(--gap-5);
    }

    .notice-area {
        gap: var(--gap-5);
    }
}

.notice-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
    width: 50%;
}

.notice-wrap h3 {
    font-size: var(--pc-font-size-heading-medium);
}

@media (max-width: 767px) {
    .notice-area {
        flex-direction: column;
    }

    .notice-wrap {
        width: 100%;
        gap: var(--gap-3);
    }

    .notice-wrap h3 {
        font-size: 2.1rem;
    }
}

.notice-wrap>div a {
    display: flex;
    flex-direction: column;
    background-color: var(--light-color-surface-white);
    padding: var(--padding-9);
    border-radius: var(--radius-xlarge1);
    border: 1px solid var(--light-color-border-gray);
    gap: var(--gap-4);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

@media (max-width: 1023px) {
    .notice-wrap>div a {
        padding: var(--padding-8);
    }
}

.notice-wrap>div a:hover {
    transform: translateY(-1rem);
}
.notice-wrap>div a::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: painted;
    border: 2px solid var(--color-primary-50);
    opacity: 0;
    transition: opacity .2s ease-in-out;
    border-radius: var(--radius-medium3);
}
.notice-wrap>div:hover a::after {
    opacity: 1;
}
.notice-wrap>div strong {
    font-size: var(--pc-font-size-heading-small);
    height: 2.9rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.notice-wrap>div .notice-text {
    font-size: var(--pc-font-size-body-medium);
    height: 7.8rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (max-width: 767px) {
    .notice-wrap>div .notice-text {
        height: 4.9rem;
        -webkit-line-clamp: 2;
    }
}

.notice-wrap>div span {
    display: inline-flex;
    gap: var(--gap-3);
    font-size: var(--pc-font-size-body-small);
}

.notice-wrap>div span::before {
    content: "";
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-color: var(--color-graphic-70);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    mask-image: url(../img/component/icon/ico_calendar.svg);
}

.notice-wrap>div a:hover span::before {
    background-color: var(--color-gray-70);
}

.notice-wrap .more {
    position: absolute;
    top: .2rem;
    right: 0;
}

.main-sect01-btn {
    display: flex;
    flex-direction: row;
    gap: var(--gap-7);
    margin-top: 5.2rem;
    width: 100%;
}

.main-sect01-btn h3 {
    font-size: var(--pc-font-size-heading-medium);
}

@media (max-width: 1279px) {
    .main-sect01-btn {
        gap: var(--gap-6);
    }
}

@media (max-width: 1023px) {
    .main-sect01-btn {
        margin-top: 0;
        gap: var(--gap-5);
    }

    .main-sect01-btn h3 {
        font-size: var(--pc-font-size-heading-small);
    }
}

.main-sect01-btn a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.6rem;
    background-color: #DDEFF4;
    padding: var(--padding-9) 0;
    border-radius: var(--radius-xlarge1);
    width: 50%;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.main-sect01-btn a:last-child {
    background-color: #F4F1FF;
}

@media (max-width: 480px) {
    /* .main-sect01-btn {
        flex-direction: column;
    } */

    .main-sect01-btn a {
        width: 100%;
        padding: var(--padding-8) 0;
        gap: var(--gap-5);
    }
}

.main-sect01-btn a:hover {
    transform: translateY(-1rem);
}
.main-sect01-btn a::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: painted;
    border: 2px solid var(--color-primary-50);
    opacity: 0;
    transition: opacity .2s ease-in-out;
    border-radius: var(--radius-medium3);
}
.main-sect01-btn a:hover::before {
    opacity: 1;
}

.main-sect01-btn a:nth-child(1)::after {
    content: "";
    background-color: #DDEFF4;
    background: url(../img/content/main_sect_icon01.png) no-repeat;
    width: 8rem;
    height: 9rem;
}

.main-sect01-btn a:nth-child(2)::after {
    content: "";
    background: url(../img/content/main_sect_icon02.png) no-repeat;
    width: 9.1rem;
    height: 9rem;
}

@media (max-width: 767px) {
    .main-sect01-btn a:nth-child(1)::after,
    .main-sect01-btn a:nth-child(2)::after {
        width: 6.4rem;
        height: 6.4rem;
        background-size: contain;
    }
}

/* 자주묻는 질문 */
.main-sect02 {
    background-color: #E8ECF3;
    padding: var(--padding-10) 0;
}

.main-sect02 .inner {
    display: flex;
    flex-direction: row;
    gap: var(--gap-9);
}

@media (max-width: 767px) {
    .main-sect02 {
        padding: var(--padding-8) 0;
    }

    .main-sect02 .inner {
        flex-direction: column;
        gap: var(--gap-7);
    }

}

.main-faq {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
    width: 100%;
    word-break: break-all;
}

.main-faq h3 {
    font-size: var(--pc-font-size-heading-medium);
}

@media (max-width: 767px) {
    .main-faq {
        gap: var(--gap-3);
    }

    .main-faq h3 {
        font-size: 2.1rem;
    }
}

.main-faq ul {
    position: relative;
    display: flex;
    gap: var(--gap-7);
}

.main-faq li::before {
    content: "";
    background: url(../img/content/main_faq.svg) #F8F9FB center no-repeat;
    min-width: 8rem;
    border-radius: var(--radius-large1);
}

.main-faq li {
    display: flex;
    gap: var(--gap-6);
    flex: 1;
}

@media (max-width: 1023px) {
    .main-faq ul {
        gap: var(--gap-5);
    }

    .main-faq li::before {
        min-width: 6rem;
    }

    .main-faq li {
        gap: var(--gap-3);
    }
}

@media (max-width: 767px) {
    .main-faq ul {
        flex-direction: column;
        background: #F8F9FB;
        padding: var(--padding-6);
        border-radius: var(--radius-large1);
    }
    .main-faq li::before {
        min-width: 3.2rem;
        background-position: top;
    }
}

.main-faq li a {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    border-radius: var(--radius-medium3);
}
.main-faq li a:hover {
    text-decoration: underline;
}
.main-faq li a strong {
    font-size: var(--pc-font-size-heading-small);
    height: 2.9rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.main-faq li a p {
    font-size: var(--pc-font-size-body-medium);
    height: 7.8rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (max-width: 767px) {

    .main-faq li a {
        gap: var(--gap-1);
    }

    .main-faq li a p {
        height: 2.4rem;
        -webkit-line-clamp: 1;
    }
}

.main-faq .more {
    position: absolute;
    top: .2rem;
    right: 0;
}

.main-service {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
    width: 100%;
    word-break: break-all;
}

.main-service h3 {
    font-size: var(--pc-font-size-heading-medium);
}

@media (max-width: 767px) {
    .main-service {
        gap: var(--gap-3);
    }

    .main-service h3 {
        font-size: 2.1rem;
    }
}

.main-service ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-4);
}

.main-service li {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    width: calc(50% - .8rem);
    background-color: #F8F9FB;
    border-radius: var(--radius-xlarge1);
    font-size: var(--pc-font-size-body-small);
    padding: var(--padding-3);
    word-break: keep-all;
}

.main-service li:nth-child(1) span,
.main-service li:nth-child(2) span {
    height: 2.3rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.main-service li:nth-child(3) span,
.main-service li:nth-child(4) span {
    height: 4.6rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (max-width: 480px) {    
    .main-service ul {
        flex-direction: column;
    }
    .main-service li {
        width: 100%;
    }
    .main-service li:nth-child(3) span {
        height: 2.3rem;
        -webkit-line-clamp: 1;
    }
    .main-service li span br {
        display: contents;
    }
}
.main-service li::before {
    content: "";
    position: relative;
    display: block;
    min-width: 2.4rem;
    height: 2.4rem;
}

.main-service li:nth-child(1)::before {
    background: url(../img/content/main_service01.svg) no-repeat;
}

.main-service li:nth-child(2)::before {
    background: url(../img/content/main_service02.svg) no-repeat;
}

.main-service li:nth-child(3)::before {
    background: url(../img/content/main_service03.svg) no-repeat;
}

.main-service li:nth-child(4)::before {
    background: url(../img/content/main_service04.svg) no-repeat;
}

.main-service .more {
    position: absolute;
    top: .2rem;
    right: 0;
}

.main-banner {
    position: relative;
    padding: var(--padding-9) 0;
}
@media (max-width: 767px) {
    .main-banner {
        padding: var(--padding-6) 0;
    }
}
.main-banner .inner {
    position: relative;
}

.menu-list .menu-swiper-in {
    position: relative;
    padding: 0 var(--number-17);

}

.main-banner .swiper-wrapper a {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--light-color-border-gray-light);
    border-radius: var(--radius-large1);
    height: 5.6rem;
    padding: 0 var(--padding-3);
}

.main-banner .swiper-slide {
    padding: var(--padding-3) 0;
}