/* =========================================================================================
 * [폰트 로드 및 신규 변수 추가]
 * =========================================================================================*/

/* Pretendard (기본) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* Figtree & Marcellus (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;600&family=Marcellus&display=swap');
@import url("https://use.typekit.net/zwc1hzb.css");

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%; /* 풀스크린의 기본입니다 */
    overflow: hidden; /* 스크롤바 때문에 밀리는 거 방지 */
	letter-spacing: 0.8;
}

* {
    box-sizing: border-box; /* 패딩 때문에 높이 늘어나는 거 방지 */
}


input::placeholder {
    color: var(--color-placeholder);
    font-size: var(--fz-placeholder);
    font-weight: 300; /* 시안처럼 약간 얇게 처리 */
	letter-spacing: 0;
	line-height: var(--fz-placeholder);
	vertical-align: middle;
}

:root {
    /* --- 영문 포인트 폰트 변수 --- */
    --font-ivy: 'ivypresto-headline', serif;
    --font-fig: 'Figtree', sans-serif;
    --font-mar: 'Marcellus', serif;
	
	--fz-placeholder: 18px;      /* 플레이스홀더 폰트 사이즈 */
    --color-placeholder: #a9a9a9; /* 플레이스홀더 컬러 (시안의 연회색) */

    /* --- 기존 공통 스타일 변수 --- */
    --font-style-normal: normal;
    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;
    --font-weight-m: m;
    --font-weight-normal: normal;
    --font-weight-bold: bold;

    --font-size-s-1: 15px;
    --font-size-s-2: 16px;
    --font-size-s-3: 17px;
    --font-size-s-4: 18px;
    --font-size-m-1: 20px;
    --font-size-m-2: 22px;
    --font-size-m-3: 24px;
    --font-size-m-4: 26px;
    --font-size-m-5: 28px;
    --font-size-l-1: 30px;
    --font-size-l-2: 32px;
    --font-size-l-3: 34px;
    --font-size-l-4: 38px;
    --font-size-xl-1: 40px;
    --font-size-xl-2: 45px;
    --font-size-xl-3: 50px;
    --font-size-xxl-1: 60px;
    --font-size-xxl-2: 70px;
    --font-size-xxl-3: 80px;
	--font-size-xxl-4: 86px;
	--font-size-xxl-5: 100px;
	
	--sub-padding-100:100px 0;
	--sub-padding-110:110px 0;
	--sub-padding-120:120px 0;
	--sub-padding-150:150px 0;
	

    /* (중간 수치 변수들 생략 없이 그대로 유지) */
    --margin-space: 160px;
    --point-gold: #cc9c5e; 
    --white-100:#fff;
    --black1:#111;
}

/* --- 영문 전용 클래스 --- */
.font-ivy { font-family: var(--font-ivy) !important; }
.font-fig { font-family: var(--font-fig) !important; }
.font-mar { font-family: var(--font-mar) !important; }

.row{
	--bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc( var(--bs-gutter-x)* .0);
    margin-left: calc(var(--bs-gutter-x) * .0);
}
.row>*{padding-right: calc(var(--bs-gutter-x) * .0);    padding-left: calc(var(--bs-gutter-x) * .0);}
.col-2{flex: 0 0 auto; width: 50%;}
.col-3{width: calc(33.333% - 20px); margin:0 10px;}

strong{font-weight:600}
p{margin-bottom:30px;}
p:last-child{margin-bottom:0}

.br{display:block;}
.m_br{display:none;}
.break{display: block}
.t_br{display:none;}

/* margin */
.mt_10{margin-top:10px;}
.mt_20{margin-top:20px;}
.mt_30{margin-top:30px;}
.mt_40{margin-top:40px;}
.mt_50{margin-top:50px;}
.mt_60{margin-top:60px;}
.mt_70{margin-top:70px;}
.mt_80{margin-top:80px;}
.mt_90{margin-top:90px;}
.mt_100{margin-top:100px;}
.mt_120{margin-top:120px;}
.mt_150{margin-top:150px;}
.mt_180{margin-top:180px;}
.mt_200{margin-top:200px;}
.mg_space{margin:160px 0;}

