@charset "utf-8";
:root { /* 트랜지션 */
	--transition: 0.15s ease-in;
	--q_trans: 400ms cubic-bezier(0.4, 0, 0.2, 1) ; 
	
	/* 패딩,마진 */
	--sec_pd: 6.25rem;/*100px*/
	
	/* 컬러 */
	--dark:#066087;
	--point:#199ED9;
    --light_point:#84d0f2;
    --lighter_point:#ADE0FF;
	--yellow: #ffff5c;	
   
    /* 배경 */
    --bg_sky:#f2fbff;
	--footer:#f3f7f8;
	--form:#d3f1ff;
	
	--gray_2: #222222;	
	--gray_3: #333333;	
	--gray_4: #444444;
    --gray_5: #555555;
	--gray_6: #666666;
    --gray_7: #777777;
	--gray_8: #888888;
	--gray_9: #999999;

	--gray_fa: #fafafa;
	--gray_f9: #f9f9f9;
	--gray_f8: #f8f8f8;
	--gray_f5: #f5f5f5;
	--gray_f0: #f0f0f0;
	--white: #ffffff;
	--black: #000000;

	--light_point_hover:#53737c;


	--brt_point: rgba(179,226,226,0.7);

	--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,#6a5ff9,#e2657a);
	--gradientRB: linear-gradient(to right bottom,#6a5ff9,#e2657a);
	--btn_grd:linear-gradient(to right, #cbe0ff 0%, #5c51f2 50%, #332182 110%);
	--btn_grd_hover:linear-gradient(to right, #e2657a  ,#5c51f2 100% );

	/*폰트 16px */
	--base-font-size: 1rem;
	--base-px: 4px;
	--header_h: 150px;
}

/*보더색상*/
.border_w { border: var(--op_white); }
.border_b { border: var(--op_black); }
.border_g { border: var(--border_g); }
.border_point { border:  1px solid var(--point); }
.border_white { border:  1px solid var(--white); }

/*라인*/
hr { width: 100%; height: 1px; background-color: rgba(232, 232, 232, 0.15); border : 0;margin-left : auto; margin-right : auto; padding: 0;  margin-block-end: 0; margin-block-start: 0; margin-top: -1px;}
.line{ width: 100%; height: 1px; background-color: #bbbbbb; display: block; content: "";}

/*배경색상*/
.bg_point { background-color: var(--point); }
.bg_point_light { background-color: var(--light_point); }
.bg_point_lighter { background-color: var(--lighter_point); }
.bg_sky { background-color: var(--bg_sky); }
.bg_grd_point { background-image: linear-gradient(135deg, #47baff, #00436d); }
.bg_white { background-color: var(--white); }

.bg_gray_fa { background-color: var(--gray_fa); }
.bg_gray_f9 { background-color: var(--gray_f9); }
.bg_gray_f8 { background-color: var(--gray_f8); }
.bg_gray_f5 { background-color: var(--gray_f5); }
.bg_gray_f0 { background-color: var(--gray_f0); }


/*폰트색상*/
.fc_grd { 
	background: linear-gradient(139deg, #6a5ff9, #e2657a 60%); 
	background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
	/*-webkit-text-stroke: 1px transparent; color: transparent; 	
	filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.3)); */
}
.fc_point { color: var(--point) !important; }
.fc_point_light { color: var(--light_point); }
.fc_point_lighter { color: var(--lighter_point); }

.fc_white { color: var(--white); }
.fc_yellow { color: var(--yellow)!important; }

.fc_g_2 { color: var(--gray_2);}
.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_7 { color: var(--gray_7);}
.fc_g_8 { color: var(--gray_8);}
.fc_g_9 { color: var(--gray_9);}

/*디스플레이*/
.square {display: flex; justify-content: center; align-items: center; text-align: center; min-width: 200px; max-width: 340px; width: 100%; aspect-ratio: 1 / 1!important;  }
.CenCen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.d_flex { display: flex; }
.d_block { display: block!important; }
.inline{display: inline;}
.flex_wrap { flex-wrap: wrap; }
.flex_column { flex-direction: column; }
.flex_row { flex-direction: row; }
.grow{flex: 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}

/*그림자*/
.shadow { box-shadow: 0 0.25rem 0.25rem 0rem rgba(0,0,0,0.25); }
.text_shadow{text-shadow:0 0.25rem 0.25rem rgba(0,0,0,0.25); }
.shadow_strong { box-shadow: 0 0.3rem 0.6rem 0rem rgba(0,0,0,0.25); }
.shadow_white { box-shadow: 0 0.3rem 0.6rem 0rem rgba(255,255,255,0.5); }
.shadow_blue { box-shadow:  0 0.25rem 0.25rem 0rem rgba(25,158,217,0.14); }

/*폼버튼*/
.btn_grd { background-image:var(--btn_grd);
box-shadow: 0 0.2rem 0.6rem 0rem rgba(0,0,0,0.65); }
.btn_grd:hover { filter: hue-rotate(22deg); }

/*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(50%, 0, 0)}
[data-animate-in="down"] {    transform: translate3d(0, -24px, 0)}
[data-animate-in="fadeIn"] {    transform: translate3d(0, 0, 0)}
[data-animate-in="zoom"] {    transform: scale(1.5)}
[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 opacity {
    0% { opacity: 0.5; }
	100% { opacity: 1; }
}

/* ==================== 모바일 레이아웃 ==================== */ 
@media ( max-width: 1280px ) { 
	body,html { font-size:  15px; }
	:root { 
		--header_h: 80px;
		/* 패딩,마진 */
		--sec_pd: 6rem;
	}
	.column_lg{flex-direction: column;}
	
}
@media ( max-width: 900px ) { 
	body,html { font-size:  14px; }
	:root {
		--header_h: 70px;
		--base-px: 2px; }
	.column_md{flex-direction: column;}
}
@media ( max-width: 600px ) { 
	body,html { font-size:  10px; }
	:root { 
		--header_h: 60px;
		/* 폰트 */
		--base-font-size: 12px !important;
	}
	.column_sm{flex-direction: column;}
}
/* 배경 반짝 버튼 이펙트 */
.hoverEffect{ overflow: hidden; position: relative!important; }
.hoverEffect:after { background: var(--white); content: "";  height: 150px;  left: -80%;  opacity: 0; position: absolute; top: -65%; transform:skewX(-25deg) ; transition: all 450ms cubic-bezier(0.19, 1, 0.22, 1); width:70px;  }

.hoverEffect:hover:after {opacity: 0.2; left: 150%; transition: all 450ms cubic-bezier(0.19, 1, 0.22, 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 2 s infinite;
	/* 1초 간격으로 무한 반복 */
}

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

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

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

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

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

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

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

	100% {
		transform:  translateX(0% );
	}
}
/* 바운스 애니메이션 */
@keyframes bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

.bounce {
    animation: bounce 1.5s infinite;
}

/* ==================== oneWaySend ==================== */
.result_page {
    text-align: center;
    position: absolute;
    width: 100%;
    height: inherit;
}

    .result_page .innerwrap {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    .result_page img {
        width: 110px;
    }

    .result_page strong {
        display: inline-block;
        font-size: 1.4em;
        margin-top: 1.5rem;
    }

    .result_page a {
        background-color: rgba(0,0,0,0.8);
        color: var(--white);
        padding: 0.7rem 2rem;
        border-radius: 500px;
        margin-top: 2.5rem !important;
    }
	
@media only screen and (min-width: 376px) and (max-width: 850px) {
    .result_page img {
        width: 85px;
    }

    .result_page strong {
        display: inline-block;
        font-size: 1.4em;
        margin-top: 1.2rem;
    }

    .result_page a {
        margin-top: 2rem !important;
    }
}