.mainWrap *{
    line-height: 100%;
    letter-spacing: -1px;
    box-sizing: border-box;
}

.disN{
	display:none;
}
.slick-slide img{
    width:100%;
}

/*-------------- header (공통 스타일은 header.css) --------------- */
/* 메인 페이지: 인트로가 끝날 때 나타남 (.intro_play #header 참고) */
#header{
    opacity: 0;
}

.mainWrap{
    width: 100%;
	position:relative;
}
body,html{
    max-width: 1920px !important;
    margin:0 auto !important;
}

body::-webkit-scrollbar {
    display: none;
}

.sec .fp-tableCell{
    width: 100%;
}

.mainWrap .Slider, .mainWrap .Slider .slick-list, .mainWrap .slick-track{
	height:100%;
    clear: both;
}

/*-------------- loading --------------- */
.loading{
    width:100%;
    height:100%;
    position:fixed;
    left:0px;
    top:0px;
    background:#C9962E;
    z-index:1000;
}

.main_loader{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular_loader {
    animation: rotate 2s linear infinite;
    height: calc(100% + 40px);
    transform-origin: center center;
    width: calc(100% + 40px);
    position: absolute;
    top: -20px;
    left: -20px;
    margin: auto;
}

.loader_path {
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -10;
    animation: dash_circle 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash_circle {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}


/*-------------- main_intro --------------- */
body.intro_lock{overflow:hidden;}

.intro_play{--skip:0s;}
.intro_skip{--skip:3.6s;}

/*
  카메라 인트로 타임라인
  0.0s  흐린 로고 등장
  0.3s  정사각형 뷰파인더가 로고를 왼쪽 위→오른쪽 아래로 스캔 (선명한 로고는 뷰파인더 안에서만 보임)
  1.98s 뷰파인더가 로고 전체로 커짐
  2.5s  찰칵 (플래시 + 뷰파인더 펄스) → 로고 전체 선명
  3.4s  로고 아웃 → 3.6s 배경 아웃 → 4.6s 인트로 종료
*/
.intro_wrap{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:#C9962E;}
.intro_logo{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.intro_logo_box{position:relative;width:320px;}

/* 인트로 테스트 모드: 배경을 유지하고 메인 화면으로 넘어가지 않음 */
.intro_test .intro_wrap{animation:none !important;}

/* white.png 안의 실제 로고 영역: 가로 29.8%~72.4%, 세로 18%~83% */
.intro_logo_base{display:block;width:100%;opacity:0;filter:blur(3px);}
.intro_logo_fill{position:absolute;top:0;left:0;width:100%;clip-path:inset(14.5% 51% 51.5% 15%);opacity:0;will-change:clip-path;}
.intro_cam{
    position:absolute;
    /* 박스(white.png)가 정사각형이라 width/height 같은 %면 정사각형 */
    left:15%; top:14.5%; width:34%; height:34%;
    opacity:0;
    --c: #fff; --l: 18px; --t: 2px;
    background:
        linear-gradient(var(--c),var(--c)) top left    / var(--l) var(--t) no-repeat,
        linear-gradient(var(--c),var(--c)) top left    / var(--t) var(--l) no-repeat,
        linear-gradient(var(--c),var(--c)) top right   / var(--l) var(--t) no-repeat,
        linear-gradient(var(--c),var(--c)) top right   / var(--t) var(--l) no-repeat,
        linear-gradient(var(--c),var(--c)) bottom left / var(--l) var(--t) no-repeat,
        linear-gradient(var(--c),var(--c)) bottom left / var(--t) var(--l) no-repeat,
        linear-gradient(var(--c),var(--c)) bottom right/ var(--l) var(--t) no-repeat,
        linear-gradient(var(--c),var(--c)) bottom right/ var(--t) var(--l) no-repeat;
    pointer-events:none;
}
.intro_flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;}

.intro_play .intro_logo_base{animation:cam_base 3.4s ease both;}
.intro_play .intro_logo_fill{animation:cam_clip 2.4s .3s cubic-bezier(.65,0,.35,1) both;}
.intro_play .intro_cam{animation:cam_frame 2.4s .3s cubic-bezier(.65,0,.35,1) both, cam_shot .5s 2.5s ease-out both;}
.intro_play .intro_flash{animation:cam_flash .5s 2.5s ease-out both;}
.intro_play .intro_logo{animation:intro_logo_out .4s 3.4s cubic-bezier(.55,0,1,.45) both;}
.intro_skip .intro_logo,
.intro_skip .intro_flash{animation:none;opacity:0;}
.intro_play .intro_wrap{animation:intro_bg_out 1s calc(3.6s - var(--skip)) ease-in-out forwards, intro_end .01s calc(4.6s - var(--skip)) forwards;}

.intro_play .mainVisual .bg{animation:mainVisual_bg 3s calc(3.9s - var(--skip)) cubic-bezier(.25,.46,.45,.94) backwards;}
/* 헤더: 메인 배경이 나타날 때 함께 등장 */
.intro_play #header{animation:fadeIn .9s calc(3.9s - var(--skip)) forwards;}
/* 인트로 생략 시 (index.html#secN 으로 진입) 헤더 바로 표시 */
.intro_none #header{opacity:1;}
.intro_play .mainVisual .slogan{animation:intro_up .9s calc(4.4s - var(--skip)) cubic-bezier(.215,.61,.355,1) backwards;}
.intro_play .mainVisual .title{animation:intro_up .9s calc(4.58s - var(--skip)) cubic-bezier(.215,.61,.355,1) backwards;}
.intro_play .mainVisual .en_slogan{animation:intro_up .9s calc(4.76s - var(--skip)) cubic-bezier(.215,.61,.355,1) backwards;}

.skip_cursor,
.skip_btn_m{
    display:none;
    position:fixed;
    z-index:10;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.75);
    border-radius:50%;
    background:#0b0b0e;
    color:#fff;
    font-family:"Pretendard", sans-serif;
    font-weight:600;
}

.skip_cursor{
    top:0;
    left:0;
    width:80px;
    height:80px;
    margin:-60px 0 0 -60px;
    padding:0 0 0 .2em;
    font-size:14px;
    letter-spacing:.2em;
    pointer-events:none;
    opacity:0;
}
.skip_cursor.on{
    opacity:1;
    scale:1;
    transition:opacity .3s ease, scale .3s cubic-bezier(.22,.61,.36,1);
}

.skip_btn_m{
    right:20px;
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    padding:8px 15px;
    font-size:12px;
    letter-spacing:.15em;
    cursor:pointer;
    border-radius:36px;
    font-weight:500;
}
.intro_play .skip_btn_m{animation:skip_out .3s calc(3.6s - var(--skip)) both;}

@media (min-width:1081px) and (hover:hover) and (pointer:fine){
    .skip_cursor{display:flex;}
    .intro_wrap.skip_on{cursor:none;}
}
@media (max-width:1080px), (hover:none){
    .skip_btn_m{display:flex;}
}

/* 흐린 로고: 등장 → 찰칵 순간 사라짐(선명한 로고가 전체를 덮음) */
@keyframes cam_base{
    0%{opacity:0;}
    12%{opacity:.35;}
    73%{opacity:.35;}
    76%,100%{opacity:0;}
}
/* 선명한 로고: 뷰파인더와 같은 영역만 보이도록 clip (inset = top right bottom left) */
@keyframes cam_clip{
    0%{opacity:0;clip-path:inset(14.5% 51% 51.5% 15%);}
    6%{opacity:1;}
    62.5%,70%{opacity:1;clip-path:inset(52.5% 13% 13.5% 53%);}
    90%,100%{opacity:1;clip-path:inset(14.5% 13% 13.5% 15%);}
}
/* 정사각형 뷰파인더: 최종 큰 정사각형(left 15% / top 14.5% / 72%) 범위 안에서
   왼쪽 위 끝 → 오른쪽 아래 끝까지 대각선 이동 → 잠깐 멈춤 → 큰 정사각형으로 확대 */
@keyframes cam_frame{
    0%{opacity:0;left:15%;top:14.5%;width:34%;height:34%;}
    6%{opacity:1;}
    62.5%,70%{opacity:1;left:53%;top:52.5%;width:34%;height:34%;}
    90%,100%{opacity:1;left:15%;top:14.5%;width:72%;height:72%;}
}
/* 찰칵: 살짝 눌렸다 튕기며 사라짐 */
@keyframes cam_shot{
    0%{transform:scale(1);opacity:1;}
    25%{transform:scale(.95);opacity:1;}
    100%{transform:scale(1.08);opacity:0;}
}
@keyframes cam_flash{
    0%{opacity:0;}
    15%{opacity:.85;}
    100%{opacity:0;}
}
@keyframes intro_logo_out{
    from{opacity:1;transform:scale(1);}
    to{opacity:0;transform:scale(1.05);}
}
@keyframes intro_bg_out{
    from{background:#C9962E;}
    to{background:rgba(201,150,46,0);}
}
@keyframes intro_end{
    0%{visibility:visible;pointer-events:auto;}
    100%{visibility:hidden;pointer-events:none;}
}
@keyframes intro_up{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
@keyframes skip_out{to{opacity:0;visibility:hidden;}}


/*-------------- mainVisual --------------- */
.mainVisual {
    width: 100%;
    position: relative;
    height: 100%;
    display:flex;
    align-items: center;
    overflow: hidden;
}
.mainVisual .content{
    position: relative;
}
.mainVisual .wrap {
    transition: 2s all;
}
body.fp-viewing-sec2 .mainVisual .wrap {
    opacity: 0;
    transform: translateY(50%) scale(1.5);
    pointer-events: none;
}

.mainVisual .bg {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    background: url(../images/main.png) center bottom / cover no-repeat;
    z-index:-1;
}
/* 문구 뒤를 은은하게 밝혀주는 흰빛 그라데이션 (문구 위치: 상단 20% / 우측 25% 기준) */
.mainVisual .bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 38% 40% at 63% 28%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%),
        linear-gradient(to bottom, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%);
}

@keyframes mainVisual_bg{
    0%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(1);
    }
}

.mainVisual .text {
	position: absolute;
    top: 20%;
    right: 21%;
    color: #ffd16d;
	text-align: center;
}
.mainVisual .text .slogan{
	font-size: 32px;
	font-weight: 600;
    color: #333;
    margin-bottom: 3%;
}
.mainVisual .text .title{
	font-size: 68px;
    font-weight: 600;
    color: #C9962E;
	margin-bottom: 5%;
}

/*-------------- common --------------- */
.section .wrap {
    width: 100%;
    height: 100%;
    margin-top: 0;
}
.section .content {
    width: 100%;
    height: 100%;
}

/*-------------- intro (영상) --------------- */
.section.intro .wrap .content{
	display: flex;
}
/* 영상 왼쪽 / 문구 오른쪽 (첫 줄이 왼쪽) */
.section.intro .text{
	order: 2;
	flex: 0 0 10%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding-top: 10%;
    background: #fff;
}
.section.intro .text .con{
	writing-mode: vertical-rl;
	font-size: 22px;
	line-height: 1.4;
	letter-spacing: .1em;
	word-spacing: .5em;
	color: #222;
	font-weight:600;
	--d: 0s;
}
.section.intro .text .con:nth-child(2){--d: .35s;}

.section.intro .image{
	flex: 1;
	height: 100%;
	overflow: hidden;
}
.section.intro .image video{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 애니메이션: 영상은 왼쪽→오른쪽 커튼 wipe, 문구는 줄 단위로 위→아래 마스크 reveal */
.section.intro .image{
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0s 1s;
}
.section.intro .image video{
	transform: scale(1.1);
	transition: transform 0s 1s;
}
.section.intro .text .con{
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transform: translateY(-14px);
	transition: clip-path 0s 1s, transform 0s 1s, opacity 0s 1s;
}

.section.intro.fp-completely .image{
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.6s cubic-bezier(.77,0,.18,1) .1s;
}
.section.intro.fp-completely .image video{
	transform: scale(1);
	transition: transform 2.8s cubic-bezier(.22,.61,.36,1) .1s;
}
.section.intro.fp-completely .text .con{
	opacity: 1;
	clip-path: inset(0 0 0 0);
	transform: translateY(0);
	transition:
		clip-path 1.4s cubic-bezier(.77,0,.18,1) calc(.9s + var(--d)),
		transform 1.4s cubic-bezier(.22,.61,.36,1) calc(.9s + var(--d)),
		opacity .4s ease-out calc(.9s + var(--d));
}

/*-------------- location --------------- */
.section.location {
    position: relative;
}
.section.location .wrap {
    margin: 0 auto;
	transition: 2s all;
}
.section.location .wrap .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 문구 */
.section.location .wrap .content .left {
	flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding-left: 8%;
    padding-right: 4%;
}
.section.location .wrap .content .left .text {
	color:#333333;
}
.section.location .wrap .content .left .text .sut_title {
	display: inline-block;
	background: #C9962E;
	color: #fff;
	font-size: 20px;
	font-family: "Pretendard", sans-serif;
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1;
	padding: 9px 16px 9px 18px;
	margin-bottom: 5%;
}
.section.location .wrap .content .left .text .explain {
	font-size: 25px;
	margin-bottom: 3%;
	font-weight: 400;
}
.section.location .wrap .content .left .text .slogan {
	font-size: 40px;
	font-weight: 600;
	margin-bottom: 10%;
	line-height: 120%;
}
.section.location .left .text .slogan .line{
	display: block;
	overflow: hidden;
	padding-bottom: .08em;
}
.section.location .left .text .slogan .line > span{
	display: inline-block;
}

/* 애니메이션: 라벨 박스가 좌→우로 펼쳐진 뒤 글자 등장 / 설명은 블러 해제 / 슬로건은 줄 단위 마스크 슬라이드업 */
.section.location .left .text .sut_title{
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0s 1s;
}
.section.location .left .text .sut_title .char{
	display: inline-block;
	opacity: 0;
	filter: blur(4px);
	transition: opacity 0s 1s, filter 0s 1s;
}
.section.location .left .text .explain{
	opacity: 0;
	filter: blur(8px);
	transform: translateX(-20px);
	transition: opacity 0s 1s, filter 0s 1s, transform 0s 1s;
}
.section.location .left .text .slogan .line > span{
	transform: translateY(105%);
	transition: transform 0s 1s;
}

.section.location.fp-completely .left .text .sut_title{
	clip-path: inset(0 0 0 0);
	transition: clip-path .7s cubic-bezier(.77,0,.18,1) .2s;
}
.section.location.fp-completely .left .text .sut_title .char{
	opacity: 1;
	filter: blur(0);
	transition:
		opacity .5s ease-out calc(.6s + var(--char-index) * .04s),
		filter .5s ease-out calc(.6s + var(--char-index) * .04s);
}
.section.location.fp-completely .left .text .explain{
	opacity: 1;
	filter: blur(0);
	transform: translateX(0);
	transition:
		opacity 1s ease-out .9s,
		filter 1s ease-out .9s,
		transform 1.2s cubic-bezier(.22,.61,.36,1) .9s;
}
.section.location.fp-completely .left .text .slogan .line > span{
	transform: translateY(0);
	transition: transform 1s cubic-bezier(.22,.61,.36,1) 1.15s;
}
.section.location.fp-completely .left .text .slogan .line:nth-child(2) > span{
	transition-delay: 1.3s;
}

/* 이미지 (오른쪽, 섹션 높이 꽉 채움) */
.section.location .wrap .content .right {
	flex: 0 0 60%;
	height: 100%;
	overflow: hidden;
}
.section.location .wrap .content .right .image {
	height: 100%;
}
/* 지도 이미지라 잘리지 않도록 contain */
.section.location .wrap .content .right .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* 애니메이션: 지도 위 '라클라쎄' 위치에서 원형으로 퍼지며 등장 */
.section.location .wrap .content .right .image img {
	clip-path: circle(0% at 74% 70%);
	transform: scale(1.06);
	transition: clip-path 0s 1s, transform 0s 1s;
}
.section.location.fp-completely .wrap .content .right .image img {
	clip-path: circle(150% at 74% 70%);
	transform: scale(1);
	transition:
		clip-path 2s cubic-bezier(.65,0,.35,1) .3s,
		transform 2.4s cubic-bezier(.22,.61,.36,1) .3s;
}

/*-------------- premium --------------- */
/* Lovelace Script 06 Italic (Zetafonts 유료 폰트)
   - PC에 설치돼 있으면 local()로 바로 사용
   - 웹에 올릴 땐 fonts/ 폴더에 LovelaceScript-06Italic.woff2 (또는 .woff/.otf/.ttf) 를 넣으면 적용
   - 파일이 없을 때만 임시로 Pinyon Script(무료 Google 필기체)로 보임 */
@font-face{
    font-family: "Lovelace Script";
    font-style: italic;
    font-weight: normal;
    src: local("Lovelace Script 06 Italic"),
         local("LovelaceScript-06Italic"),
         local("Lovelace Script Italic"),
         url(../fonts/LovelaceScript-06Italic.woff2) format("woff2"),
         url(../fonts/LovelaceScript-06Italic.woff) format("woff"),
         url(../fonts/LovelaceScript-06Italic.otf) format("opentype"),
         url(../fonts/LovelaceScript-06Italic.ttf) format("truetype");
    font-display: swap;
}

.section.premium{
    background: #fff;
}
.section.premium .wrap .content{
    display: flex;
}

/* 이미지 (왼쪽 50%) */
.section.premium .left{
    flex: 0 0 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.section.premium .pm_images{
    position: absolute;
    inset: 0;
}
.section.premium .pm_img{
    position: absolute;
    inset: 0;
    z-index: 0;
    /* 대각선 분할: 기울어진 경계선이 왼쪽→오른쪽으로 지나가며 새 이미지가 드러남 */
    clip-path: polygon(0 0, 0 0, -40% 100%, 0 100%);
    transition: clip-path 0s 1.3s;
}
.section.premium .pm_img img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
    transition: transform 0s 1.3s;
}
.section.premium .pm_img.is-prev{
    z-index: 1;
    clip-path: polygon(0 0, 140% 0, 100% 100%, 0 100%);
    transition: none;
}
.section.premium .pm_img.is-prev img{
    transform: scale(1);
    transition: none;
}
.section.premium .pm_img.is-active{
    z-index: 2;
    clip-path: polygon(0 0, 140% 0, 100% 100%, 0 100%);
    transition: clip-path 1.3s cubic-bezier(.77,0,.18,1);
}
.section.premium .pm_img.is-active img{
    transform: scale(1);
    transition: transform 2.4s cubic-bezier(.22,.61,.36,1);
}

/* 문구 (오른쪽) */
.section.premium .right{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 7%;
    position: relative;
}
.section.premium .pm_texts{
    position: relative;
    min-height: 420px;
}
.section.premium .pm_text{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: #333;
    pointer-events: none;
}
.section.premium .pm_title{
    display: inline-block;
    color: #C9962E;
    font-family: "Lovelace Script", "Pinyon Script", cursive;
    font-style: italic;
    font-size: 64px;
    line-height: 1.15;
    letter-spacing: 0;
    padding: 0 10px 6px 0;
    margin-bottom: 6%;
}
.section.premium .explain{
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 2%;
}
.section.premium .slogan{
    font-size: 38px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 3%;
}
.section.premium .tag{
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: #333;
    margin-bottom: 6%;
}

/* 문구 전환:
   - 타이틀: 이미지와 같은 대각선 경계로 쓱 그려지듯 등장
   - 나머지 줄: 오른쪽에서 왼쪽으로 미끄러지며 순서대로 등장 / 나갈 때는 왼쪽으로 빠지며 사라짐 */
.section.premium .pm_text > *{
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity .35s ease, transform .45s ease;
}
.section.premium .pm_text .pm_title{
    transform: none;
    clip-path: polygon(0 0, 0 0, -30% 100%, 0 100%);
    transition: opacity .35s ease, clip-path .35s ease;
}
.section.premium .pm_text.is-active{pointer-events: auto;}
.section.premium .pm_text.is-active > *{
    opacity: 1;
    transform: translateX(0);
    transition: opacity .7s ease-out, transform 1s cubic-bezier(.16,1,.3,1);
}
.section.premium .pm_text.is-active > :not(.pm_title){
    animation: pm_slide_in 1s cubic-bezier(.16,1,.3,1) both;
}
.section.premium .pm_text.is-active .pm_title{
    clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%);
    transition: opacity .2s ease-out .35s, clip-path 1.1s cubic-bezier(.77,0,.18,1) .35s;
}
.section.premium .pm_text.is-active > :nth-child(2){animation-delay: .75s;}
.section.premium .pm_text.is-active > :nth-child(3){animation-delay: .85s;}
.section.premium .pm_text.is-active > :nth-child(4){animation-delay: .95s;}
.section.premium .pm_text.is-active > :nth-child(5){animation-delay: 1.05s;}
@keyframes pm_slide_in{
    from{opacity: 0; transform: translateX(40px);}
    to{opacity: 1; transform: translateX(0);}
}

/* 로딩바 1개(반투명 회색 + 라운드 테두리) + 점 3개 */
.section.premium .pm_ctrl{
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 4%;
}
.section.premium .pm_progress{
    position: relative;
    width: 240px;
    height: 8px;
    border-radius: 999px;
    background: rgba(128,128,128,.15);
    border: 1px solid rgba(128,128,128,.3);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}
.section.premium .pm_progress .fill{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 999px;
    background: rgba(70,70,70,.55);
}
.section.premium .pm_progress.is-run .fill{
    width: 100%;
    transition: width var(--pm-dur, 5s) linear;
}
.section.premium .pm_dots{
    display: flex;
    gap: 10px;
}
.section.premium .pm_dot{
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(128,128,128,.35);
    cursor: pointer;
    transition: background .4s, transform .4s;
}
.section.premium .pm_dot.is-active{
    background: #333;
    transform: scale(1.25);
}

/*-------------- type (유닛 / 배치도, 2분할) --------------- */
.section.type{
    position: relative;
    overflow: hidden;
    background: #111;
}
.section.type .wrap .content{
    display: flex;
}
.section.type .type_box{
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.section.type .type_box .bg{
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* 탁하게: 채도/밝기를 낮춰 글자가 잘 보이도록 */
    filter: saturate(.75) brightness(.8);
    transition: transform 1.2s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
/* 어두운 막 (위아래로 살짝 더 어둡게) */
.section.type .type_box::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.3) 100%),
        rgba(0,0,0,.42);
    transition: background-color .6s ease;
    pointer-events: none;
}
/* 가운데 얇은 구분선 */
.section.type .type_box.unit::after{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,.18);
}
/* 마우스 올리면 해당 쪽만 살짝 밝아지며 확대 */
.section.type .type_box:hover .bg{
    transform: scale(1.04);
    filter: saturate(.9) brightness(.9);
}