.mb_0{margin-bottom:0!important}
.mt_0{margin-top:0!important}

/* padding */


.pt_10{padding-top:10px;}
.pt_20{padding-top:20px;}
.pt_30{padding-top:30px;}
.pt_40{padding-top:40px;}
.pt_50{padding-top:50px;}
.pt_60{padding-top:60px;}
.pt_70{padding-top:70px;}
.pt_80{padding-top:80px;}
.pt_90{padding-top:90px;}
.pt_100{padding-top:100px;}
.pt_120{padding-top:120px;}
.pt_150{padding-top:150px;}
.pt_180{padding-top:180px;}
.pt_200{padding-top:200px;}
.pd_space_40{padding:40px 0;}
.pd_space_50{padding:50px 0;}
.pd_space_60{padding:60px 0;}
.pd_space_80{padding:80px 0;}
.pd_space_100{padding:100px 0;}
.pd_space_150{padding:150px 0;}
.pd_space_180{padding:180px 0;}

.pb_0{padding-bottom:0px!important;}
.pb_10{padding-bottom:10px;}
.pb_20{padding-bottom:20px;}
.pb_30{padding-bottom:30px;}
.pb_40{padding-bottom:40px;}
.pb_50{padding-bottom:50px;}
.pb_60{padding-bottom:60px;}
.pb_70{padding-bottom:70px;}
.pb_80{padding-bottom:80px;}
.pb_90{padding-bottom:90px;}
.pb_100{padding-bottom:100px;}
.pb_120{padding-bottom:120px;}
.pb_150{padding-bottom:150px;}
.pb_180{padding-bottom:180px;}
.pb_200{padding-bottom:200px;}
	
:root{
/* etc style */
--radius-8: 8px;
--radius-20: 20px;
--radius-30: 30px;
--radius-100: 100px;
--radius-300: 300px;
	}	

/* ani */
.ani_top{position:relative;opacity:0;top:25px;transition:1s; transition-delay:0.15s;}
.ani_top.move{opacity:1;top:0;}
.ani_left{position:relative;opacity:0;left:-100px;transition:1s; transition-delay:0.15s;}
.ani_left.move{opacity:1;left:0;}
.ani_right{position:relative;opacity:0;right:-100px;transition:1s; transition-delay:0.15s;}
.ani_right.move{opacity:1;right:0;}
.ani_down{position:relative;opacity:0;top:-25px; transition:1s; transition-delay:0.15s;}
.ani_down.move{opacity:1;top:0;}

.ani_br{position:relative; border-radius:0; transition:1s; transition-delay:3s!important;}
.ani_br.move{border-radius:20px;}

.trans_d1{ transition-delay:0.2s;}
.trans_d2{transition-delay:0.25s;}
.trans_d3{transition-delay:0.3s;}
.trans_d4{transition-delay:0.35s;}
.trans_d5{transition-delay:0.4s;}
.trans_d6{transition-delay:0.45s;}


.trans_d600{transition:.8s; transition-delay:0.6s;}
.trans_d700{transition:.8s; transition-delay:0.7s;}
.trans_d800{transition:.8s; transition-delay:0.8s;}
.trans_d900{transition:.8s; transition-delay:0.9s;}
.trans_d1000{transition:.8s; transition-delay:1s;}
.trans_d1100{transition:.8s; transition-delay:1.1s;}
.trans_d1200{transition:.8s; transition-delay:1.2s;}

/* =========================================================================================
 * [공통 스타일 초기화]
 * =========================================================================================*/
body { 
    font-family: 'Pretendard', sans-serif; /* 기본 폰트 고정 */
    font-size: 16px; 
    color: #fff; 
    line-height: 1.6; 
}

