@charset "utf-8";

:root {
    /* 트랜지션 */
    --transition: 0.15s ease-in;
    /* 패딩,마진 */
    --sec_pd: 7rem;
    /* 모서리 곡률 */
    --br_01: 50px;
    --br_02: 20px;
    /* 컬러 */
    --point: #00A7A7;
    --point_dark: #009090;
    --point_navy: #273646;
    --red: #EA002C;
    --red_light: #ff98ab;
    --orange: #FF7A00;
    --gray_3: #333333;
    --gray_6: #666666;
    --gray_9: #999999;
	--gray_bg: #f5f5f5;
    --light_point: rgba(179,226,226,1);
    --light_point_hover: rgba(179,226,226,0.7);
    --brt_point: rgba(179,226,226,0.7);
    --white: #ffffff;
    --yellow: #ffdb4e;
    --border_white: var(--white);
    --border_g: 1px solid #dfdfdf;
    --op_white: 1px solid rgba(255,255,255,.15);
    --op_black: 1px solid rgba(0,0,0,0.15);
    --gradientR: linear-gradient(to right, var(--point) 40%, var(--point) 65%);
    --gradientRB: linear-gradient(to right bottom, var(--point), var(--point));
    /*폰트 16px */
    --base-font-size: 1rem;
    --base-gap: 4px;
    --delay100: 100ms;
    --delay200: 200ms;
    --delay300: 300ms;
    --delay400: 400ms;
    --delay500: 500ms;
    --delay600: 600ms;
    --delay700: 700ms;
    --delay800: 800ms;
    --delay900: 900ms;
    --delay1000: 1000ms;
    --delay1200: 1200ms;
    --delay1500: 1500ms;
    --delay1800: 1800ms;
    --delay2100: 2100ms;
    --delay2400: 2400ms;
    --delay2700: 2700ms;
    --delay3000: 3000ms;
}

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

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

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

.border_point {
    border: 1px solid var(--point); 
}

/*색상*/
.bg_grd_point {
    background-image: linear-gradient(140deg, var(--white) -8%, var(--point) 100%);
}

.bg_grdR {
    background-image: var(--gradientR);
}

.bg_grdRB {
    background-image: var(--gradientRB);
}

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

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

.bg_gray2 {
    background-color: #efefef;
}

.bg_gray_3 {
    background-color: #e6e6e6;
}
.bg_point{
	background-color: var(--point);
}.bg_brt_point{
	background-color: var(--brt_point);
}
.circle{
	border-radius:100%;
}
.round {
    border-radius: var(--br_01);
}

.roundS {
    border-radius: var(--br_02);
}

.btn_pd {
    padding: 0.65rem 1rem 0.5rem;
    line-height: 1
}
/*폰트색상*/
.fc_grd {
    background: var(--gradientR);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 5px transparent;
    color: transparent;
    filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.3));
}

.fc_point {
    color: var(--point) !important;
}

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

/* 폰트사이즈 + 베이직 */
.thin {
    font-weight: 100
}

.light {
    font-weight: 200
}

.extralight {
    font-weight: 300
}

.regular {
    font-weight: 400
}

.medium {
    font-weight: 500
}

.semibold {
    font-weight: 600
}

.bold {
    font-weight: 700
}

.extrabold {
    font-weight: 800
}

.black {
    font-weight: 900
}

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

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

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

