@charset "utf-8";
/* CSS Document */

/* 변수 */
:root {
    /* 트랜지션 */
    --transition: 0.15s ease-in;
    --q_trans: 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; /*큐빅*/
    /* 컬러 */
    --scroll: #18abeb4d; /*포인트컬러 4d 앞에 넣어주기*/
    /* 패딩,마진 */
    --sec_pd: 6.5rem;
    /* 컬러 */
    --blue_01: #18abeb;
    --blue_01_hover: #008AC7;
    --blue_02: #0473ea;
    --blue_02_hover: #0B50DC;
    --green_01: #2d9c00;
    --green_01_hover: #268f00;
    --green_02: #2aac48;
    --green_02_hover: #1F9039;
    --green_03: #3bd100;
    --green_03_hover: #94ED70;
    --red: #e81c2c;
    --orange: #ffa000;
    --pink: #FF5A97;
    --yellow: #ffdb4e;
    --slate_gray: #636e8a;
    --slate_gray_hover: #45506c;
    --dark_gray: #2C333D;
    --border_color: #ebebeb;
    /*--gradient: linear-gradient(135deg, #4b64ad, #314375);*/
    --gradient: linear-gradient(135deg, var(--blue_01), var(--blue_02));
    --gradientCir: radial-gradient(#5A77C9, #506AB5, #314375 95%);    
	/*--gradientCir: radial-gradient(#4b64ad, #314375);*/
    --gradient_02: linear-gradient(to right bottom, #F3FBFF 35%, #C8E3F4 120%);
    --gray_3: #333333;
    --gray_4: #444444;
    --gray_5: #555555;
    --gray_6: #666666;
    --gray_8: #888888;
    --gray_9: #999999;
    --gray_fa: #fafafa;
    --gray_f0: #f0f0f0;
    --gray_f5: #f5f5f5;
    --gray_f8: #f8f8f8;
    --gray_f9: #f9f9f9;
    --white: #ffffff;
    --black: #000000;
    --border_g: 1px solid #dfdfdf;
    --op_white: 1px solid rgba(255,255,255, .15);
    --op_black: 1px solid rgba(0,0,0,0.15);
    --light_gray: #F3FBFF;
    --light_blue: #dcecf4;
    --dark_gray: #3c3c3c;
    --blue_gray: #474f5b;
    --logo_gray: #303e4c;
    /* 폰트 */
    --p_font: 'YeogiOttaeJalnan'; /*JalnanGothic*/
    --wrap: 1500px;
}
.top_shadow{box-shadow: 0px -12px 21px 0px rgba(0,0,0,0.44);}
.marker {box-shadow: inset 0px -.5em 0 rgb(139 216 255 / 24%);}

.p_font {
    font-family: var(--p_font);
}
/*보더색상*/
.border_w {
    border: var(--op_white);
}

.border_b {
    border: var(--op_black);
}

.border_g {
    border: var(--border_g);
}

.border_point {
    border: 1px solid var(--blue_01);
}
.border_light_blue {
	border: 1px solid var(--light_blue);
}

.border_white {
    border: 1px solid var(--white);
}

.fc_white {
    color: var(--white);
}

.fc_blue_01 {
    color: var(--blue_01);
}

.fc_blue_02 {
    color: var(--blue_02);
}

.fc_light_gray {
    color: var(--light_gray);
}

.fc_green_01 {
    color: var(--green_01);
}

.fc_green_02 {
    color: var(--green_02);
}

.fc_green_03 {
    color: var(--green_03);
}

.fc_yellow {
    color: var(--yellow);
}

.fc_g_3 {
    color: var(--gray_3);
}

.fc_g_4 {
    color: var(--gray_4);
}

.fc_g_5 {
    color: var(--gray_5);
}

.fc_g_6 {
    color: var(--gray_6);
}

.fc_g_8 {
    color: var(--gray_8);
}

.fc_g_9 {
    color: var(--gray_9);
}

.fc_logo_gray {
    color: var(--logo_gray);
}

.fc_g_f5 {
    color: var(--gray_f5);
}

.bg_white {
    background-color: var(--white);
}

.bg_blue_01 {
    background-color: var(--blue_01);
}

.bg_blue_02 {
    background-color: var(--blue_02);
}

.bg_light_gray {
    background-color: var(--light_gray);
}

.bg_light_blue {
    background-color: var(--light_blue);
}

.bg_dark_gray {
    background-color: var(--dark_gray);
}

.bg_blue_gray {
    background-color: var(--blue_gray);
}

.bg_green_01 {
    background-color: var(--green_01);
}


.bg_red {
    background-color: var(--red);
}

.bg_purple {
    background-color: var(--purple);
}

.bg_gray_3 {
    background-color: var(--gray_3);
}

.bg_gray_4 {
    background-color: var(--gray_4);
}

.bg_gray_5 {
    background-color: var(--gray_5);
}

.bg_gray_6 {
    background-color: var(--gray_6);
}

.bg_gray_8 {
    background-color: var(--gray_8);
}

.bg_gray_9 {
    background-color: var(--gray_9);
}

.bg_gray_fa {
    background-color: var(--gray_fa);
}

.bg_gray_f0 {
    background-color: var(--gray_f0);
}

.bg_gray_f5 {
    background-color: var(--gray_f5);
}

.bg_gray_f8 {
    background-color: var(--gray_f8);
}

.bg_gray_f9 {
    background-color: var(--gray_f9);
}


/*포지션*/
.absolute {
    position: absolute !important
}

.fixed {
    position: fixed !important
}

.relative {
    position: relative !important
}

.static {
    position: static !important
}

.sticky {
    position: sticky !important
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

/*디스플레이*/
.CenCen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.d_flex {
    display: flex;
}

.d_block {
    display: block;
}

.d_inline_block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex_wrap {
    flex-wrap: wrap;
}

.flex_column {
    flex-direction: column;
}

.flex_row {
    flex-direction: row;
}

.grow_1 {
    flex-grow: 1
}


.jc_cen {
    justify-content: center;
}

.jc_sb {
    justify-content: space-between;
}

.jc_sa {
    justify-content: space-around;
}

.jc_end {
    justify-content: end;
}

.ai_cen {
    align-items: center;
}

.ai_str {
    align-items: flex-start;
}

.ai_st {
    align-items: stretch;
}

.ai_end {
    align-items: flex-end;
}

.ais_end {
    align-self: flex-end;
}

.ta_l {
    text-align: left;
}

.ta_cen {
    text-align: center;
}

.ta_r {
    text-align: right;
}

/*텍스트 행간 높이*/
.lh_1_0 {
    line-height: 1
}

.lh_1_1 {
    line-height: 1.1
}

.lh_1_2 {
    line-height: 1.2
}

.lh_1_3 {
    line-height: 1.3
}

.lh_1_4 {
    line-height: 1.4
}

.lh_1_5 {
    line-height: 1.5
}

.lh_1_6 {
    line-height: 1.6
}

/*그림자*/
.shadow {
    box-shadow: 0 0.2rem 0.4rem 0rem rgba(0,0,0,0.15);
}

.shadow_strong {
    box-shadow: 0 0.4rem 0.6rem 0rem rgba(0,0,0,0.25);
}

.shadow_blue {
    box-shadow: 0 0.2rem 0.4rem 0rem rgba(40,60,69,0.15);
}

.opc07 {
    opacity: 0.7
}
/* Wrap */
.wrap {
    width: 100%;
    max-width: calc(var(--wrap) - 2rem);
    padding-right: 1rem;
    padding-left: 1rem;
    margin: 0 auto;
    word-break: keep-all;
}

/* PC, 모바일 표시 */
.p_ver {
    display: inline-block !important;
}

.m_ver {
    display: none !important;
}
/*키워드숨김*/
.keywordhide {
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: -1;
    border: 0;
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
}

.d-flex {
    display: flex;
}

.gap-sm {
    gap: 0.5rem
}

.gap-md {
    gap: 1rem
}
/* 버튼 스타일 01 */
.btn_style_01 {
    display: inline-flex;
    gap: 10px;
    align-items: center; /*height: 60px; padding: 0 1.5rem;*/
    border-radius: 500rem;
    border: none;
    overflow: hidden;
    position: relative;
    transition: var(--transition);
}

    .btn_style_01 .btn_txt {
        transform: translateX(15px);
        transition-duration: 0.3s;
        line-height: 1;
    }

    .btn_style_01 .iconer {
        transform: translateY(50px);
        transition-duration: 0.3s;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 1.35em;
    }

    .btn_style_01:hover .btn_txt {
        transform: translateX(0px);
    }

    .btn_style_01:hover .iconer {
        transform: translateY(0%);
    }

/* 버튼 스타일 02 */
.btn_style_02 {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    height: 50px;
    padding: 0 1.5rem;
    border-radius: 500rem;
    border: none;
    overflow: hidden;
    color: #fff;
    position: relative;
    transition: var(--transition);
    font-size: 1.1em;
    font-weight: 600;
}

.btn_down {
    display: flex;
    gap: 10px;
    align-items: center;
    width: fit-content;
    height: 50px;
    padding: 0 1.25rem;
    border-radius: 500rem;
    border: none;
    overflow: hidden;
    background-color: var(--pink);
    color: #fff !important;
    transition: var(--transition);
    font-size: 1.1em;
    font-weight: 600;
}

/* 폼 스타일 01 */
.form_style_01 .fieldset_label {
    font-weight: 700;
    transition: var(--transition);
}

    .form_style_01 .fieldset_label sup {
        color: var(--slate_gray);
        font-size: 0.9em;
        font-weight: 500;
        margin-left: 0.5rem;
        opacity: 0.7;
    }

        .form_style_01 .fieldset_label sup.red {
            color: var(--red);
        }

.form_style_01 input[type="text"], .form_style_01 input[type="number"], .form_style_01 input[type="password"], .form_style_01 input[type="tel"], .form_style_01 select {
    border: solid 1px #ddd;
    border-radius: var(--br_m);
    height: 56px;
    padding: 0 1rem;
    font-size: 1em;
    transition: var(--transition);
}
/*.form_style_01 [id$="fieldset"]:focus-within .fieldset_label { color: var(--blue_01); }*/
.form_style_01 [id$="fieldset"]:focus-within input[type="text"],
.form_style_01 [id$="fieldset"]:focus-within input[type="password"],
.form_style_01 [id$="fieldset"]:focus-within input[type="tel"],
.form_style_01 [id$="fieldset"]:focus-within input[type="number"],
.form_style_01 [id$="fieldset"]:focus-within select {
    border: solid 1px var(--blue_01);
}

/* 라디오 셀렉트 */
.radio_button_group {
    display: flex;
    justify-content: space-between;
}

    .radio_button_group .radio_input {
        display: none;
    }

    .radio_button_group label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: solid 1px #ddd;
        flex: 1;
        margin-right: 2%;
        box-sizing: border-box;
        font-weight: 600;
        transition: var(--transition);
        color: #888;
        border-radius: var(--br_m);
        height: 56px;
    }

        .radio_button_group label:last-child {
            margin-right: 0;
        }

    .radio_button_group .radio_input:checked + .radio_label {
        border: solid 1px var(--blue_01);
        background-color: rgba(15,115,233,0.1);
        color: var(--blue_01);
    }

    .radio_button_group label.disabled {
        background-color: rgba(0,0,0,0.05) !important;
        color: #888888 !important;
        cursor: not-allowed;
    }

/* 테이블 스타일 01 */
.table_style_01 {
    border-bottom: 1px solid var(--border_color);
    width: 100%;
}

    .table_style_01 tr {
        border-top: 1px solid var(--border_color);
    }

        .table_style_01 tr:first-of-type {
            border-top: 1px solid #111 !important;
        }

    .table_style_01 th {
        background-color: #f8f8f8;
        font-weight: bold;
    }

    .table_style_01 th, .table_style_01 td {
        padding: 1rem;
        text-align: center;
    }

/* 체크박스 */
.checkbox_ctr {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    height: 25px;
}

    .checkbox_ctr * {
        box-sizing: content-box;
        -webkit-box-sizing: content-box !important;
        -moz-box-sizing: content-box !important;
    }

    .checkbox_ctr input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkbox_ctr .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
        border-radius: 4px;
        transition: background-color 0.3s;
        transform: scale(0.9);
        transform-origin: left;
    }

        .checkbox_ctr .checkmark::after {
            content: "";
            position: absolute;
            display: none;
            left: 9px;
            top: 4px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

    .checkbox_ctr input:checked ~ .checkmark {
        background-color: var(--orange);
    }

        .checkbox_ctr input:checked ~ .checkmark:after {
            display: block;
        }

        .checkbox_ctr input:checked ~ .checkmark:after {
            animation: checkAnim 0.2s forwards;
        }

@keyframes checkAnim {
    0% {
        height: 0;
    }

    100% {
        height: 10px;
    }
}

/* 섹션 타이틀 */
.sec_tit {
    margin-bottom: 3.5rem;
    text-align: center;
}

    .sec_tit .main_txt {
		margin-bottom: .5rem;
        font-size: 2.8rem;
        line-height: 1.32;
        font-family: var(--p_font);
    }

    .sec_tit .desc_txt {
        margin-bottom: 1.5rem;
        font-size: 1.5em;
        font-weight: 500;
		color: var(--blue_02);
        opacity: 0.8;
    }

/*Animations*/
[data-animate-in] {
    opacity: 0;
    transition: transform 0.8s ease, opacity 2s ease
}

[data-animate-in="up"] {
    transform: translate3d(0, 24px, 0)
}

[data-animate-in="left"] {
    transform: translate3d(-25%, 0, 0)
}

[data-animate-in="right"] {
    transform: translate3d(25%, 0, 0)
}

[data-animate-in="down"] {
    transform: translate3d(0, -24px, 0)
}

[data-animate-in="fadeIn"] {
    transform: translate3d(0, 0, 0)
}

[data-animate-in].in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition: transform 0.6s ease, opacity 0.6s ease
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease
}

.page-loaded .fade-in, .page-loaded.fade-in {
    opacity: 1
}

.isSafari.isTouch [data-animate-in], .isSafari.isTouch [data-animate-in="up"] {
    opacity: 1;
    transition: none;
    transform: none
}

@keyframes MyScale {
    from {
        transform: scale(1.1);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes opacity {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes zoom {
    2.5%, 7.5%, 12.5%, 17.5%, 100% {
        transform: scale(1);
    }

    5%, 10%, 15% {
        transform: scale(0.9);
    }
}

@keyframes float {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.92);
    }

    100% {
        transform: scale(1);
    }
}
/* 바운스 애니메이션 */
@keyframes bounce {
    0%, 50%, 100% {
        transform: scale(.97);
    }

    25% {
        transform: scale(1.025);
        /*transform-origin: bottom center;*/
    }
}

.bounce {
    animation: bounce 1.5s infinite;
}

.swing {
    transform-origin: top center;
    animation: swing 2s ease infinite;
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.wobble {
    animation: wobble 2s ease infinite;
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
    }

    15% {
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        transform: translateX(-5%) rotate(-1deg);
    }

    100% {
        transform: translateX(0%);
    }
}
/* ==================== 모바일 레이아웃 ==================== */

@media ( max-width: 1400px ) {
    /* Wrap */
    .wrap { /*padding-left: 1rem; padding-right: 1rem;*/
    }
}

@media ( max-width: 900px ) {
    /* PC, 모바일 표시 */
    .p_ver {
        display: none !important;
    }

    .m_ver {
        display: inline-block !important;
    }

    /* 버튼 스타일 01 */
    .btn_style_01 {
        height: 48px !important;
        color: #fff !important;
        gap: 5px;
        font-size: 0.9em;
        line-height: 1.2;
        padding: 0 2rem;
    }

        .btn_style_01:hover {
            color: #fff !important;
        }

        .btn_style_01 .btn_txt {
            transform: translateX(0);
        }

        .btn_style_01 .iconer {
            transform: translateY(0);
            font-size: 1.3em;
            margin-left: 0.2rem;
        }

            .btn_style_01 .iconer svg {
                width: 20px;
                height: 20px;
            }

        .btn_style_01:hover .iconer {
            transform: translateY(0);
        }

    /* 버튼 스타일 02 */
    .btn_style_02 {
        height: 44px;
        padding: 0 1.5rem;
        gap: 6px;
    }

    /* 섹션 타이틀 */
    .sec_tit {
        margin-bottom: 2.5rem;
    }

        .sec_tit .main_txt {
            font-size: 2rem;
        }

        .sec_tit .desc_txt {
            font-size: 1.15em;
            padding: 0 2rem;
        }

    /* 체크박스 */
    .checkbox_ctr {
        height: 22px;
        padding-left: 25px;
        transform: scale(0.9);
        transform-origin: left;
    }

        .checkbox_ctr .checkmark {
            height: 22px;
            width: 22px;
        }

            .checkbox_ctr .checkmark::after {
                top: 3px;
                left: 7px;
            }

    /* 폼 스타일 01 */
    .form_style_01 input[type="text"], .form_style_01 input[type="number"], .form_style_01 input[type="password"], .form_style_01 input[type="tel"], .form_style_01 select {
        height: 48px;
        padding: 0 0.8rem;
    }

    /* 라디오 셀렉트 */
    .radio_button_group label {
        height: 48px;
    }

    .btn_down {
        margin: auto;
    }
    /* 변수 */
    :root {
        /* 패딩,마진 */
        --sec_pd: 4rem;
    }
}