가 없는 레이어는 안쪽을 로 한 겹 감싸고 그 div 에 붙인다.
등장 클래스는 전부 이름에 '-in-' 이 들어간다 (slide-in-*, bounce-in-*, puff-in-center, rotate-in-hor …).
.fade 는 animate.css 에서 이미 opacity:0 이라 별도 처리가 필요 없다.
*/
.AD [class^='section'] [class^='layer'] > picture {display:block;}
/* 진입 전에는 숨긴다 → 애니메이션 시작 전 원위치에 잠깐 보이는 깜빡임 방지 */
.AD [class^='section'] [class*='-in-'] {opacity:0;}
.AD [class^='section'] .active [class*='-in-'] {opacity:1;}
/* .seen : 페이지가 중간부터 열려서 "이미 지나온" 레이어.
.active 는 그대로 붙으므로 최종 모습은 같고, 재생만 건너뛴다. */
.AD [class^='section'] [class^='layer'].seen [class*='-in-'] {animation:none;}
.AD [class^='section'] [class^='layer'].seen .fade {transition:none;}
/* 순차 등장: style="--d:3" 처럼 숫자만 주면 0.12s 씩 밀린다.
더 세밀한 조절이 필요하면 style 속성으로 animation-delay 를 직접 주면 된다. */
.AD [class^='section'] .active [class*='-in-'] {animation-delay:calc(var(--d, 0) * .12s);}
.AD [class^='section'] .active .fade {transition-delay:calc(var(--d, 0) * .12s);}
.swiper-button-prev svg, .swiper-button-next svg {display:none;}
/* 동봉된 swiper.css 는 v5(.swiper-container) 이고 swiper.js 는 v12(.swiper) 라
컨테이너 기본 스타일이 비어 있음 → v12 기준 최소 규칙 보충 */
.AD .swiper {display:block;position:relative;margin:0 auto;padding:0;overflow:hidden;list-style:none;z-index:1;}
.AD .swiper-horizontal {touch-action:pan-y;}
/*** [Pc] --/start/-- ***/
.AD .fixedbar {position:fixed;left:0;width:100%;height:112px;z-index:100;transition:all .35s cubic-bezier(0.785, 0.135, 0.15, 0.86);-webkit-transition:all .35s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.AD .fixedbar.top {top:0;background:#000000 url('/assets/img/fixed_top.png') center top repeat-x;}
.AD .fixedbar.top.scrolled {background-color:#000000;box-shadow:0 2px 10px rgba(0,0,0,.3);}
.AD .fixedbar.top.hidden {top:-100%;}
/* 상단 고정바 전체 디미방체 (자손은 상속으로 받음) */
.AD .fixedbar.top {font-family:'Dimibang', 'Pretendard', sans-serif;}
.AD .fixedbar.bottom {height:88px;bottom:0;background:#f4ca44 url('/assets/img/fixed_bottomt.png') center top no-repeat;}
.AD .fixedbar.bottom.hidden {bottom:-100%;}
.AD .fixedbar > div {width:1400px;height:100%;position:absolute;top:0%;left:50%;transform:translateX(-50%);text-align:right;}
.AD .fixedbar.bottom > div {width:1100px;}
.AD .fixedbar.top .layerbtn01 {top:0%;left:0;height:100%;width:170px;z-index:2;}
.AD .fixedbar.top .layerbtn02 {top:0%;right:0;height:100%;width:250px;z-index:2;}
.AD .mainmenulist {font-size:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;display:flex;flex-direction:row;flex-wrap:nowrap;gap:50px;}
.AD .mainmenulist > li {}
.AD .mainmenulist > li > a {display:block;width:auto;color:#000;padding:10px 0;font-family:'Dimibang', 'Pretendard', sans-serif;font-size:20px;font-weight:400;line-height:1.2;position:relative;transition:all .15s cubic-bezier(0.785, 0.135, 0.15, 0.86);-webkit-transition:all .15s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.AD .mainmenulist > li > a em {display:block;font-size:16px;font-weight:300;}
.AD .mainmenulist > li > a:hover, .AD .mainmenulist > li.active > a {}
.AD .floatMenu {position:fixed;top:300px;right:50%;transform:translateX(50%);max-width:1800px;width:100%;height:1px;z-index:50;}
.AD .floatMenu .side_db {position:absolute;top:0;right:0;width:180px;height:370px;background:url('/assets/img/flaotMenu.png') center top no-repeat;}
.AD .floatMenu .side_db > ul {padding:0 14px;margin-top:80px;}
.AD .floatMenu .side_db > ul > li {margin-bottom:6px;}
.AD .floatMenu .side_db > ul > li > div {font-size:0;width:auto;display:flex;flex-direction:row;}
.AD .floatMenu .side_db > ul > li > div > span {font-size:12px;}
.AD .floatMenu .side_db > ul > li > div > span:nth-child(1) {display:none;width:70px;text-align:center;font-size:16px;font-weight:500;}
.AD .floatMenu .side_db > ul > li > div > span:nth-child(2) {width:100%;}
.AD .floatMenu .input-control {display:block;border:0;padding:6px;width:100%;background:#fff;}
.AD .floatMenu .jellybox {display:flex;flex-direction:row;align-items:center;justify-content:center;}
.AD .floatMenu .icon {border-color:#fff;}
.AD .floatMenu .icon::after {border-color:#fff;}
.AD .floatMenu .text {color:#fff;font-size:12px;}
.AD .floatMenu .privacy-open {color:#fff;}
.AD .floatMenu .side_db .submit_box {text-align:center;}
.AD .floatMenu .show_privacy {display:inline-block;vertical-align:middle;cursor:pointer;font-size:12px;}
.AD .floatMenu .agreebox {text-align:center;}
.AD .floatMenu .submitbox {text-align:center;padding:10px;}
.AD .floatMenu .submitbox img {width:100%;}
.AD .floatMenu .submitbox button {display:inline-block;margin-bottom:5px;width:auto;padding:0;}
.AD .floatMenu .submitbox a {display:inline-block;width:auto;}
.AD .floatMenu .layerlink01 {display:block;position:absolute;width:100%;height:45px;position:absolute;z-index:1;bottom:0;left:0;}
/* section 공통*/
.AD .layer-scroll {left:50%;bottom:5%;transform:translate(-50%,0);}
.AD .subtable {padding:0;}
.AD .subtable th, .AD .subtable td {border:1px solid #d7d7d7;padding:10px;line-height:1.6;vertical-align:middle;}
.AD .subtable th {background:#ebebeb;text-align:center;width:100px;}
.AD .subtable td {width:calc(50% - 100px);}
.swiper-slide {text-align:center;font-size:18px;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.swiper-slide img {object-fit: cover;}
.swiper-pagination {bottom:0;display:flex;flex-direction:row;gap:10px;}
.swiper-pagination-bullet {width:15px;height:15px;border-radius:100px;background:#fff;}
.swiper-pagination-bullet-active {background:#fff;}
/* index 스타일 — 배경: /assets/img/01t.png ~ 13t.png (원본 2000px 기준) */
/* layer 조각 이미지는 아직 미추출 → 배경 + content 높이만 잡아둔 상태 */
.AD .section01 {background:url('/assets/img/01.png') center top / cover no-repeat;margin-top:112px;}
.AD .section01 .content {height:888px;}
.AD .section01 .layer01 {top:0px;left:calc(0%);width:672px;transform:translate(0);} /* 태극기 */
.AD .section01 .layer02 {top:36px;left:calc(50% + 440px);width:857px;} /* 냄비사진 */
.AD .section01 .layer03 {top:109px;left:calc(50% - 398px);width:726px;} /* 타이틀 */
.AD .section01 [class*="layer04"] .countcard {position:relative;} /* 숫자(.layercount)가 카드와 같은 기준으로 배치되도록 */
.AD .section01 [class*="layer04"] .layercount {top:162px;left:50%;transform:translate(-50%,-50%);font-family:'Pretendard',sans-serif;font-size:54px;font-weight:900;line-height:1;color:#000;white-space:nowrap;}
.AD .section01 [class*="layer04"] .layercount .unit {font-weight:400;}
.AD .section01 .layer04-1 {top:526px;left:calc(50% - 475px);width:466px;} /* */
.AD .section01 .layer04-2 {top:526px;left:calc(50%);width:466px;} /* */
.AD .section01 .layer04-3 {top:526px;left:calc(50% + 475px);width:466px;} /* */
.AD .section02 {background:url('/assets/img/02.png') center top / cover no-repeat;}
.AD .section02 .content {height:1140px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section02 .layer01 {top:108px;left:calc(50% - 365px);width:672px;} /* 02-01 672x105 */
.AD .section02 .layer02 {top:110px;left:calc(50% + 507px);width:386px;} /* 02-02 386x110 */
.AD .section02 .layer03 {top:235px;left:calc(50% + 340px);width:720px;} /* 02-03 720x102 */
.AD .section02 .layer04 {top:360px;left:calc(50%);width:100%;} /* 02-04 슬라이드 (전체폭) */
.AD .section02 .layer05 {top:970px;left:calc(50%);width:1040px;} /* 02-05 1040x60 */
.AD .section02 .layer05-1 {top:calc(100% + 20px);left:50%;width:100%;font-size:16px;color:#555;text-align:center;}
/* 매장 매출사례 슬라이드 — 슬라이드 원본 420x590 */
.AD .section02 .slide01 .swiper-slide {width:420px;height:auto;}
.AD .section02 .slide01 .swiper-slide img {display:block;width:100%;height:auto;object-fit:initial;}
.AD .section03 {background:url('/assets/img/03.png') center top / cover no-repeat;}
.AD .section03 .content {height:1160px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section03 .layer01 {top:110px;left:calc(50%);width:270px;} /* 03-01 270x77 */
.AD .section03 .layer02 {top:220px;left:calc(50%);width:1063px;} /* 03-02 1063x164 */
.AD .section03 .layer03-1 {top:475px;left:calc(50% - 480px);width:451px;} /* 03-03-1 451x495 */
.AD .section03 .layer03-2 {top:475px;left:calc(50%);width:463px;} /* 03-03-2 463x525 */
.AD .section03 .layer03-3 {top:475px;left:calc(50% + 480px);width:466px;} /* 03-03-3 466x525 */
.AD .section04 {background:url('/assets/img/04.png') center top / cover no-repeat;}
.AD .section04 .content {height:1190px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section04 .layer01 {top:110px;left:calc(50%);width:270px;} /* 04-01 270x77 */
.AD .section04 .layer02 {top:220px;left:calc(50%);width:632px;} /* 04-02 632x239 */
.AD .section04 .layer03 {top:520px;left:calc(50%);width:100%;} /* 유튜브 슬라이드 (전체폭) */
/* 유튜브 카드 — 04-youtube-item.png(426x598) 위에 썸네일/텍스트 오버레이.
좌표는 카드 실측 → % 환산이라 모바일(80vw)에서도 그대로 스케일됨.
썸네일 x38 y20 350x200 / 재생아이콘 44x30 중앙 / 텍스트영역 y230~470 */
.AD .section04 .slide02 .swiper-slide {width:426px;height:auto;}
.AD .ytitem {display:block;position:relative;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;text-align:center;font:inherit;color:inherit;}
.AD .ytitem .ytframe {display:block;width:100%;height:auto;position:relative;z-index:1;}
.AD .ytitem .ytframe img {display:block;width:100%;height:auto;}
.AD .ytitem .ytthumb {position:absolute;z-index:2;left:8.92%;top:3.34%;width:82.16%;height:33.44%;overflow:hidden;background:#3f3f3f;}
.AD .ytitem .ytthumb img {display:block;width:100%;height:100%;object-fit:cover;}
/* 프레임에 인쇄된 재생아이콘이 썸네일에 가려지므로 동일 크기로 다시 올림 */
.AD .ytitem .ytthumb::after {content:'';position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:10.33%;height:15%;min-width:44px;min-height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f00' d='M66.5 7.7a8.6 8.6 0 0 0-6-6C55.3 0 34 0 34 0S12.7 0 7.5 1.6a8.6 8.6 0 0 0-6 6A89.7 89.7 0 0 0 0 24a89.7 89.7 0 0 0 1.5 16.3 8.6 8.6 0 0 0 6 6C12.7 48 34 48 34 48s21.3 0 26.5-1.6a8.6 8.6 0 0 0 6-6A89.7 89.7 0 0 0 68 24a89.7 89.7 0 0 0-1.5-16.3z'/%3E%3Cpath fill='%23fff' d='M27.2 34.3 45 24 27.2 13.7z'/%3E%3C/svg%3E") center / contain no-repeat;pointer-events:none;}
.AD .ytitem .yttext {position:absolute;z-index:2;left:8.92%;top:38.5%;width:82.16%;height:40.1%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;overflow:hidden;}
.AD .ytitem .yttitle {display:block;width:100%;font-size:24px;font-weight:700;line-height:1.3;color:#222;word-break:keep-all;}
.AD .ytitem .ytdesc {display:block;width:100%;font-size:16px;font-weight:400;line-height:1.5;color:#666;word-break:keep-all;}
/* 유튜브 재생 모달 */
.AD .youtube-pop {display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:500;}
.AD .youtube-pop.active {display:block;}
.AD .youtube-pop .youtube-close-area {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);cursor:pointer;}
.AD .youtube-pop .youtube-box {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(1100px, 92vw);}
.AD .youtube-pop .youtube-frame {position:relative;width:100%;padding-top:56.25%;background:#000;overflow:hidden;}
.AD .youtube-pop .youtube-frame iframe {position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.AD .youtube-pop .youtube-close {position:absolute;top:-48px;right:0;width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer;}
.AD .youtube-pop .youtube-close::before, .AD .youtube-pop .youtube-close::after {content:'';position:absolute;top:50%;left:50%;width:32px;height:3px;background:#fff;border-radius:2px;}
.AD .youtube-pop .youtube-close::before {transform:translate(-50%,-50%) rotate(45deg);}
.AD .youtube-pop .youtube-close::after {transform:translate(-50%,-50%) rotate(-45deg);}
.AD .section05 {background:url('/assets/img/05.png') center top / cover no-repeat;}
.AD .section05 .content {height:1290px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section05 .layer01 {top:110px;left:calc(50%);width:270px;} /* 05-01 270x77 */
.AD .section05 .layer02 {top:220px;left:calc(50%);width:694px;} /* 05-02 694x309 */
.AD .section05 .layer03 {top:80px;left:calc(50% + 550px);width:324px;} /* 05-03 324x351 */
.AD .section05 .layer04-1 {top:560px;left:calc(50% - 530px);width:376px;} /* 05-04-1 376x487 */
.AD .section05 .layer04-2 {top:560px;left:calc(50% - 175px);width:376px;} /* 05-04-2 376x487 */
.AD .section05 .layer04-3 {top:560px;left:calc(50% + 175px);width:376px;} /* 05-04-3 376x487 */
.AD .section05 .layer04-4 {top:560px;left:calc(50% + 530px);width:376px;} /* 05-04-4 376x487 */
.AD .section05 .layer05 {top:1060px;left:calc(50%);width:855px;} /* 05-05 855x127 */
.AD .section06 {background: url('/assets/img/06\(2\).png') center bottom / 100% 340px repeat-x, url('/assets/img/06.png') center top / cover no-repeat;}
.AD .section06 .content {height:1710px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section06 .layer01 {top:110px;left:calc(50% + 385px);width:630px;} /* 06-01 630x179 */
.AD .section06 .layer02 {top:128px;left:calc(50% - 345px);width:711px;} /* 06-02 711x151 */
.AD .section06 .layer03 {top:360px;left:calc(50%);width:868px;} /* 06-03 868x60 */
.AD .section06 .layer04-1 {top:450px;left:calc(50% - 470px);width:955px;} /* 06-04-1 955x726 */
.AD .section06 .layer04-2 {top:450px;left:calc(50% + 470px);width:955px;} /* 06-04-2 955x726 */
.AD .section06 .layer05 {top:1176px;left:calc(50%);width:1087px;} /* 06-05 1087x85 */
.AD .section06 .layer06 {top:1316px;left:calc(50%);width:1918px;} /* 06-06 1918x454 */
.AD .section07 {background:url('/assets/img/07.png') center top / cover no-repeat;}
.AD .section07 .content {height:1670px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section07 .layer01 {top:110px;left:calc(50%);width:270px;} /* 07-01 270x77 */
.AD .section07 .layer02 {top:280px;left:calc(50% - 440px);width:1122px;} /* 07-02 1122x1127 */
.AD .section07 .layer03 {top:280px;left:calc(50% + 413px);width:550px;} /* 07-03 550x647 */
.AD .section07 .layer04 {top:1455px;left:calc(50% - 277px);width:779px;} /* 07-04 779x102 */
.AD .section07 .layer05 {top:1000px;left:calc(50% + 560px);width:877px;} /* 07-05 877x597 */
.AD .section08 {background:url('/assets/img/08.png') center top / cover no-repeat;}
.AD .section08 .content {height:1410px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section08 .layer01 {top:100px;left:calc(50%);width:270px;} /* 08-01 270x77 */
.AD .section08 .layer02 {top:230px;left:calc(50%);width:735px;} /* 08-02 735x239 */
/* 미디어 커버플로우 — 08t.png 실측:
가운데 카드 y511~1187(677) / 좌우 카드 y647~1187(541) → 하단 y1187 정렬, 축소비율 0.8
가운데 영상 720x412(≈16:9), 카드폭 ≈764, 카드 간격 ≈47 */
.AD .section08 .layer03 {top:511px;left:calc(50%);width:100%;}
.AD .mediaslide .swiper {overflow:visible;} /* 좌우 카드가 화면 밖까지 보이도록 */
.AD .mediaslide .swiper-slide {width:764px;height:auto;display:block;text-align:left;
transform:scale(.8);transform-origin:center bottom; /* 하단 기준 축소 → 바닥 정렬 */
transition:transform .45s cubic-bezier(.4,0,.2,1);}
.AD .mediaslide .swiper-slide-active {transform:scale(1);}
.AD .mediacard {background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.18);padding:19px 22px 26px;}
.AD .mediaplayer {position:relative;width:100%;aspect-ratio:720/412;overflow:hidden;background:#3f3f3f;}
.AD .mediaplayer img {display:block;width:100%;height:100%;object-fit:cover;}
.AD .mediaplayer iframe {position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
/* 재생 버튼 (유튜브 아이콘) — 이미지 전용 항목에는 표시 안 함 */
.AD .mediaplayer .mediaplay {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:68px;height:48px;padding:0;border:0;cursor:pointer;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f00' d='M66.5 7.7a8.6 8.6 0 0 0-6-6C55.3 0 34 0 34 0S12.7 0 7.5 1.6a8.6 8.6 0 0 0-6 6A89.7 89.7 0 0 0 0 24a89.7 89.7 0 0 0 1.5 16.3 8.6 8.6 0 0 0 6 6C12.7 48 34 48 34 48s21.3 0 26.5-1.6a8.6 8.6 0 0 0 6-6A89.7 89.7 0 0 0 68 24a89.7 89.7 0 0 0-1.5-16.3z'/%3E%3Cpath fill='%23fff' d='M27.2 34.3 45 24 27.2 13.7z'/%3E%3C/svg%3E") center / contain no-repeat;
transition:transform .2s;}
.AD .mediaplayer .mediaplay:hover {transform:translate(-50%,-50%) scale(1.1);}
.AD .mediatext {padding-top:18px;}
.AD .mediatitle {display:block;font-size:26px;font-weight:700;line-height:1.4;color:#222;word-break:keep-all;}
.AD .mediadesc {margin-top:12px;font-size:17px;font-weight:400;line-height:1.65;color:#777;word-break:keep-all;}
/* 활성 슬라이드가 아닌 카드는 클릭 막기(먼저 중앙으로 이동시키기 위함) */
.AD .mediaslide .swiper-slide:not(.swiper-slide-active) .mediaplay {pointer-events:none;}
.AD .section08 .layer04 {top:1280px;left:calc(50%);width:1002px;} /* 08-04 1002x52 */
.AD .section09 {background:url('/assets/img/09.png') center top / cover no-repeat;}
.AD .section09 .content {height:1340px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section09 .layer01 {top:110px;left:calc(50%);width:270px;} /* 09-01 270x77 */
.AD .section09 .layer02 {top:240px;left:calc(50%);width:813px;} /* 09-02 813x163 */
.AD .section09 .layer03 {top:500px;left:calc(50% - 440px);width:974px;} /* 09-03 974x663 */
.AD .section09 .layer04 {top:380px;left:calc(50% + 415px);width:726px;} /* 09-04 726x887 */
.AD .section09 .layer04-1 {top:100%;left:50%;width:100%;font-size:16px;color:#bcbcbc;text-align:center;}
.AD .section10 {background:url('/assets/img/10.png') center top / cover no-repeat;}
.AD .section10 .content {height:1230px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section10 .layer01 {top:110px;left:calc(50%);width:270px;} /* 10-01 270x77 */
.AD .section10 .layer02 {top:220px;left:calc(50%);width:753px;} /* 10-02 753x167 */
.AD .section10 .layer03-1 {top:430px;left:calc(50% - 420px);width:865px;} /* 10-03-1 865x726 */
.AD .section10 .layer03-2 {top:430px;left:calc(50% + 420px);width:865px;} /* 10-03-2 865x726 */
.AD .section11 {background:url('/assets/img/11.png') center top / cover no-repeat;}
.AD .section11 .content {height:1650px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section11 .layer01 {top:110px;left:calc(50%);width:270px;} /* 11-01 270x77 */
.AD .section11 .layer02 {top:220px;left:calc(50%);width:610px;} /* 11-02 610x187 */
.AD .section11 .layer03 {top:380px;left:calc(50%);width:1703px;} /* 11-03 1703x1181 */
.AD .section12 {background:url('/assets/img/12.png') center top / cover no-repeat;}
.AD .section12 .content {height:1600px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section12 .layer01 {top:100px;left:calc(50%);width:270px;} /* 12-01 270x77 */
.AD .section12 .layer02 {top:230px;left:calc(50%);width:743px;} /* 12-02 743x160 */
/* FAQ 목록 — faq 테이블 기반. 카드 프레임 앞면 12-item.png / 뒷면 12-item-back.png (420x320)
카드를 누르면 좌우로 뒤집히고(rotateY), 앞면은 질문만 뒷면은 질문+답변을 보여준다.
면을 두 장 겹쳐 backface-visibility 로 가리는 방식은 쓰지 않는다.
그렇게 하면 position:absolute + z-index 를 가진 안쪽 글자가 3D 컨텍스트로 끌려 올라가
뒷면 컬링에 걸려버려서, 카드는 뒤집히는데 글자가 안 보이는 일이 생긴다.
대신 면은 한 장만 두고 안쪽(.faqinner)을 같이 되돌려 글자가 거울처럼 되지 않게 한다.
종이 교체·답변 표시는 모두 뒤집기 0.6s 의 절반인 0.3s 지점에서 한 번에 일어난다. */
.AD .section12 .layer03 {top:470px;left:calc(50%);width:1320px;}
.AD .faqlist {display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:30px;}
.AD .faqitem {position:relative;flex:0 0 420px;width:420px;perspective:1200px;}
.AD .faqcard {display:block;position:relative;width:100%;margin:0;padding:0;border:0;background:none;
font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;
transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);}
.AD .faqitem.is-flipped .faqcard {transform:rotateY(180deg);}
/* 카드가 90도로 서는 순간(0.3s) 안쪽을 뒤집어 글자 방향을 되돌린다 */
.AD .faqinner {display:block;position:relative;transition:transform 0s .3s;}
.AD .faqitem.is-flipped .faqinner {transform:rotateY(180deg);}
/* 종이 교체도 같은 시점에.
opacity:0 은 합성 레이어에 남아 뒤집히는 중 앞면(화살표) 잔상이 비쳤다.
visibility 는 아예 그리지 않으므로 정확히 가운데에서 딱 바뀐다.
되살릴 때 visible 이 아니라 inherit 를 쓰는 이유:
.fade(스크롤 등장 연출)가 물려주는 visibility 를 덮어쓰지 않기 위해서다. */
.AD .faqitem .faqframe {display:block;width:100%;height:auto;transition:visibility 0s .3s;}
.AD .faqitem .faqframe img {display:block;width:100%;height:auto;}
.AD .faqframe-back {position:absolute;top:0;left:0;visibility:hidden;}
.AD .faqitem.is-flipped .faqframe-front {visibility:hidden;}
.AD .faqitem.is-flipped .faqframe-back {visibility:inherit;}
/* 카드 안쪽 여백 — 우하단 아이콘(50x40) 영역은 비워둠 */
.AD .faqitem .faqtext {display:flex;flex-direction:column;justify-content:center;
position:absolute;top:8%;left:8%;width:84%;height:auto;overflow:hidden;text-align:left;}
/* 뒤집힌 뒤에는 위에서부터 읽히도록 */
.AD .faqitem.is-flipped .faqtext {justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;height:70%;}
.AD .faqitem .faqtext::-webkit-scrollbar {width:4px;}
.AD .faqitem .faqtext::-webkit-scrollbar-thumb {background:#d8d3c6;border-radius:2px;}
.AD .faqitem .faqq {display:block;font-size:22px;font-weight:700;line-height:1.35;color:#000;word-break:keep-all;}
.AD .faqitem .faqa {display:block;margin-top:14px;font-size:16px;font-weight:400;line-height:1.6;color:#555;word-break:keep-all;
visibility:hidden;transition:visibility 0s .3s;}
.AD .faqitem.is-flipped .faqa {visibility:inherit;}
/* 모션 최소화를 켰다면 뒤집기 연출 없이 즉시 전환 */
@media (prefers-reduced-motion: reduce) {
.AD .faqcard, .AD .faqinner, .AD .faqitem .faqframe, .AD .faqitem .faqa {transition:none;}
}
/* 신청폼 — 배경(12t.png)에 폼 패널이 인쇄되어 있어 그 위에 입력요소를 올림.
.AD [class*="section"] .dbform 공통규칙(top:430px/width:780px)을 임시로 사용 중. */
.AD .section13 {background:url('/assets/img/13.png') center top / cover no-repeat;}
.AD .section13 .content {height:1390px;}
/* ↓ top/left 은 임시값 (겹치지 않게만 나열). width 만 원본 실측값. */
.AD .section13 .layer01 {top:100px;left:calc(50%);width:270px;} /* 13-01 270x77 */
.AD .section13 .layer02 {top:230px;left:calc(50%);width:570px;} /* 13-02 570x160 */
.AD .section13 .layer03 {top:420px;left:calc(50%);width:936px;} /* 13-03 936x917 (신청폼 종이패널) */
/* 신청폼은 layer03 패널 위에 올림 — 공통규칙(.AD [class*="section"] .dbform) 임시 사용 중 */
.AD .section14 {background:url('/assets/img/14.png') center top / cover no-repeat;}
.AD .section14 .content {height:1300px;}
/* 아래 좌표는 시안(15t.png / m-14t.png)에서 조각 위치를 찾아 넣은 실측값이다. */
.AD .section14 .layer01 {top:110px;left:calc(50%);width:270px;} /* 14-01 270x77 */
.AD .section14 .layer02 {top:219px;left:calc(50%);width:711px;} /* 14-02 711x92 (제목) */
.AD .section14 .layer03 {top:320px;left:calc(50%);width:1556px;aspect-ratio:1556 / 817;} /* 14-map 1556x817 (지도 프레임) */
.AD .section14 .layer04 {top:1150px;left:calc(50%);width:840px;} /* 14-04 840x60 (하단 문구) */
/* aspect-ratio 로 높이를 미리 잡아 둔다.
없으면 프레임 이미지가 로드되기 전 높이가 0 이라, 그 사이 초기화된 지도가
0 높이 기준으로 배율을 잡아 화면 위쪽만 타일이 그려지고 잘려 보였다. */
/* 카카오맵 — 찢어진 종이 프레임(14-map.png) 안쪽에 얹음.
프레임 가장자리가 불규칙해서 상하좌우를 조금씩 안쪽으로 넣음(% 라 모바일에서도 스케일). */
.AD .mapbox {}
/* 찢어진 종이(14-map.png) 안쪽 여백.
이미지 실측: 종이는 상 0~6% / 하 92~93% / 좌 1.5% / 우 98.6% 범위를 차지한다.
이전 값(top 5% + height 88% = 하단 93%)은 종이 끝과 맞닿아 여백이 없었다.
상하좌우로 3~4%씩 안쪽에 넣어 흰 테두리가 보이게 한다. */
.AD .mapbox .storemap {position:absolute;z-index:2;top:12%;left:5%;width:90%;height:75%;background:#e8e4d8;}
/* 매장 정보창 (CustomOverlay). 가로 고정, 세로는 내용만큼 자동.
InfoWindow 는 카카오가 내용에 인라인 height 를 박아 넣어(실측 93.86px)
실제 내용 높이(118px)보다 작게 잡히면서 마지막 줄이 흰 박스 밖으로 삐져나왔다. */
.AD .mapbox .mapinfo {position:relative;width:250px;box-sizing:border-box;padding:14px 30px 14px 16px;background:#fff;border:1px solid #d9d9d9;border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,.18);font-size:13px;line-height:1.6;color:#555;white-space:normal;word-break:keep-all;overflow-wrap:break-word;}
.AD .mapbox .mapinfo::after {content:'';position:absolute;left:50%;bottom:-9px;width:0;height:0;margin-left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:9px solid #fff;filter:drop-shadow(0 2px 1px rgba(0,0,0,.12));}
.AD .mapbox .mapinfo strong {display:block;margin-bottom:6px;font-size:15px;font-weight:700;line-height:1.4;color:#111;}
.AD .mapbox .mapinfo span {display:block;}
.AD .mapbox .mapinfo .mapinfo-tel {color:#c00;font-weight:700;}
.AD .mapbox .mapinfo-close {position:absolute;top:6px;right:6px;width:22px;height:22px;padding:0;border:0;background:none;font-size:18px;line-height:1;color:#aaa;cursor:pointer;}
.AD .mapbox .mapinfo-close:hover {color:#333;}
/* 키 미설정·매장 0건 안내 */
.AD .mapbox .storemap.is-empty {display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;color:#8a7f66;}
/* 매장 목록 패널 — 지도 왼쪽에 겹쳐 놓는다. 항목 클릭 시 해당 지점으로 이동 */
.AD .mapbox .storepanel {position:absolute;z-index:3;top:18%;left:7%;width:230px;max-height:62%;background:#fff;border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,.18);overflow:hidden;display:flex;}
.AD .mapbox .storelist {margin:0;padding:0;list-style:none;width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.AD .mapbox .storelist::-webkit-scrollbar {width:6px;}
.AD .mapbox .storelist::-webkit-scrollbar-thumb {background:#c9c9c9;border-radius:3px;}
.AD .mapbox .storelist li {border-bottom:1px dashed #ddd;}
.AD .mapbox .storelist li:last-child {border-bottom:0;}
.AD .mapbox .storeitem {display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;background:none;text-align:left;cursor:pointer;}
.AD .mapbox .storeitem:hover, .AD .mapbox .storeitem.is-active {background:#fff6f6;}
.AD .mapbox .storeitem .thumb {flex:0 0 34px;width:34px;height:34px;border-radius:3px;background:#e9e9e9;}
.AD .mapbox .storeitem .info {display:block;min-width:0;}
.AD .mapbox .storeitem strong {display:block;font-size:14px;font-weight:700;color:#000;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.AD .mapbox .storeitem .addr {display:block;margin-top:2px;font-size:12px;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 마커 옆 지점명 라벨 (CustomOverlay) */
.AD .maplabel {display:none;padding:2px 6px;font-size:11px;font-weight:700;line-height:1.3;color:#c00;background:rgba(255,255,255,.9);border-radius:3px;white-space:nowrap;transform:translateY(-42px);pointer-events:none;}
.AD .footer {background:#c8c8c8 url('/assets/img/footer.png') center top no-repeat;padding-bottom:90px;}
.AD .footer .content {height:200px;}
/* 하단 고정바 — 배경 fixed_bottomt.png(2000x90, 중앙기준)
실측 좌표(2000px 기준, 중앙 1000):
이름 659~829 / 연락처 839~1009 / 지역 1019~1189 (각 170x40, y25~65)
동의영역 1189~1379 / 문의하기 1379~1549 (170x50, y20~70) */
.AD .fixedbar.bottom {height:90px;}
/* 좌측 로고 뱃지 (fixed_bottom_logo.png 180x180 — 바 위로 돌출) */
.AD .fixedbar.bottom .fixedlogo {position:absolute;left:0;bottom:0;width:180px;height:180px;z-index:3;}
.AD .fixedbar.bottom .fixedlogo img {display:block;width:100%;height:auto;}
.AD .fixedbar .dbform {position:absolute;top:50%;left:calc(50% - 341px);right:auto;transform:translateY(-50%);z-index:1;width:890px;}
.AD .fixedbar .dbform .landing_form {display:flex;flex-direction:row;align-items:center;gap:0;width:100%;}
.AD .fixedbar .dbform label {cursor:pointer;}
/* 입력 박스 (이름·연락처) — 흰 박스 170x40 */
.AD .fixedbar .dbform .input-control {display:block;height:40px;box-sizing:border-box;border:0;padding:0 14px;width:100%;background:#fff;font-size:15px;line-height:40px;border-radius:4px;color:#555;outline:none;}
/* 이름·연락처·지역 가로 정렬 (각 170px, 간격 10px = 530px) */
.AD .fixedbar .dbform .db_list {order:1;flex:0 0 530px;display:flex;flex-direction:row;gap:10px;margin:0;white-space:nowrap;}
.AD .fixedbar .dbform .db_list > li {flex:0 0 170px;}
.AD .fixedbar .dbform .db_list > li:has(.radio) {display:none;} /* 문의내용 라디오는 이미지에 없음 → 숨김 */
.AD .fixedbar .dbform .db_list > li > div {width:auto;font-size:0;}
.AD .fixedbar .dbform .db_list > li > div > span {display:block;width:100%;padding:0;font-size:15px;color:#555;}
.AD .fixedbar .dbform .db_list > li > div > span:first-child {display:none;} /* 라벨 숨김(배경 placeholder 사용) */
/* 지역 셀렉트 — 입력박스와 동일 룩, 위로 펼침 */
.AD .fixedbar .dbform .selectbox {width:100%;font-family:inherit;}
.AD .fixedbar .dbform .selectbox-trigger {height:40px;box-sizing:border-box;padding:0 28px 0 14px;background:#fff;border:0;border-radius:4px;font-size:15px;line-height:40px;color:#555;}
.AD .fixedbar .dbform .selectbox-trigger::after {right:12px;border-color:#888;}
.AD .fixedbar .dbform .selectbox-value {color:#555;line-height:40px;}
.AD .fixedbar .dbform .selectbox-value.placeholder {color:#999;}
.AD .fixedbar .dbform .selectbox-options {top:auto;bottom:calc(100% + 6px);max-height:200px;}
/* 개인정보 동의 — 체크아이콘·문구가 배경 이미지에 인쇄됨(1200~1343)
→ HTML 텍스트는 숨기고 그 위에 클릭영역만 겹쳐둠 */
.AD .fixedbar .dbform .agreebox {order:2;flex:0 0 190px;position:relative;display:block;height:90px;margin:0;text-align:left;white-space:nowrap;}
.AD .fixedbar .dbform .jellybox {display:block;position:absolute;top:24px;left:0;width:190px;height:46px;margin:0;}
.AD .fixedbar .dbform .jellybox .text {display:none;}
/* 체크 해제 시에만 배경의 체크마크를 덮는 마스크가 보이게 */
.AD .fixedbar .dbform .jellybox .icon {position:absolute;top:8px;left:11px;width:32px;height:30px;border:0;border-radius:50%;background:none;}
.AD .fixedbar .dbform .jellybox .icon::after {display:none;}
.AD .fixedbar .dbform .jellybox input:not(:checked) ~ .icon {background:#f4ca44;box-shadow:inset 0 0 0 2px #a77426;}
/* 배경의 '[자세히 보기]' 위 투명 클릭영역 */
.AD .fixedbar .dbform .agreebox button.privacy-open {position:absolute;z-index:2;top:47px;left:43px;width:63px;height:15px;padding:0;margin:0;border:0;background:none;font-size:0;color:transparent;text-decoration:none;cursor:pointer;}
/* 문의하기 버튼 (170x50, fixed_submit.png) */
.AD .fixedbar .dbform .submitbox {order:3;flex:0 0 170px;text-align:center;}
.AD .fixedbar .dbform .submitbox button {display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;}
.AD .fixedbar .dbform .submitbox img {display:block;width:100%;height:auto;}
/* 개인정보 팝업 */
.AD .fixedbar .dbform .privacybox {width:100%;height:120px;padding:20px;overflow-Y:scroll;background:#fff;font-size:12px;line-height:1.6;border:1px solid #000;}
.AD .fixedbar .dbform .privacybox .title {font-size:20px;font-weight:700;}
.AD [class*="section"] .dbform {position:absolute;top:560px;left:50%;transform:translateX(-50%);width:780px;z-index:1;}
.AD [class*="section"] .dbform .input-control {display:block;border:1px solid #bfbfbf;padding:18px;width:100%;background:#fff;font-size:16px;color:#888888;resize:none;outline:none;}
.AD [class*="section"] .dbform textarea.input-control {min-height:180px;}
.AD [class*="section"] .dbform label {cursor:pointer;}
.AD [class*="section"] .dbform .db_list {margin:0 auto 60px;display:flex;flex-direction:column;border-top:4px solid #ff561f;}
.AD [class*="section"] .dbform .db_list > li {width:100%;display:flex;align-items:center;border-bottom:1px solid #8f8f8f;}
.AD [class*="section"] .dbform .db_list > li:last-child {margin-bottom:0px;}
.AD [class*="section"] .dbform .db_list > li .checkitem {font-size:0;}
.AD [class*="section"] .dbform .db_list > li .checkitem > label {display:inline-block;vertical-align:middle;font-size:12px;margin-right:15px;}
.AD [class*="section"] .dbform .db_list > li > div {width:100%;font-size:0;padding:10px 0;}
.AD [class*="section"] .dbform .db_list > li > div > span {display:inline-block;vertical-align:middle;font-size:24px;font-weight:500;font-family:'Gmarket';letter-spacing:-1px;color:#282828;}
.AD [class*="section"] .dbform .db_list > li > div > span:first-child {width:150px;padding-left:20px;}
.AD [class*="section"] .dbform .db_list > li .required {font-weight:300;color:#ff7c2a;font-size:14px;margin-left:5px;}
.AD [class*="section"] .dbform .db_list > li .partial {font-weight:300;color:#4e4e4e;}
.AD [class*="section"] .dbform .db_list > li > div > span:last-child {width:calc(100% - 150px);text-align:left;}
.AD [class*="section"] .dbform .desc {padding:5px;font-size:14px;font-weight:300;color:#909090;}
.AD [class*="section"] .dbform .radio {display:inline-flex!important;flex-direction:row;}
.AD [class*="section"] .dbform .radio label {flex:0 0 auto;display:flex;flex-direction:row;align-items:center;}
.AD [class*="section"] .dbform .radio label input {display:none;}
.AD [class*="section"] .dbform .radio label .icon {width:26px;height:26px;border-radius:100%;background:#fff;margin-right:10px;position:relative;z-index:1;flex:0 0 auto;border:1px solid #c1c1c1;}
.AD [class*="section"] .dbform .radio label .text {font-size:20px;line-height:1;color:#855c41;margin-right:20px;white-space:nowrap;}
.AD [class*="section"] .dbform .radio label input:checked ~ .icon::after {content:'';display:block;width:60%;height:60%;background:#ef6719;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}
.AD [class*="section"] .dbform .agreebox {margin:0 auto 20px;background:#ebebeb;border:1px solid #bfbfbf;display:flex;flex-direction:row;padding:5px 10px;align-items:center;}
.AD [class*="section"] .dbform .agreebox .text, .AD [class*="section"] .dbform .agreebox button.privacy-open {flex:1;color:#000;font-size:18px;cursor:pointer;text-align:right;}
.AD [class*="section"] .dbform .jellybox .icon {width:20px;height:20px;}
.AD [class*="section"] .dbform .privacybox {width:100%;height:120px;padding:20px;overflow-Y:scroll;background:#fff;font-size:12px;line-height:1.6;border:1px solid #000;}
.AD [class*="section"] .dbform .privacybox .title {font-size:20px;font-weight:700;}
.AD [class*="section"] .dbform .submitbox {text-align:center;}
.AD [class*="section"] .dbform .submitbox img {width:100%;}
.AD [class*="section"] .dbform .submitbox button {display:inline-block;width:auto;padding:0;}
.AD [class*="section"] .dbform .submitbox a {display:inline-block;width:auto;margin:10px 20px;}
/* 커스텀 셀렉트박스 (희망지역 등) */
.AD .dbform .selectbox {position:relative;width:100%;font-family:'Gmarket';}
.AD .dbform .selectbox-trigger {display:block;width:100%;border:1px solid #bfbfbf;background:#fff;padding:18px 50px 18px 18px;font-size:16px;color:#282828;text-align:left;line-height:1.2;cursor:pointer;position:relative;outline:none;}
.AD .dbform .selectbox-trigger::after {content:'';position:absolute;top:50%;right:20px;width:9px;height:9px;border-right:2px solid #888;border-bottom:2px solid #888;transform:translateY(-65%) rotate(45deg);transition:transform .2s;}
.AD .dbform .selectbox.open .selectbox-trigger::after {transform:translateY(-35%) rotate(-135deg);}
.AD .dbform .selectbox-value {display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.AD .dbform .selectbox-value.placeholder {color:#888888;}
.AD .dbform .selectbox-options {display:none;position:absolute;z-index:20;top:calc(100% - 1px);left:0;width:100%;max-height:140px;overflow-y:auto;background:#fff;border:1px solid #bfbfbf;box-shadow:0 6px 16px rgba(0,0,0,.12);text-align:left;}
.AD .dbform .selectbox.open .selectbox-options {display:block;}
.AD .dbform .selectbox-option {padding:9px 18px;font-size:15px;color:#555;cursor:pointer;line-height:1.2;border-top:1px solid #f0f0f0;}
.AD .dbform .selectbox-option:first-child {border-top:0;}
.AD .dbform .selectbox-option:hover {background:#f6f6f6;color:#282828;}
.AD .dbform .selectbox-option.selected {background:#ef6719;color:#fff;}
@media screen and (max-width: 1100px) {
.conPC {display:none!important;}
.conM {display:block!important;}
.AD .floatMenu {display:none;}
.AD [class*="section"] .dbform .jellybox .icon {width:5vw;height:5vw;}
.AD .dbform_successbox {width:80%;}
/* 하단 고정바 신청폼 (모바일) — 배경 m/fixed_bottom.png(640x140) 정렬 */
.AD .fixedbar.bottom {height:21.88vw;background:#000;}
.AD .fixedbar.bottom > div {display:block;padding:0;overflow:visible;}
.AD .fixedbar.bottom .conM {display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.AD .fixedbar .dbform {position:absolute;top:0;left:0;width:100%;height:100%;transform:none;padding:0;z-index:1;}
.AD .fixedbar .dbform .landing_form {position:relative;display:block;width:100%;height:100%;}
/* 이름·연락처·지역 세로 3박스 (중앙 칼럼: x232~432, 각 y20/55/90, h30) */
.AD .fixedbar .dbform .db_list {position:absolute;top:3.13vw;left:36.25vw;width:31.25vw;display:flex;flex-direction:column;gap:0.78vw;margin:0;flex-wrap:nowrap;}
.AD .fixedbar .dbform .db_list > li {flex:none;width:100%;}
.AD .fixedbar .dbform .input-control {height:4.69vw;box-sizing:border-box;border:0;padding:0 2vw;width:100%;background:#fff;font-size:2.5vw;line-height:4.69vw;border-radius:0.6vw;color:#555;margin:0;}
.AD .fixedbar .dbform .db_list > li > div > span {display:block;font-size:2.5vw;}
/* 지역 셀렉트 (위로 펼침) */
.AD .fixedbar .dbform .selectbox-trigger {height:4.69vw;padding:0 5vw 0 2vw;font-size:2.5vw;line-height:4.69vw;border-radius:0.6vw;}
.AD .fixedbar .dbform .selectbox-trigger::after {right:2vw;width:1.4vw;height:1.4vw;}
.AD .fixedbar .dbform .selectbox-value {line-height:4.69vw;}
.AD .fixedbar .dbform .selectbox-options {top:auto;bottom:calc(100% + 1vw);max-height:40vw;}
.AD .fixedbar .dbform .selectbox-option {padding:2vw;font-size:2.6vw;}
/* 개인정보 동의 (우측 상단: x443~612, y20~58) */
.AD .fixedbar .dbform .agreebox {position:absolute;top:2.2vw;left:69.2vw;width:26.6vw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5vw;margin:0;text-align:center;}
.AD .fixedbar .dbform .jellybox {display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1vw;}
.AD .fixedbar .dbform .jellybox .icon {width:2.6vw;height:2.6vw;border-color:#fff;}
.AD .fixedbar .dbform .jellybox .icon::after {border-color:#fff;}
.AD .fixedbar .dbform .jellybox .text {font-size:1.9vw;color:#fff;line-height:1.2;}
.AD .fixedbar .dbform .agreebox button.privacy-open {font-size:1.9vw;line-height:1.2;color:#cfcfcf;padding:0;margin:0;text-decoration:underline;}
/* 문의하기 버튼 (우측 하단: x443~612, y63~120) */
.AD .fixedbar .dbform .submitbox {position:absolute;top:9.84vw;left:69.2vw;width:26.6vw;height:8.9vw;text-align:center;}
.AD .fixedbar .dbform .submitbox button {display:block;width:100%;height:100%;padding:0;border:0;background:none;}
.AD .fixedbar .dbform .submitbox img {display:block;width:100%;height:100%;object-fit:cover;border-radius:1vw;}
.AD .fixedbar .dbform .privacybox {width:80%;margin:3vw auto;}
.AD [class*="section"] .dbform {position:absolute;top:36%;left:50%;transform:translateX(-50%);width:100%;text-align:left;padding-right:0;}
.AD [class*="section"] .dbform .db_list {max-width:90%;margin:0 auto 8vw;}
.AD [class*="section"] .dbform .db_list > li {padding:0;}
.AD [class*="section"] .dbform .db_list > li .required {font-size:2.5vw;}
.AD [class*="section"] .dbform .db_list > li > div {font-size:0;padding:1vw 0;}
.AD [class*="section"] .dbform .db_list > li > div > span {display:inline-block;vertical-align:middle;font-size:3.5vw;padding:1vw;}
.AD [class*="section"] .dbform .db_list > li > div > span:first-child {font-size:4vw;width:25vw;}
.AD [class*="section"] .dbform .db_list > li > div > span:last-child {width:calc(100% - 25vw);padding:1.5vw 0;}
.AD [class*="section"] .dbform .db_list label {cursor:pointer;width:calc(50%);}
.AD [class*="section"] .dbform .input-control {display:block;border:1px solid #333;padding:.5vw 2vw;width:100%;background:#fafafa;font-size:3.4vw;margin:0;border-radius:0;color:#888888;resize:none;outline:none;}
.AD [class*="section"] .dbform textarea.input-control {min-height:26vw;}
.AD [class*="section"] .dbform .radio {flex-wrap:wrap;gap:2vw 1vw;padding:3vw 0!important;}
.AD [class*="section"] .dbform .radio label {width:auto;}
.AD [class*="section"] .dbform .radio label .text {font-size:3.5vw;word-break:keep-all;line-height:1.2;margin-right:10px;}
.AD [class*="section"] .dbform .radio label .icon {width:16px;height:16px;}
.AD [class*="section"] .dbform .agreebox {max-width:90%;font-size:3vw;margin:2vw auto;text-align:left;}
.AD [class*="section"] .dbform .agreebox .text, .AD [class*="section"] .dbform .agreebox button.privacy-open {font-size:3vw;line-height:1;}
.AD [class*="section"] .dbform .privacybox {width:40%;margin:3vw auto;}
.AD [class*="section"] .dbform .submitbox {text-align:center;width:60%;margin:0 auto;position:relative;right:0;bottom:0;}
.AD [class*="section"] .dbform .submitbox img {width:100%;}
.AD [class*="section"] .dbform .submitbox button {display:inline-block;width:auto;padding:0;}
.AD [class*="section"] .dbform .submitbox a {display:inline-block;width:auto;}
/* 커스텀 셀렉트박스 (모바일) */
.AD [class*="section"] .dbform .selectbox-trigger {padding:2.5vw 10vw 2.5vw 3vw;font-size:3.4vw;}
.AD [class*="section"] .dbform .selectbox-trigger::after {right:4vw;width:2.2vw;height:2.2vw;border-width:0 2px 2px 0;}
.AD [class*="section"] .dbform .selectbox-options {max-height:34vw;}
.AD [class*="section"] .dbform .selectbox-option {padding:2vw 3vw;font-size:3.6vw;}
.AD .fixedbar {width:100%;height:auto;background:none;}
.AD .fixedbar.top {display:none;}
.AD .fixedbar.top.hidden {top:-100%;}
.AD .fixedbar.bottom {display:block;}
.AD .fixedbar.bottom.hidden {bottom:-100%;}
.AD .fixedbar > div {width:100%;height:100%;position:relative;top:0%;left:0;transform:unset;text-align:right;overflow:hidden;}
.AD .fixedbar.bottom .layerbtn01 {top:0%;left:50%;height:30%;width:60%;transform:translateX(-50%);z-index:2;}
.AD .fixedbar.top .layerbtn01 {top:0%;left:50%;transform:translateX(-50%);height:61%;width:50%;z-index:2;}
.AD .fixedbar.top .layerbtn02 {top:0%;left:auto;right:0%;transform:none;height:100%;width:50%;z-index:2;display:block;}
.AD .mainmenulist {top:auto;bottom:0;left:0;gap:5vw;width:100%;overflow-X:scroll;transform:none;}
.AD .mainmenulist > li > a {padding:2vw;font-size:3vw;line-height:1;}
.AD img {width:100%;}
.AD [class*='section'] {background:none;}
.AD [class*='section'] .content {width:100%;height:auto;}
/* ---------------------------------------------------------------
모바일 레이어 좌표는 새 디자인(양은이네) 모바일 이미지 입고 후 작성.
이전 프로젝트(짜글이에 진심) 잔재 규칙은 새 클래스 구조와 충돌해 전부 제거함.
(.sectionmain / .section01~08 의 옛 layer 좌표, .review-marquee, bgvideo 등)
--------------------------------------------------------------- */
/* 매장 매출사례 슬라이드 (section02) — 중앙 80vw, 좌우 슬라이드가 각 10vw 씩 노출
(spaceBetween:0 이어야 80+10+10=100vw 로 정확히 맞음) */
.AD .section02 .slide01 .swiper-slide {width:65vw;}
/* 유튜브 슬라이드 (section04) — 동일하게 중앙 80vw */
.AD .section04 .slide02 .swiper-slide {width:66vw;}
.AD .ytitem .yttitle {font-size:4.4vw;}
.AD .ytitem .ytdesc {font-size:3vw;}
.AD .youtube-pop .youtube-box {width:92vw;}
.AD [class^="section"] .mobileonly {display:block;}
/* ================================================================
모바일 레이아웃 (디자인 캔버스 640px 기준)
----------------------------------------------------------------
값은 assets/img/m/ 의 조각 이미지가 m/NNt.png(통짜 시안) 안에서
어디에 놓였는지 찾아 640 기준 px 를 vw 로 환산한 것이다.
vw = 640기준px / 640 * 100
주석의 [WxH @ x,y] 가 그 원본 px 값이니 미세조정할 때 참고할 것.
================================================================ */
/* --- section01 (캔버스 640x1270) --- */
.AD .section01 .content {height:198.438vw;}
.AD .section01 .layer01 {top:0vw;left:0%;width:100%;transform:none;} /* 640x420 @ 0,0 */
.AD .section01 .layer03 {top:10.938vw;left:50%;width:87.5vw;} /* 560x474 @ 40,70 */
.AD .section01 .layer04-1 {top:88.75vw;left:50%;width:72.813vw;} /* 466x227 @ 87,568 */
.AD .section01 .layer02 {top:96.875vw;left:50%;width:100%;} /* 640x650 @ 0,620 */
.AD .section01 .layer04-2 {top:121.563vw;left:50%;width:72.813vw;} /* 466x227 @ 87,778 */
.AD .section01 .layer04-3 {top:154.375vw;left:50%;width:72.813vw;} /* 466x227 @ 87,988 */
/* 통계카드 숫자: 시안 m/01t.png 실측 — 카드(466x227) 안에서 중심 y=142 (PC 는 262 높이에 y=162).
글자 크기는 PC 와 같다(시안 글자밴드 높이 44 vs PC 46) → 54px 를 vw 로 환산. */
.AD .section01 [class*="layer04"] .layercount {top:22.188vw;font-size:8.438vw;}
/* --- section02 (캔버스 640x1240) --- */
.AD .section02 .content {height:193.75vw;}
.AD .section02 .layer01 {top:17.031vw;left:50%;width:75.781vw;} /* 485x87 @ 77,109 */
.AD .section02 .layer02 {top:38.281vw;left:50%;width:51.563vw;} /* 330x93 @ 155,245 */
.AD .section02 .layer03 {top:57.813vw;left:50%;width:78.125vw;} /* 500x80 @ 70,370 */
.AD .section02 .layer04 {top:77.5vw;left:50%;width:100%;} /* 640x579 @ 0,496 매출 슬라이드 (동적) */
.AD .section02 .layer05 {top:168.75vw;left:50%;width:87.5vw;} /* 560x50 @ 40,1080 */
.AD .section02 .layer05-1 {font-size:3vw;}
/* --- section03 (캔버스 640x2180) --- */
.AD .section03 .content {height:340.625vw;}
.AD .section03 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section03 .layer02 {top:32.813vw;left:50%;width:85.938vw;} /* 550x190 @ 45,210 */
.AD .section03 .layer03-1 {top:74.219vw;left:50%;width:70.469vw;} /* 451x475 @ 93,475 */
.AD .section03 .layer03-2 {top:150.781vw;left:50%;width:72.813vw;} /* 466x510 @ 85,965 */
.AD .section03 .layer03-3 {top:232.031vw;left:50%;width:72.344vw;} /* 463x525 @ 87,1485 */
/* --- section04 (캔버스 640x1150) --- */
.AD .section04 .content {height:179.688vw;}
.AD .section04 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section04 .layer02 {top:32.813vw;left:50%;width:91.25vw;} /* 584x217 @ 31,210 */
.AD .section04 .layer03 {top:75vw;left:50%;width:100%;} /* 640x665 @ 0,480 유튜브 슬라이드 (동적) */
/* --- section05 (캔버스 640x1670) --- */
.AD .section05 .content {height:260.938vw;}
.AD .section05 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section05 .layer02 {top:32.969vw;left:50%;width:79.063vw;} /* 506x247 @ 67,211 */
.AD .section05 .layer04-1 {top:82.813vw;left:calc(50% - 23.438vw);width:50.938vw;} /* 326x447 @ 7,530 */
.AD .section05 .layer04-2 {top:82.813vw;left:calc(50% + 23.438vw);width:50.938vw;} /* 326x447 @ 307,530 */
.AD .section05 .layer04-3 {top:150vw;left:calc(50% - 23.438vw);width:50.938vw;} /* 326x447 @ 7,960 */
.AD .section05 .layer04-4 {top:150vw;left:calc(50% + 23.438vw);width:50.938vw;} /* 326x447 @ 307,960 */
.AD .section05 .layer05 {top:221.875vw;left:50%;width:78.438vw;} /* 502x138 @ 70,1420 */
/* --- section06 (캔버스 640x2410) --- */
.AD .section06 .content {height:376.563vw;}
.AD .section06 .layer02 {top:17.188vw;left:50%;width:64.063vw;} /* 410x90 @ 115,110 */
.AD .section06 .layer01 {top:35.938vw;left:50%;width:60.625vw;} /* 388x110 @ 126,230 */
.AD .section06 .layer03 {top:57.813vw;left:50%;width:97.5vw;} /* 624x50 @ 8,370 */
.AD .section06 .layer04-1 {top:70.469vw;left:50%;width:97.813vw;} /* 626x616 @ 7,451 */
.AD .section06 .layer04-2 {top:161.094vw;left:50%;width:97.813vw;} /* 626x616 @ 7,1031 */
.AD .section06 .layer05 {top:259.375vw;left:50%;width:77.031vw;} /* 493x140 @ 74,1660 */
.AD .section06 .layer06 {top:275.781vw;left:calc(50% - 3.281vw);width:93.438vw;} /* 598x595 @ 0,1765 */
/* --- section07 (캔버스 640x1840) --- */
.AD .section07 .content {height:287.5vw;}
.AD .section07 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section07 .layer03 {top:32.813vw;left:50%;width:85.938vw;} /* 550x231 @ 45,210 */
.AD .section07 .layer02 {top:76.563vw;left:50%;width:98.594vw;} /* 631x626 @ 4,490 */
.AD .section07 .layer06 {top:173.281vw;left:50%;width:59.375vw;} /* 380x88 @ 130,1109 m/07-04.png 모바일 전용 */
.AD .section07 .layer05 {top:192.344vw;left:50%;width:99.531vw;} /* 637x430 @ 3,1231 */
.AD .section07 .layer04 {top:259.688vw;left:50%;width:85.625vw;} /* 548x71 @ 46,1662 m/07-06.png ← PC 07-04 과 같은 문구 */
/* --- section08 (캔버스 640x1140) --- */
.AD .section08 .content {height:178.125vw;}
.AD .section08 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section08 .layer02 {top:32.813vw;left:50%;width:94.375vw;} /* 604x227 @ 18,210 */
.AD .section08 .layer03 {top:76.719vw;left:50%;width:100%;} /* 640x432 @ 0,491 미디어 슬라이드 (동적) */
.AD .section08 .layer04 {top:148.281vw;left:50%;width:57.813vw;} /* 370x76 @ 134,949 */
/* --- section09 (캔버스 640x1820) --- */
.AD .section09 .content {height:284.375vw;}
.AD .section09 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section09 .layer02 {top:34.375vw;left:50%;width:81.719vw;} /* 523x235 @ 58,220 */
.AD .section09 .layer03 {top:82.5vw;left:calc(50% - 0.547vw);width:91.719vw;} /* 587x399 @ 23,528 */
.AD .section09 .layer04 {top:152.813vw;left:50%;width:97.188vw;} /* 622x761 @ 9,978 */
.AD .section09 .layer04-1 {font-size:3vw;}
/* --- section10 (캔버스 640x1540) --- */
.AD .section10 .content {height:240.625vw;}
.AD .section10 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section10 .layer02 {top:32.813vw;left:50%;width:86.25vw;} /* 552x146 @ 46,210 */
.AD .section10 .layer03-1 {top:62.344vw;left:50%;width:97.813vw;} /* 626x529 @ 7,399 */
.AD .section10 .layer03-2 {top:145.156vw;left:50%;width:97.813vw;} /* 626x529 @ 7,929 */
/* --- section11 (캔버스 640x1380) --- */
.AD .section11 .content {height:215.625vw;}
.AD .section11 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section11 .layer02 {top:32.813vw;left:50%;width:92.188vw;} /* 590x153 @ 25,210 */
.AD .section11 .layer03 {top:59.375vw;left:50%;width:100%;} /* 640x883 @ 0,380 */
/* --- section12 (캔버스 640x1760) --- */
.AD .section12 .content {height:275vw;}
.AD .section12 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section12 .layer02 {top:32.813vw;left:50%;width:67.188vw;} /* 430x241 @ 105,210 */
.AD .section12 .layer03 {top:81.25vw;left:50%;width:100%;} /* 640x1130 @ 0,520 FAQ 목록 (동적) */
/* --- section13 (캔버스 640x1390) --- */
.AD .section13 .content {height:217.188vw;}
.AD .section13 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section13 .layer02 {top:32.813vw;left:50%;width:89.063vw;} /* 570x138 @ 35,210 */
.AD .section13 .layer03 {top:62.656vw;left:50%;width:100%;} /* 640x917 @ 0,401 */
/* --- section14 (캔버스 640x1260) --- */
.AD .section14 .content {height:196.875vw;}
.AD .section14 .layer01 {top:17.188vw;left:50%;width:33.125vw;} /* 212x60 @ 214,110 */
.AD .section14 .layer02 {top:32.5vw;left:50%;width:69.688vw;} /* 446x58 @ 97,208 (제목) */
.AD .section14 .layer03 {top:42.188vw;left:50%;width:100%;} /* 640x817 @ 0,270 */
.AD .section14 .layer04 {top:171.875vw;left:50%;width:95.313vw;} /* 610x50 @ 15,1100 (하단 문구) */
/* 매장안내 지도 — 모바일은 PC 와 배치가 다르다.
PC : 목록(.storepanel)이 지도 위에 겹쳐 뜬다.
모바일 : 목록이 지도 "위쪽"에 따로 놓이고 지도는 그 아래.
시안 m/14t.png 실측(640 기준, .mapbox 는 y270 에서 시작):
목록 x20~615 y350~579 지도 x26~613 y600~1030
높이를 %(부모 높이 의존) 가 아니라 vw 로 주면 프레임 이미지 로드 전에도
지도 컨테이너 높이가 확정돼 초기 배율이 틀어지지 않는다. */
.AD .mapbox .storepanel {top:12.5vw;left:3.125vw;width:92.969vw;height:35.938vw;max-height:none;}
.AD .mapbox .storemap {top:51.563vw;left:4.063vw;width:91.875vw;height:67.188vw;}
/* 목록 항목: 한 칸 81, 썸네일 50, 좌우여백 15, 썸네일~글자 간격 10 */
.AD .mapbox .storelist::-webkit-scrollbar {width:2.813vw;}
.AD .mapbox .storeitem {gap:1.563vw;padding:2.344vw;}
.AD .mapbox .storeitem .thumb {flex:0 0 7.813vw;width:7.813vw;height:7.813vw;}
.AD .mapbox .storeitem strong {font-size:3.438vw;line-height:1.2;}
.AD .mapbox .storeitem .addr {margin-top:0.3vw;font-size:2.656vw;line-height:1.3;}
/* --- 모바일 보정 --- */
/* 가격딱지(05-03)는 모바일 시안에 없다 */
.AD .section05 .layer03 {display:none;}
/* FAQ 는 모바일에서 2단 그리드. 카드 280x210, 좌우여백 28 / 간격 28x26 (640 기준) */
.AD .faqlist {gap:4.063vw 4.375vw;}
.AD .faqitem {flex:0 0 43.75vw;width:43.75vw;}
.AD .faqitem .faqq {margin-bottom:1.5vw;font-size:3.4vw;}
.AD .faqitem .faqa {font-size:2.6vw;}
/* --- 상단 고정바 --- */
/* .fixedbar.top 은 위에서 display:none 으로 숨긴다.
그 높이(112px)만큼 밀어두었던 첫 섹션 여백도 없애야 상단이 비지 않는다. */
.AD .section01 {margin-top:0;}
/* --- section08 미디어 커버플로우 ---
시안 m/08t.png 실측(640 기준): 카드폭 448 / 영상블록 y502~765 /
제목 2줄·설명 4줄 모두 줄간격 18 / 좌우 카드는 하단정렬 0.8 축소(PC 와 동일).
.swiper-slide 폭이 PC 값(764px)으로 남아 있어 모바일에서 화면을 넘쳤다. */
.AD .mediaslide .swiper-slide {width:70vw;}
.AD .mediacard {padding:1.7vw 1.5vw 2.5vw;box-shadow:0 0.9vw 3.4vw rgba(0,0,0,.18);}
.AD .mediatext {padding-top:1.6vw;}
.AD .mediatitle {font-size:2.2vw;line-height:1.35;}
.AD .mediadesc {margin-top:1.6vw;font-size:1.8vw;line-height:1.6;}
.AD .mediaplayer {aspect-ratio:13 / 8;} /* 시안 영상블록 y502~765(264) / 폭 429 → 1.625. PC 는 720/412 */
.AD .mediaplayer .mediaplay {width:5.5vw;height:3.9vw;}
/* --- 하단 고정바 ---
시안 m/fixed_bottomt.png(640x180) 실측. 노란 바는 y40~179(높이 140)이고
위 40px 은 로고가 바 밖으로 돌출된 부분이다. 아래는 "바 기준" 좌표.
로고 x25, bottom 0, 180x180 (위로 40 돌출)
입력칸 x223, top 20/55/90, 200x30
체크원 x446, top 24, 28x28
문구 x474, 1행 top 23 / 2행 top 40, 글자 ~15
문의하기 x443, top 65, 170x55
기존 값은 하단바 이미지가 나오기 전 임시(검정 바 + 흰 글자)라 색도 함께 맞춘다. */
.AD .fixedbar.bottom {background:#f2d042;}
.AD .fixedbar.bottom > div {width:100%;} /* PC 의 1100px 고정폭이 배경 이미지까지 늘리고 있었다 */
.AD .fixedbar.bottom .fixedlogo {display:block;left:3.906vw;bottom:0;width:28.125vw;height:auto;}
.AD .fixedbar .dbform .db_list {left:34.844vw;}
/* PC 는 문구가 바 이미지에 그려져 있어 .text 를 숨기고 [자세히]를 투명 클릭영역으로 뒀다.
모바일 시안에는 문구가 실제 글자로 있으므로 PC 의 절대배치를 풀고 다시 세운다.
체크원은 두 줄 전체에 걸쳐 세로 가운데라 절대배치를 유지한다. */
.AD .fixedbar .dbform .agreebox {top:3.438vw;left:69.688vw;width:24.375vw;height:auto;display:block;gap:0;text-align:left;}
.AD .fixedbar .dbform .jellybox {position:static;top:auto;left:auto;width:auto;height:auto;display:block;}
.AD .fixedbar .dbform .jellybox .icon {position:absolute;top:0.313vw;left:0;width:4.375vw;height:4.375vw;margin:0;border:0.313vw solid #33302a;border-radius:50%;background:none;box-shadow:none;}
.AD .fixedbar .dbform .jellybox .icon::after {display:block;border-right:0.313vw solid #33302a;border-bottom:0.313vw solid #33302a;}
.AD .fixedbar .dbform .jellybox .text {display:block;margin-left:4.688vw;font-size:2.344vw;line-height:1.15;color:#242219;}
.AD .fixedbar .dbform .agreebox button.privacy-open {position:static;display:block;width:auto;height:auto;margin-left:4.688vw;font-size:2.344vw;line-height:1.15;color:#242219;text-decoration:none;}
.AD .fixedbar .dbform .submitbox {top:10.156vw;left:69.219vw;width:26.563vw;height:8.594vw;}
}