.fs_12 { font-size: 0.75rem; } /* 12px */
.fs_13 { font-size: 0.8125rem; } /* 13px */
.fs_14 { font-size: 0.875rem; } /* 14px */
.fs_15 { font-size: 0.9375rem; } /* 15px */
.fs_16 { font-size: var(--base-font-size); } /* 16px */
.fs_17 { font-size: 1.0625rem; } /* 17px */
.fs_18 { font-size: 1.125rem; } /* 18px */
.fs_19 { font-size: 1.1875rem; } /* 19px */
.fs_20 { font-size: 1.25rem; } /* 20px */
.fs_21 { font-size: 1.3125rem; } /* 21px */
.fs_22 { font-size: 1.375rem; } /* 22px */
.fs_23 { font-size: 1.4375rem; } /* 23px */
.fs_24 { font-size: 1.5rem; } /* 24px */
.fs_25 { font-size: 1.5625rem; } /* 25px */
.fs_26 { font-size: 1.625rem; } /* 26px */
.fs_27 { font-size: 1.6875rem; } /* 27px */
.fs_28 { font-size: 1.75rem; } /* 28px */
.fs_29 { font-size: 1.8125rem; } /* 29px */
.fs_30 { font-size: 1.875rem; } /* 30px */
.fs_31 { font-size: 1.9375rem; } /* 31px */
.fs_32 { font-size: 2rem; } /* 32px */
.fs_33 { font-size: 2.0625rem; } /* 33px */
.fs_34 { font-size: 2.125rem; } /* 34px */
.fs_35 { font-size: 2.1875rem; } /* 35px */
.fs_36 { font-size: 2.25rem; } /* 36px */
.fs_37 { font-size: 2.3125rem; } /* 37px */
.fs_38 { font-size: 2.375rem; } /* 38px */
.fs_39 { font-size: 2.4375rem; } /* 39px */
.fs_40 { font-size: 2.5rem; } /* 40px */
.fs_50 { font-size: 3.125rem; } /* 50px */
.fs_60 { font-size: 3.75rem; } /* 60px */
.fs_80 { font-size: 5rem; } /* 80px */
.fs_120 { font-size: 7.5rem; } /* 120px */

.d_flex {
    display: flex;
}

.flex_wrap {
    flex-wrap: wrap;
}

.flex_column {
    flex-direction: column;
}

.flex_row {
    flex-direction: row;
}

.jc_cen {
    justify-content: center;
}

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

.jc_end {
    justify-content: end;
}

.ai_cen {
    align-items: center;
}

.ai_st {
    align-items: stretch;
}

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

.ta_l {
    text-align: left;
}

.ta_cen {
    text-align: center;
}

.ta_r {
    text-align: right;
}

.shadow {
    box-shadow: 0 0rem 1.5rem 0.5rem rgba(0,0,0,0.05);
}

.shadow5 {
    box-shadow: 0 0rem 15px 0 rgba(0,0,0,0.3);
}

.CenCen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.gap1 {
    gap: calc(var(--base-gap) * 1);
}
/* 4px */
.gap2 {
    gap: calc(var(--base-gap) * 2);
}
/* 8px */
.gap3 {
    gap: calc(var(--base-gap) * 3);
}
/* 12px */
.gap4 {
    gap: calc(var(--base-gap) * 4);
}
/* 16px */
.gap5 {
    gap: calc(var(--base-gap) * 5);
}
/* 20px */
.gap6 {
    gap: calc(var(--base-gap) * 6);
}
/* 24px */
.gap7 {
    gap: calc(var(--base-gap) * 7);
}
/* 28px */
.gap8 {
    gap: calc(var(--base-gap) * 8);
}
/* 32px */
.gap9 {
    gap: calc(var(--base-gap) * 9);
}
/* 36px */
.gap10 {
    gap: calc(var(--base-gap) * 10);
}
/* 40px */

/* 1배 */
.mt1 {
    margin-top: calc(var(--base-gap) * 1);
}

.mb1 {
    margin-bottom: calc(var(--base-gap) * 1);
}

.mr1 {
    margin-right: calc(var(--base-gap) * 1);
}

.ml1 {
    margin-left: calc(var(--base-gap) * 1);
}

.mx1 {
    margin: 0 calc(var(--base-gap) * 1);
}

.my1 {
    margin: calc(var(--base-gap) * 1) 0;
}

.m1 {
    margin: calc(var(--base-gap) * 1);
}

/* 2배 */
.mt2 {
    margin-top: calc(var(--base-gap) * 2);
}

.mb2 {
    margin-bottom: calc(var(--base-gap) * 2);
}

.mr2 {
    margin-right: calc(var(--base-gap) * 2);
}

.ml2 {
    margin-left: calc(var(--base-gap) * 2);
}

.mx2 {
    margin: 0 calc(var(--base-gap) * 2);
}

.my2 {
    margin: calc(var(--base-gap) * 2) 0;
}

.m2 {
    margin: calc(var(--base-gap) * 2);
}

