﻿@charset "utf-8"; :root {
/* 트랜지션 */
--transition: 0.15s ease-in; /* 패딩,마진 */
--sec_pd: 7rem; /* 모서리 곡률 */
--br_01: 50px; 
--br_02: 20px; /* 컬러 */
--red: #EA002C; 
--red_light: #ff98ab; 
--red_dark: #c80026; 
--orange: #FF7A00; 
--gray3:#333333; 
--gray6:#666666; 
--gray9:#999999; 
--light_gray:#B9B9B9; 
--light_gray_hover: #E5E5E5; 
--brt_gray:#EFEFEF; 
--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(--red) 40%, var(--orange) 65%); 
--gradientRB: linear-gradient(to right bottom, var(--red), var(--orange)); 
/*폰트*/
/*--base-font-size: 16px;*/
--base-font-size: 1rem; /* 16px */
--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_red{
	border: 1px solid var(--red); /*line-height: 0.8!important;*/
}
.border_org{
	border: 1px solid var(--orange); /*line-height: 0.8!important;*/
}

/*색상*/
.bg_grd_orange{
	background-image:  linear-gradient(to bottom, var(--white), #ffe5cc); 
}
.bg_grdR{
	background-image: var(--gradientR);
}
.bg_grdRB{
	background-image: var(--gradientRB);
}
.bg_gray{
	background-color: #f5f5f5; }
.bg_red{
	background-color: var(--red); }
.bg_gray2{
	background-color: #efefef; }
.bg_gray3{
	background-color: #e6e6e6; }
.round{
	border-radius: var(--br_01); }
.roundS{
	border-radius: var(--br_02); }

.btn_pd{	
	padding: 0.65rem 1rem 0rem; 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_red{ color: var(--red)!important;}
.fc_orange{	color: var(--orange);}
.fc_white{	color: var(--white);}
/*베이직*/
.bold{ font-weight: 700;}

.gray3{	color: var(--gray3);}
.gray6{	color: var(--gray6);}
.gray9{	color: var(--gray9);}

/* PC용 폰트 크기 */
.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_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;}
.ta_l{text-align: left;}
.ta_cen{text-align: center;}
.ta_r{text-align: right;}
.shadow{box-shadow: 0 0rem 0.25rem 0 rgba(0,0,0,0.1);}
.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(-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
}
.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); }
@keyframes MyScale {
    from {
        transform: scale(1.2) translateY(-100px); opacity: 0; }
    to {
        transform: scale(1) translateY(0px);  opacity: 1; }
}
.MyScale_text {
  animation: MyScale 1.5s; 
}
@keyframes MyScale2 {
    0%,30% {
        transform: scale(0); opacity: 0; }
    100% {
        transform: scale(1);  opacity: 1; }
}
.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; }
@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초 간격으로 무한 반복 */
}
/* ==================== 모바일 레이아웃 ==================== */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
	}
}