.section.type .text{
    position: relative;
    z-index: 3;
    text-align: center;
    color: #fff;
}
.section.type .text .title{
    font-size: 44px;
    font-weight: 600;
    line-height: 1.3;
}
.section.type .text .title span{
    display: inline-block;
}
.section.type .text .explain{
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 22px;
    opacity: .9;
}

/* 자세히 보기 버튼: 금색 상자 + 흰 글씨 */
.section.type .btn_more{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 48px;
    padding: 18px 30px;
    background: #C9962E;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .3s ease;
}
.section.type .btn_more:hover{background: #b5841f;}

/* 등장 애니메이션:
   - 이미지: 왼쪽은 위→아래, 오른쪽은 아래→위로 커튼이 열리듯 드러남
   - 타이틀: 줄 마스크 안에서 위로 슬라이드업
   - 설명: 흐림이 풀리며 등장 / 버튼: 금색 상자가 왼→오로 펼쳐진 뒤 글자 등장 */
.section.type .type_box.unit .bg{clip-path: inset(0 0 100% 0);}
.section.type .type_box.plan .bg{clip-path: inset(100% 0 0 0);}
.section.type .type_box .bg{
    transform: scale(1.12);
    transition: clip-path 0s 1s, transform 0s 1s, filter .6s ease;
}
.section.type .text .title{overflow: hidden; padding-bottom: .08em;}
.section.type .text .title span{transform: translateY(105%); transition: transform 0s 1s;}
.section.type .text .explain{opacity: 0; filter: blur(8px); transition: opacity 0s 1s, filter 0s 1s;}
.section.type .btn_more{clip-path: inset(0 100% 0 0); transition: clip-path 0s 1s, background .3s ease;}
.section.type .btn_more .txt{opacity: 0; transition: opacity 0s 1s;}

.section.type.fp-completely .type_box .bg{
    clip-path: inset(0 0 0 0);
    transform: scale(1);
    transition: clip-path 1.3s cubic-bezier(.77,0,.18,1), transform 2.2s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.section.type.fp-completely .type_box.plan .bg{transition-delay: .15s, .15s, 0s;}
.section.type.fp-completely .type_box:hover .bg{transform: scale(1.04); transition: transform 1.2s cubic-bezier(.22,.61,.36,1), filter .6s ease;}
.section.type.fp-completely .text .title span{transform: translateY(0); transition: transform 1s cubic-bezier(.16,1,.3,1) .7s;}
.section.type.fp-completely .text .explain{opacity: .9; filter: blur(0); transition: opacity 1s ease-out .95s, filter 1s ease-out .95s;}
.section.type.fp-completely .btn_more{clip-path: inset(0 0 0 0); transition: clip-path .8s cubic-bezier(.77,0,.18,1) 1.2s, background .3s ease;}
.section.type.fp-completely .btn_more .txt{opacity: 1; transition: opacity .5s ease-out 1.75s;}
.section.type.fp-completely .plan .text .title span{transition-delay: .85s;}
.section.type.fp-completely .plan .text .explain{transition-delay: 1.1s, 1.1s;}
.section.type.fp-completely .plan .btn_more{transition-delay: 1.35s, 0s;}
.section.type.fp-completely .plan .btn_more .txt{transition-delay: 1.9s;}

/*-------------- customer (관심고객등록) --------------- */
.section.customer{
    background: #f7f4ee;
}
.section.customer .wrap .content{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8%;
    padding: 0 8%;
}
.section.customer .left{
    flex: 0 0 34%;
}
.section.customer .cs_sub{
    font-family: "Lovelace Script", "Pinyon Script", cursive;
    font-style: italic;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #C9962E;
}
.section.customer .cs_title{
    margin-top: 6px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.25;
    color: #222;
}
.section.customer .cs_desc{
    margin-top: 28px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: #555;
}
.section.customer .cs_tel{
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid rgba(0,0,0,.12);
    min-width: 260px;
}
.section.customer .cs_tel .label{
    font-size: 17px;
    font-weight: 600;
    color: #777;
}
.section.customer .cs_tel .num{
    font-family: "Pretendard", sans-serif;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #C9962E;
}

/* 폼 카드 */
.section.customer .right{
    flex: 0 1 600px;
}
.section.customer .cs_form{
    background: #fff;
    padding: 44px 48px 40px;
    box-shadow: 0 30px 60px -30px rgba(80,60,20,.25);
    border-top: 3px solid #C9962E;
}
.section.customer .field{
    margin-bottom: 26px;
}
.section.customer .field > label,
.section.customer .field > .label{
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.section.customer input[type="text"],
.section.customer input[type="tel"]{
    width: 100%;
    height: 50px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid #d8d2c6;
    background: transparent;
    font-family: inherit;
    font-size: 17px;
    color: #222;
    outline: none;
    border-radius: 0;
    transition: border-color .3s;
}
.section.customer input::placeholder{color: #b3ada2;}
.section.customer input[type="text"]:focus,
.section.customer input[type="tel"]:focus{border-bottom-color: #C9962E;}
.section.customer .field.is-error input{border-bottom-color: #d9534f;}

/* 라디오 (점으로 선택) */
.section.customer .radios{
    display: flex;
    gap: 36px;
}
.section.customer .radio{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
}
.section.customer .radio input,
.section.customer .agree input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.section.customer .radio .dot{
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #c9c2b5;
    border-radius: 50%;
    transition: border-color .3s;
}
.section.customer .radio .dot::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #C9962E;
    transform: translate(-50%,-50%) scale(0);
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.section.customer .radio input:checked + .dot{border-color: #C9962E;}
.section.customer .radio input:checked + .dot::after{transform: translate(-50%,-50%) scale(1);}

/* 개인정보 보호정책 */
.section.customer .privacy_box{
    height: 150px;
    overflow-y: auto;
    padding: 18px 20px;
    background: #faf8f4;
    border: 1px solid #ece6db;
    font-size: 13px;
    line-height: 1.7;
    color: #777;
}
.section.customer .privacy_box p{line-height: 1.7;}
.section.customer .privacy_box dl{margin-top: 12px;}
.section.customer .privacy_box dt{margin-top: 10px; font-weight: 600; color: #555; line-height: 1.6;}
.section.customer .privacy_box dd{line-height: 1.6;}
.section.customer .privacy_box::-webkit-scrollbar{width: 6px;}
.section.customer .privacy_box::-webkit-scrollbar-thumb{background: #d8d2c6; border-radius: 3px;}

.section.customer .field > label.agree,
.section.customer .agree{
    display: flex;
    margin-bottom: 0;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
}
.section.customer .agree b{color: #C9962E; font-weight: 700; margin-right: 4px;}
.section.customer .agree .box{
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #c9c2b5;
    transition: background .25s, border-color .25s;
}
.section.customer .agree .box::after{
    content: "";
    position: absolute;
    /* 칸 정중앙 기준 (체크 모양은 아래로 무거워 보여서 살짝 위로) */
    left: 50%;
    top: 50%;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    box-sizing: content-box;
    transform: translate(-50%, -62%) rotate(45deg) scale(0);
    transition: transform .2s;
}
.section.customer .agree input:checked ~ .box{background: #C9962E; border-color: #C9962E;}
.section.customer .agree input:checked ~ .box::after{transform: translate(-50%, -62%) rotate(45deg) scale(1);}
.section.customer .field.is-error .agree .box{border-color: #d9534f;}

/* 입력 안 한 항목: 빨간 경고 문구 */
.section.customer .err{
    display: none;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #d9534f;
}
.section.customer .err::before{
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    border-radius: 50%;
    background: #d9534f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: -2px;
}
.section.customer .field.is-error .err{
    display: block;
    animation: cs_shake .35s ease;
}
@keyframes cs_shake{
    0%,100%{transform: translateX(0);}
    25%{transform: translateX(-4px);}
    75%{transform: translateX(4px);}
}

.section.customer .cs_submit{
    display: block;
    width: 100%;
    height: 60px;
    margin-top: 8px;
    border: 0;
    background: #C9962E;
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .3s;
}
.section.customer .cs_submit:hover{background: #b5841f;}
.section.customer .cs_msg{
    min-height: 20px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.4;
    color: #d9534f;
    text-align: center;
}
.section.customer .cs_msg.is-ok{color: #C9962E;}

/* 등장: 왼쪽 문구는 왼쪽에서 밀려오고, 폼 카드는 아래에서 떠오름 */
.section.customer .left > *{
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0s 1s, transform 0s 1s;
}
.section.customer .cs_form{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0s 1s, transform 0s 1s;
}
.section.customer.fp-completely .left > *{
    opacity: 1;
    transform: translateX(0);
    transition: opacity .8s ease-out, transform 1s cubic-bezier(.16,1,.3,1);
}
.section.customer.fp-completely .left > :nth-child(1){transition-delay: .3s;}
.section.customer.fp-completely .left > :nth-child(2){transition-delay: .4s;}
.section.customer.fp-completely .left > :nth-child(3){transition-delay: .5s;}
.section.customer.fp-completely .left > :nth-child(4){transition-delay: .6s;}
.section.customer.fp-completely .cs_form{
    opacity: 1;
    transform: translateY(0);
    transition: opacity .9s ease-out .45s, transform 1.2s cubic-bezier(.16,1,.3,1) .45s;
}

/*-------------- 섹션 (임시) --------------- */
.section:not(.mainVisual):not(.footer):not(.intro):not(.location):not(.premium):not(.type):not(.customer) .content{
    display: flex;
    align-items: center;
    justify-content: center;
}
.section .sec_title{
    font-size: 48px;
    font-weight: 700;
    color: #333;
    text-align: center;
}



/*-------------- mobile --------------- */
@media(max-width:1080px){
	.intro_logo_box {width:210px;}
	.intro_cam {--l: 12px;}


	.section.type .wrap .content{flex-direction: column;}
	.section.type .type_box{flex: none; width: 100%; height: 60vh;}
	.section.type .type_box.unit::after{right: auto; top: auto; bottom: 0; width: 100%; height: 1px;}
	.section.type .text .title{font-size: 7vw;}
	.section.type .text .explain{font-size: 3.8vw; margin-top: 3vw;}
	.section.type .btn_more{margin-top: 7vw; padding: 3.6vw 6vw; font-size: 3.6vw;}


	.mainVisual {
		height:100vh;
	}
	/* 모바일 배경: main_m.png를 아래쪽에 작게 깔고, 위쪽은 같은 톤으로 채워 문구 자리 확보 */
	.mainVisual .bg {
		background: url(../images/main_m.png) 18% 100% / auto 62% no-repeat #eef0f2;
	}
	.mainVisual .bg::after {
		background: linear-gradient(to bottom, #eef0f2 0%, #eef0f2 38%, rgba(238,240,242,0) 50%);
	}
	.mainVisual .text {
		top: calc(64px + 7vh);
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
	}
	.mainVisual .text .slogan {font-size: 4.4vw;}
	.mainVisual .text .title {font-size: 9vw;}
	.mainVisual .en_slogan img {width: 100%; height: auto;}

	.section.intro .wrap .content {
		flex-direction: column;
	}
	.section.intro .text  {
		order: 0;
		flex-direction: column;
		gap: 0;
		padding: 15% 5% 10%;
		justify-content: center;
		align-items: center;
	}
	.section.intro .text .con {
		writing-mode: horizontal-tb;
        font-size: 4vw;
	}

	.section.intro {height:70vh;}

	.section.location .wrap .content  {
		flex-direction: column;
		padding-top: 15%;
	}
	.section.location .wrap .content .left {
		width: 100%;
		padding: 0 5%;
	}
	.section.location .wrap .content .left .text .sut_title {
		font-size: 4vw;
	}
	.section.location .wrap .content .left .text .explain {
		font-size: 3.8vw;
	}
	.section.location .wrap .content .left .text .slogan {
		font-size: 6vw;
	}
	.section.location .wrap .content .right {
		flex: none;
		width: 100%;
		height: auto;
	}
	.section.location .wrap .content .right .image {
		height: auto;
	}
	.section.location .wrap .content .right .image img {
		height: auto;
	}

	.section.premium .wrap .content{
		flex-direction: column;
	}
	/* 모바일: 문구 위 / 이미지 아래 */
	.section.premium .left{
		order: 2;
		flex: none;
		width: 100%;
		height: 100vw;
		max-height: 70vh;
	}
	.section.premium .right{
		order: 1;
		padding: calc(64px + 8vw) 5% 10vw;
	}
	.section.premium .pm_texts{min-height: 64vw;}
	.section.premium .pm_title{font-size: 10vw;}
	.section.premium .explain{font-size: 3.8vw;}
	.section.premium .slogan{font-size: 6vw;}
	.section.premium .tag{font-size: 3.4vw;}

	.section.customer .wrap .content{flex-direction: column; gap: 10vw; padding: 18vw 5% 14vw;}
	.section.customer .left{flex: none; width: 100%;}
	.section.customer .right{flex: none; width: 100%;}
	.section.customer .cs_sub{font-size: 9vw;}
	.section.customer .cs_title{font-size: 8vw;}
	.section.customer .cs_desc{font-size: 3.8vw;}
	.section.customer .cs_tel{margin-top: 7vw; padding-top: 5vw;}
	.section.customer .cs_tel .num{font-size: 10vw;}
	.section.customer .cs_form{padding: 7vw 5vw 6vw;}

    .section:not(.mainVisual):not(.footer):not(.intro):not(.location):not(.premium):not(.type):not(.customer) .content{
        min-height: 100vh;
    }
    .section .sec_title{font-size: 32px;}

}