/* 3배 */
.mt3 {
    margin-top: calc(var(--base-gap) * 3);
}

.mb3 {
    margin-bottom: calc(var(--base-gap) * 3);
}

.mr3 {
    margin-right: calc(var(--base-gap) * 3);
}

.ml3 {
    margin-left: calc(var(--base-gap) * 3);
}

.mx3 {
    margin: 0 calc(var(--base-gap) * 3);
}

.my3 {
    margin: calc(var(--base-gap) * 3) 0;
}

.m3 {
    margin: calc(var(--base-gap) * 3);
}

/* 4배 */
.mt4 {
    margin-top: calc(var(--base-gap) * 4);
}

.mb4 {
    margin-bottom: calc(var(--base-gap) * 4);
}

.mr4 {
    margin-right: calc(var(--base-gap) * 4);
}

.ml4 {
    margin-left: calc(var(--base-gap) * 4);
}

.mx4 {
    margin: 0 calc(var(--base-gap) * 4);
}

.my4 {
    margin: calc(var(--base-gap) * 4) 0;
}

.m4 {
    margin: calc(var(--base-gap) * 4);
}

/* 5배 */
.mt5 {
    margin-top: calc(var(--base-gap) * 5);
}

.mb5 {
    margin-bottom: calc(var(--base-gap) * 5);
}

.mr5 {
    margin-right: calc(var(--base-gap) * 5);
}

.ml5 {
    margin-left: calc(var(--base-gap) * 5);
}

.mx5 {
    margin: 0 calc(var(--base-gap) * 5);
}

.my5 {
    margin: calc(var(--base-gap) * 5) 0;
}

.m5 {
    margin: calc(var(--base-gap) * 5);
}

/* 6배 */
.mt6 {
    margin-top: calc(var(--base-gap) * 6);
}

.mb6 {
    margin-bottom: calc(var(--base-gap) * 6);
}

.mr6 {
    margin-right: calc(var(--base-gap) * 6);
}

.ml6 {
    margin-left: calc(var(--base-gap) * 6);
}

.mx6 {
    margin: 0 calc(var(--base-gap) * 6);
}

.my6 {
    margin: calc(var(--base-gap) * 6) 0;
}

.m6 {
    margin: calc(var(--base-gap) * 6);
}

/* 7배 */
.mt7 {
    margin-top: calc(var(--base-gap) * 7);
}

.mb7 {
    margin-bottom: calc(var(--base-gap) * 7);
}

.mr7 {
    margin-right: calc(var(--base-gap) * 7);
}

.ml7 {
    margin-left: calc(var(--base-gap) * 7);
}

.mx7 {
    margin: 0 calc(var(--base-gap) * 7);
}

.my7 {
    margin: calc(var(--base-gap) * 7) 0;
}

.m7 {
    margin: calc(var(--base-gap) * 7);
}

/* 8배 */
.mt8 {
    margin-top: calc(var(--base-gap) * 8);
}

.mb8 {
    margin-bottom: calc(var(--base-gap) * 8);
}

.mr8 {
    margin-right: calc(var(--base-gap) * 8);
}

.ml8 {
    margin-left: calc(var(--base-gap) * 8);
}

.mx8 {
    margin: 0 calc(var(--base-gap) * 8);
}

.my8 {
    margin: calc(var(--base-gap) * 8) 0;
}

.m8 {
    margin: calc(var(--base-gap) * 8);
}

/* 9배 */
.mt9 {
    margin-top: calc(var(--base-gap) * 9);
}

.mb9 {
    margin-bottom: calc(var(--base-gap) * 9);
}

.mr9 {
    margin-right: calc(var(--base-gap) * 9);
}

.ml9 {
    margin-left: calc(var(--base-gap) * 9);
}

.mx9 {
    margin: 0 calc(var(--base-gap) * 9);
}

.my9 {
    margin: calc(var(--base-gap) * 9) 0;
}

.m9 {
    margin: calc(var(--base-gap) * 9);
}

/* 10배 */
.mt10 {
    margin-top: calc(var(--base-gap) * 10);
}

.mb10 {
    margin-bottom: calc(var(--base-gap) * 10);
}

.mr10 {
    margin-right: calc(var(--base-gap) * 10);
}