header {
    position: absolute; /* 영상 위에 띄우기 위해 absolute */
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.3); /* 초기엔 투명 */
    z-index: 100; /* 영상이나 텍스트보다 위에 위치 */
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Fullpage Layout --- */
#fullpage {
    width: 100%;
    
}

/*.section { 
    width: 100%; 
    height: 100vh !important; 
    min-height: 960px; 
    position: relative; 
    overflow: hidden; 
}*/


@media (max-width: 1280px) {
    :root {
	--font-size-m-1: 18px;
	--font-size-m-2: 18px;
	--font-size-m-3: 22px;
	--font-size-m-4: 24px;
	--font-size-m-5: 24px;
    --font-size-l-1: 26px;
    --font-size-l-2: 28px;
	--font-size-l-3: 30px;

    --font-size-xl-1: 34px;
    --font-size-xl-2: 40px;
    --font-size-xl-3: 45px;
	--font-size-xxl-1:52px;
	--font-size-xxl-2: 60px;
	--font-size-xxl-3: 68px;
    }
 }

 @media (max-width: 1024px) {
 :root {
	 
	--sub-padding-120:60px 0;
	--container-padding: 0 30px!important;
 	}
	 
	
 }

 @media (max-width: 991px) {
	 .br{display:none;}	
	.m_br{display:none;}	
	 .t_br{display:block;}
    :root {
    --font-size-s-1: 14px;
    --font-size-s-2: 15px;
    --font-size-s-3: 16px;
    --font-size-m-1: 18px;
    --font-size-m-2: 20px;
	--font-size-m-3: 22px;
	--font-size-m-4: 22px;
	--font-size-m-5: 22px;
    --font-size-l-1: 22px;
    --font-size-l-2: 24px;
	--font-size-l-3: 28px;
    --font-size-xl-1: 30px;
    --font-size-xl-2: 32px;
    --font-size-xl-3: 38px;
	--font-size-xxl-1:45px;
	--font-size-xxl-2: 52px;
	--font-size-xxl-3: 60px;	
		
    --margin-space: 120px;
	--margin-top-10: 5px;
    --margin-top-20: 10px;
    --margin-top-30: 30px;
    --margin-top-40: 20px;
    --margin-top-50: 30px;
		
	--sub-padding-20: 10px 0;
    --sub-padding-30: 15px 0;
    --sub-padding-40: 20px 0;
    --sub-padding-50: 30px 0;
    --sub-padding-60: 40px 0;
    --sub-padding-80: 60px 0;
    --sub-padding-100: 80px 0;
    --sub-padding-120: 60px 0;
    --sub-padding-150: 120px 0;
    --sub-padding-180: 80px 0;
    --sub-padding-200: 100px 0;
		
	--padding-20: 10px;
    --padding-30: 20px;
    --padding-40: 20px;
    --padding-50: 30px;
    --padding-60: 30px;
    --padding-70: 30px;
    --padding-80: 40px;
    --padding-100: 50px;
    --padding-120: 60px;
    --padding-150: 70px;
    --padding-180: 80px;
		
	--container-padding: 0 20px;	
    }
   
 }

 @media (max-width: 820px) {
	 .mt_80{margin-top:60px;}

	 .row-space{margin-top:60px!important;}
	  header { height: 50px; }
	 
	 :root{
		 
		 --fz-placeholder: 16px; 
	 }
}
 @media (max-width: 768px) {
    :root {
        --margin-space: 80px;
		--sub-padding-150:80px 0;
		--padding-80:60px;
		--container-padding: 0 10px;
    
		--font-size-ss-4: 11px;
        --font-size-s-1: 12px;
        --font-size-s-2: 14px;
        --font-size-s-3: 15px;
		--font-size-s-4: 16px;
        --font-size-m-1: 17px;
        --font-size-m-2: 18px;
        --font-size-m-3: 19px;
		--font-size-m-4: 20px;
		--font-size-m-5: 23px;
		--font-size-l-1: 20px;
		--font-size-l-2: 22px;
		--font-size-l-3: 24px;
		--font-size-l-4: 26px;
        --font-size-xl-1: 28px;
		--font-size-xl-2: 30px;
        --font-size-xl-3: 32px;
		--font-size-xxl-1:35px;
		--font-size-xxl-2:38px;
		--font-size-xxl-3: 46px;
		
		
		/* margin */
		--margin-top-10: 5px;
		--margin-top-20: 10px;
		--margin-top-30: 15px;
		--margin-top-40: 20px;
		--margin-top-50: 25px;
		--margin-top-60: 35px;
		--margin-top-80: 40px;
		--margin-bottom-0:0px;
        --margin-space: 100px;
		
		
		
		--padding-150:80px;
	 }
	 .pd_space_60{padding:30px 0}
	 .pd_space_80{padding:40px 0}
	 
	 .mt_30{margin-top:10px;}
	 .mt_40{margin-top:20px;}
	 .mt_50{margin-top:30px;}
	 .mt_60{margin-top:30px;}
	 .mt_80{margin-top:40px;}
	 .mt_100{margin-top:60px;}
	 
	 .pt_30{padding-top:20px}
	 
	
	 
	 .row-space{margin-top:30px!important;}
	 
	 .br{display:none;}	
	.m_br{display:block;}	
	 .t_br{display:none;}
	 

	 
}
/* 모바일 (820px) 대응 */
/* 820px 이하 모바일 환경에서 AOS 효과 강제 해제 */
@media (max-width: 820px) {
    [data-aos^="fade"][data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* 햄버거 메뉴 레이어가 쏟아지는 현상 방어 */
    header nav, .menu_wrap, .mobile_menu { 
        display: none; /* 일단 닫아두고 스크립트로만 열리게 고정 */
        opacity: 1 !important;
        transform: none !important;
    }
}

/*TOP 버튼*/
.quick_btn_wrap {
    position: fixed !important; /* 브라우저 창에 절대 고정 */
    bottom: 40px !important;    /* 캡처 피드백 반영: 바닥에서 더 띄움 */
    right: 40px !important;     /* 우측 여백 */
    z-index: 999999 !important; /* 최상단 레이어 보장 */
    
    /* 풀페이지의 transform 가속으로 인한 위치 이탈 방지 */
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0);

    /* 처음엔 숨기고 .on 클래스가 붙을 때 나타나게 설정 */
    opacity: 1;
    visibility: visible !important;
    transition: all 0.4s ease;
}

/* 스크립트와 연동되어 나타나는 상태 */
.quick_btn_wrap.on {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 버튼 영역 - 이미지 자체가 완성형이므로 박스 스타일 최소화 */
.quick_btn_wrap a {
    width: 54px; /* 이미지 100%를 위해 크기를 살짝 키움 (취향껏 조절) */
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 이미지 자체에 디자인이 있으므로 shadow는 선택사항입니다. 
       시안처럼 깔끔하게 가려면 아래 shadow를 주석처리 하셔도 좋습니다. */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    border-radius: 50%; /* 호버 시 배경색 등을 위해 유지 */
    transition: transform 0.3s ease;
}

/* 이미지 - 부모 크기에 맞춰 100% */
.quick_btn_wrap a img {
    width: 100%;
    height: auto;
    display: block;
}

/* 호버 시 살짝 떠오르는 효과 */
.quick_btn_wrap a:hover {
    transform: translateY(-5px);
}

/* 모바일 대응 (820px 이하) */
@media (max-width: 820px) {
    .quick_btn_wrap {
        bottom: 30px !important;
        right: 20px !important;
    }
    .quick_btn_wrap a {
        width: 46px; /* 모바일에서 적당한 사이즈 */
        height: 46px;
    }
}