@charset "utf-8";
/* CSS Document */
:root { 
	/* 트랜지션 */
	--transition: 0.15s ease-in;
	--q_trans: 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; /*큐빅*/
	/* 패딩,마진 */
	--sec_pd: 4.375rem;/*70px/8.75=140px*/
	
	/* 컬러 */
	--scroll: #1342a94d; /*포인트컬러 4d 앞에 넣어주기*/		
	
	--point: #1342a9;	
    --point2: #4377e8;	

	--dark_point: #123787;
    --darker_point: #060d1e;
    --light: #c9daff;	

    --sky: #a8beee;	
	--light_point: #F6FAFF;
	
	--red:#c00021;/*eb2c2a*/
    --dark_red:#800016;
	--purple:#9713c7;
	--mint:#00ffaf;/*33FFA3*/
	--orange:#ff6633;
    --peach:#FFD8D8;
	--steal:#003049;
    --beige:#FDF0D5;


	--gray_1: #111111;		
	--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_f0: #f0f0f0;
    --gray_f1: #f1f1f1;
	--gray_f3: #f3f3f3;
	--gray_f5: #f5f5f5;
	--gray_f8: #f8f8f8;
	--gray_f9: #f9f9f9;
	
    --surface:#F8FAFC;
	--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);
	
	--gradientB: linear-gradient(to bottom,#1d5fee,#1342a9);
	--gradientRB: linear-gradient(to right bottom,#1342a9 50%,#123787 120%);
	--grd_sky: linear-gradient(135deg, #F8FAFC 10%, #d1dfff 170%);


	--btn_grd:linear-gradient(to right, #cbe0ff 0%, #5c51f2 50%, #332182 110%);
	--btn_grd_hover:linear-gradient(to right, #e2657a  ,#5c51f2 100% );
}
/*텍스트 마커*/
.marker_green {
    box-shadow: inset 0px -.6em 0 rgb(239 254 190);
}
.marker_orange {
    box-shadow: inset 0px -.6em 0 #ffe5d8;
}
.marker_blue {
    box-shadow: inset 0px -.5em 0 #e3f6ff;
}
.txt-over { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/*라인*/
hr {/*position: relative; display:none;  */ width: 100%; height: 1px; background-color: rgba(0, 0, 0, 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: "";}

/*보더색상*/
.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_dark_point { border:  1px solid var(--dark_point); }
.border_light_point { border:  12px solid var(--surface); }
.border_white { border:  1px solid var(--white); }
.border_sky{border:  1px solid var(--sky); }

.bor_t{border-top: var(--op_black);}
.bor_b{border-bottom: var(--op_black);}
.bor_r{border-right: var(--op_black);}
.bor_l{border-left: var(--op_black);}
/*폰트 그라디언트 색상*/
.fc_grd { 	background: linear-gradient(139deg, #6a5ff9, #e2657a 60%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.fc_point { color: var(--point) !important; }
.fc_point2 { color: var(--point2); }
.fc_dark_point { color: var(--dark_point) ; }
.fc_white { color: var(--white); }
.fc_sky { color: var(--sky); }
.fc_red { color: var(--red); }
.fc_purple { color: var(--purple); }
.fc_mint { color: var(--mint); }
.fc_peach { color: var(--peach); }
.fc_orange { color: var(--orange);}
.fc_yellow{color: #ffd43b;}

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

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

.f_sp_normal{letter-spacing: normal;}
/*색상*/
.bg_main { background-image: linear-gradient(to bottom, var(--point) 0%,#0089df 100%); }
.bg_grd_point { background-image: linear-gradient(to bottom, var(--white)0%, var(--gray_fa) 30%, #009FFF38 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_point2 { background-color: var(--point2); }

.bg_dark_point { background-color: var(--dark_point); }
.bg_red { background-color: var(--red); }
    .bg_dark_red { background-color: var(--dark_red); }
    .bg_orange { background-color: var(--orange); }
    .bg_steal { background-color: var(--steal); }
    .bg_purple { background-color: var(--purple); }
    .bg_mint { background-color: var(--mint); }
    .bg_peach { background-color: var(--peach); }
    .bg_surface { background-color: var(--surface); }
    .bg_beige { background-color: var(--beige); }
    .bg_sky{ background-color: var(--sky); }
.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_7 { background-color: var(--gray_7); }
    .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_f1 { background-color: var(--gray_f1); }
.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}

.fixed_top75 { position: fixed !important; top:75px;}


/*디스플레이*/
.CenCen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.flexwrap { display: flex; align-items: center; flex-wrap: wrap; }	
.d_flex { display: flex; }
.d_inline_flex { display: inline-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: 1; }
.asp_1{aspect-ratio: 1 / 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; }

.ta_l { text-align: left; }
.ta_cen { text-align: center; }
.ta_r { text-align: right; }

/*그림자*/
.shadow { box-shadow: 0 0.2rem 0.4rem 0rem rgba(0,0,0,0.15); }
.shadow_strong { box-shadow: 0 0.25rem 0.8rem 0.15rem rgba(0,0,0,0.25); }
.shadow_blue { box-shadow: 0 0.2rem 0.7rem 0.2rem  rgba(0,93,191,0.15);}
.img_shadow{filter: drop-shadow(0 0.2rem 0.2rem rgba(0,0,0,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); }

/* 테이블 스타일 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; }



/* 숫자 */
:root{
  --num-size: 3.125rem;      /* 숫자 폰트 크기 */
  --line-color:#a2b4d7;    /* 대각선/마스크 상단 보더 컬러 */
  --mask-w: .70em;         /* 종이 마스크 너비 */
  --mask-h: .75em;         /* 종이 마스크 높이 */
  --mask-rotate: -35deg;   /* 종이 기울기 */
  --mask-skew: -35deg;     /* 종이 사선 느낌(기울이기) */
}
.num{ position: relative; display: inline-block; color:#c9d5ede6; font-size: var(--num-size);  line-height: 1; letter-spacing: .01em; z-index: 1; padding: .25em; width: fit-content; font-family: "Chivo Mono", monospace; font-weight: 600;}  
/* 숫자 사선 가리개 */
.num::after{ content:""; position: absolute; right: .125em; bottom: -.25em; width: var(--mask-w); height: var(--mask-h); background: var(--white); border-top: 1pt solid var(--line-color); transform-origin: right bottom; transform: rotate(var(--mask-rotate)) skewX(var(--mask-skew)); z-index: 2; pointer-events: none; }
.num_cont{ width:100%; }

/* 스퀘클 */
.squircle{
    outline: none;
	border: none;
	--squircle-smooth: 0.6;
	--squircle-radius:  var(--br_xl); 
}
.fill {
	background: black;
	color: white;
	mask-image: paint(squircle);
}

.outline {
	background: paint(squircle);
	--squircle-outline: 2px;
	--squircle-fill: black;
}

.gradient {
	background: linear-gradient(122.37deg, #FF0000 6.31%, #00FFA3 85.76%);
	mask-image: paint(squircle);
	color: white;
}

/* .shadow {
	background: paint(squircle);
	--squircle-fill: #E1FFF2;
	filter: drop-shadow(-1px 10px 10px #a198b1);
} */

.image {
	color: white;
	mask-image: paint(squircle);
	background-color: #8321ff;
	background-image: url(https://pavellaptev.github.io/squircle-houdini-css/static/media/zebra.085af00e.png)
}
/* ==================== 모바일 레이아웃 ==================== */ 
@media ( max-width: 1380px ) { 
}
@media ( max-width: 1280px ) { 
    .fdc_lg{flex-direction: column;}
}
@media ( max-width: 900px ) { 
	:root {
		--sec_pd: 5rem;
	}
    .fdc_md{flex-direction: column;}
}
@media ( max-width: 600px ) { 
    .fdc_sm{flex-direction: column;}
}
@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 gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;	}
	100% {background-position: 0% 50%;}
}
@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;
}

/* 화살표 */
.GoConsult_container {
	position: relative;
	width: 24px;
	height: 24px;
}

.arrow {
	position: absolute;
	width: 32px;
	height: 6px;
	opacity: 0;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
}

.arrow:first-child {
	animation: move 3s ease-out 1s infinite;
}

.arrow:nth-child(2) {
	animation: move 3s ease-out 2s infinite;
}

.arrow:before,
.arrow:after {
	content: ' ';
	position: absolute;
	top: 0;
	background:#4377e8;	
	height: 100%;
	width: 50.1%;
}

.arrow:before {
	left: 0;
	transform: skew(0deg, 27deg);
}

.arrow:after {
	right: 0;
	width: 50%;
	transform: skew(0deg, -27deg);
}

@keyframes pulse {
	to {
		opacity: 1;
	}
}

@keyframes move {
	25% {
		opacity: 1;
	}

	33% {
		opacity: 1;
		transform: translateY(30px);
	}

	67% {
		opacity: 1;
		transform: translateY(40px);
	}

	100% {
		opacity: 0;
		transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
	}
}    

@keyframes animate {from {opacity: 0;transform: translate(0, 100px);filter: blur(33px);}to {opacity: 1;transform: translate(0);filter: blur(0);}}
/* ==================== 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;
    }
}