.ml10 {
    margin-left: calc(var(--base-gap) * 10);
}

.mx10 {
    margin: 0 calc(var(--base-gap) * 10);
}

.my10 {
    margin: calc(var(--base-gap) * 10) 0;
}

.m10 {
    margin: calc(var(--base-gap) * 10);
}

/*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(-15%, 0, 0)
}

[data-animate-in="right"] {
    transform: translate3d(15%, 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 2s 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
}

.delay100 {
    animation-delay: var(--delay100);
}

.delay200 {
    animation-delay: var(--delay200);
}

.delay300 {
    animation-delay: var(--delay300);
}

.delay400 {
    animation-delay: var(--delay400);
}

.delay500 {
    animation-delay: var(--delay500);
}

.delay600 {
    animation-delay: var(--delay600);
}

.delay700 {
    animation-delay: var(--delay700);
}

.delay800 {
    animation-delay: var(--delay800);
}

.delay900 {
    animation-delay: var(--delay900);
}

.delay1000 {
    animation-delay: var(--delay1000);
}

.delay1200 {
    animation-delay: var(--delay1200);
}

.delay1500 {
    animation-delay: var(--delay1500);
}

.delay1800 {
    animation-delay: var(--delay1800);
}

.delay2100 {
    animation-delay: var(--delay2100);
}

.delay2400 {
    animation-delay: var(--delay2400);
}

.delay2700 {
    animation-delay: var(--delay2700);
}

.delay3000 {
    animation-delay: var(--delay3000);
}

.MyScale_text {
    animation: MyScale 1.5s;
}

.MyScale_text2 {
    animation: MyScale2 2.5s;
}

.MyScale_text > .MyScale_text2 {
    animation: MyScale2 1.5s;
}

.main_txt > .MyScale_text {
    animation: MyScale 1s;
}

.main_txt > .MyScale_text2 {
    animation: MyScale2 1s;
}
.toLeft {
    animation: toLeft 1s;
}
.toTop {
    animation: toTop 1.5s;
}
.toRight {
    animation: toRight 2s;
}
@keyframes MyScale {
    from {
        transform: scale(1.2) translateY(-100px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0px);
        opacity: 1;
    }
}
@keyframes MyScale2 {
    0%,30% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes toLeft {
    0%,30% {
        transform: scale(0);
		transform-origin: bottom right;
        opacity: 0;
    }

    100% {
        transform: scale(1);
		transform-origin: bottom right;
        opacity: 1;
    }
}
@keyframes toTop {
    0%,30% {
        transform: scale(0);
		transform-origin: bottom bottom;
        opacity: 0;
    }

    100% {
        transform: scale(1);
		transform-origin: bottom bottom;
        opacity: 1;
    }
}
@keyframes toRight {
    0%,30% {
        transform: scale(0);
		transform-origin: bottom left;
        opacity: 0;
    }

    100% {
        transform: scale(1);
		transform-origin: bottom left;
        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 blink {
    0% {
        opacity: 0.9;
    }

    50% {
        opacity: 1;
        transform: scale(1.05)
    }

    100% {
        opacity: 0.9;
    }
}

.blinking-text {
    animation: blink 2s infinite; /* 1초 간격으로 무한 반복 */
}

.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%); }
}
/* ==================== 모바일 레이아웃 ==================== */ c
@media ( max-width: 1400px ) {
    body, html

{
    font-size: 15px;
}

:root {
    /* 패딩,마진 */
    --sec_pd: 6rem; /* 폰트 */
    --base-font-size: 15px !important;
}

}

@media ( max-width: 900px ) {
    body, html {
        font-size: 14px;
    }

    :root {
        /* 패딩,마진 */
        --sec_pd: 3rem; /* 폰트 */
        --base-font-size: 14px !important;
        --base-gap: 2px;
    }
}

@media ( max-width: 600px ) {
    body, html {
        font-size: 10px;
    }

    :root {
        /* 폰트 */
        --base-font-size: 10px !important; /* 패딩,마진 */
        --sec_pd: 2rem;
    }

    /*.btn_pd {
        padding: 0.5rem 0.5rem 0rem;
        line-height: 1
    }*/
}