@charset "utf-8";
/* CSS Document */
:root { 
	/* 트랜지션 */
	--transition: 0.15s ease-in;
	--q_trans: 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; /*큐빅*/
	/* 패딩,마진 */
	--sec_pd: 145px;
	
	/* 컬러 */
	--scroll: #00276C4d; /*포인트컬러 4d 앞에 넣어주기*/		
	
	--point: #00276c;	
	--point_right:#cddbf3;
	--point_righter:#f4f6fa;
	
	--red:#F33C5A;
	--purple:#8C32FA;
	
	--gray_2: #222222;		
	--gray_3: #333333;	
	--gray_4: #444444;
	--gray_5: #555555;
	--gray_6: #666666;
	--gray_8: #888888;
	--gray_9: #999999;
	
	--gray_a: #aaaaaa;	
	--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);
	
	--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% );
	
}


/*보더색상*/
.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); }

/*폰트 그라디언트 색상*/
.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_right { color: var(--point_right)!important; }
.fc_point_righter { color: var(--point_righter); }
.fc_point { color: var(--point) !important; }
.fc_white { color: var(--white); }

.gray_a { color: var(--gray_a);}
.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_8 { color: var(--gray_8);}
.fc_g_9 { color: var(--gray_9);}

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

/*색상*/
.bg_main { background-image: linear-gradient(to bottom, var(--point) 0%,#0089df 100%); }
.bg_grd_point { background-image: linear-gradient(157deg, #c6d8f5, #00276c 130%); }
.bg_grd_point:hover { background-image: linear-gradient(157deg, #c6d8f5, #00276c 100%); }
.bg_grdR { background-image: var(--gradientR); }
.bg_grdRB { background-image: var(--gradientRB); }
.bg_white { background-color: var(--white); }

.bg_point { background-color: var(--point); }
.bg_point_right { background-color: var(--point_right); }
.bg_point_righter { background-color: var(--point_righter); }

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

/*라인*/
.line{ width: 100%; height: 1px; background-color: #e3e3e3; display: block; content: ""}

/*포지션*/
.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; }

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

.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}
.lh_1_8{line-height: 1.8}
.lh_2_0{line-height: 2}


/*그림자*/
.shadow { box-shadow: 0 0.3rem 0.5rem 0.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);}

/*폼버튼*/
.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); }


/* ==================== 모바일 레이아웃 ==================== */ 
@media ( max-width: 1380px ) { 
}
@media ( max-width: 1280px ) { 
}
@media ( max-width: 900px ) { 
	:root {
		--sec_pd: 75px;
	}
}
@media ( max-width: 600px ) { 
}
@media ( max-width: 400px ) { 
}

/* ==================== 효과 ==================== */ 
/*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}
/*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].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; }
}
/* 바운스 애니메이션 */
@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;
    }
}