/* 레이아웃 */ #wrap{min-width:1280px; overflow: hidden; background: #fff; } #header{position: relative; z-index: 1000;} #container{ margin:0 auto;width: 100%; overflow: hidden;} #container .content_inner{width:1280px; margin:0 auto;} #footer{position: relative;padding:6em 0 14em; background:#fff; text-align:center; color: #111; z-index: 0;} #footer .footer_inner{position: relative; z-index: 5;} #footer .footer_inner ul{font-size: 0; margin-top:30px;} #footer .footer_inner ul li{display:inline-block; font-size:13px; margin-right: 7px;} #footer .footer_inner ul li span{display: inline-block;color: #ccc; padding:0 6px; font-size:12px;} #footer .footer_inner ul li strong{color: #111; font-weight:600;} #footer .footer_inner ul li strong:after{display: inline-block; content:':'; margin:0 2px;} #footer .footer_inner cite{display: block; margin-top:16px;font-size:12px; opacity: 0.7;} #footer .cirlce_logo{width: 170px;left: 50%;transform:translate(-50%,-50%);} .line{background:#e2211c ;color: #fff; padding:12px 0; font-weight:900;font-size:30px; } /* db */ .db_wrap{position: fixed; width: 100%; bottom:-200px;height:114px;padding-top:6px;z-index:100;background:#a30f0b; transition:0.8s; overflow: hidden; justify-content:center; align-content:center; align-items:center; z-index: 100;} .db_wrap.scroll_on{bottom: 0;} .db_wrap h2{margin-right:24px;} .db_wrap .db_inner{display:flex; max-width:1280px; margin:0 auto;text-align:left; justify-content:center; align-content:center; align-items:center; } .db_wrap .db_inner h3{margin-right:24px; color: #fff; width:200px; font-size:26px; letter-spacing:-2px; line-height:1.2;} .db_wrap .db_inner .db{position: relative;display:flex;gap:12px;margin:0 auto; box-sizing:border-box;z-index: 2; justify-content:center; align-content:center; align-items:center; } .db_wrap .db_inner .db ul{display:flex; flex-wrap:wrap;} .db_wrap .db_inner .db ul li{width:calc(100% / 5 );} .db_wrap .db_inner .db ul li a{text-decoration:underline; cursor: pointer;} .db_wrap .db_inner .db ul li input[type="text"]{width:100%; padding:6px 14px; height:46px;line-height:56px; background:none; border:1px solid rgba(255,255,255,0.5);border-radius:0; font-size:0.95em; box-sizing:border-box; color: #fff; font-weight: 600 !important; } .db_wrap .db_inner .db ul li input[type="text"]::placeholder{color: #fff !important; font-size:0.95em;letter-spacing:-1px; font-weight:500; } .db_wrap .db_inner .db ul li.agree{display:flex;text-align: left;color: #fff; font-size:13px; letter-spacing:-1px; justify-content:center; align-content:center; align-items:center; } .db_wrap .db_inner .db ul li.agree a{text-decoration:underline;} .db_wrap .db_inner .db ul li.agree input[type="checkbox"]{width:30px; height:30px; margin-right: 5px; vertical-align: middle;} .db_wrap .db_inner .db .db_submit{animation:submit_btn 0.3s 0s infinite alternate ease-in;} .db_wrap .db_inner .db .db_submit input[type="submit"]{width:200px; padding:8px 0; line-height:36px;background: #f8d000; color: #a30f0b; border:none; font-weight: bold; font-size:22px; letter-spacing:-1px; border-radius:0; cursor: pointer;} .db_wrap .db_inner .db .db_submit input[type="submit"]:hover{background:#ffda1c ;} @keyframes submit_btn {0%{transform:translate(0,2px)} 100%{transform:translate(0,0)}} #quick{position: fixed; right:20px; top:40%;transform:translate(0,-50%); z-index: 10;} #quick-bar{position: fixed; bottom: 80px; right:30px; z-index:110; animation:qucik_ani 0.5s 0s infinite alternate} #quick-bar a{display: block;border-radius:100%; background:#fae300;padding:12px; box-shadow: 9px 9px 20px rgba(0,0,0,.1)} #quick-bar a:hover{filter: contrast(120%);} #quick-bar a img{width:54px;} @keyframes qucik_ani{ 0%{transform:translate(0,-10px)} 100%{transform:translate(0,0)} } /* 레이어팝업 */ .layer{position:fixed; display:none; left:0;top:180px; z-index:3000000; width:100%;} .layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#f8d000; border-radius:0 10px 0 10px; color: #fff;} .layer .close_btn a{display: block;color: #fff;padding:14px 18px; font-size:20px; font-weight:bold;} .layer .layer_wrap{position:relative;width:100%; max-width:700px; top:0px; margin:0 auto; border-radius:10px; background:rgba(0,0,0,0.95); text-align:left; letter-spacing:-0.5px; box-shadow:0 0 50px rgba(0,0,0,0.6);} .layer .layer_wrap .DB_info_detail{width:100%; margin:18px auto; padding-bottom:16px; line-height:1.6; color: #fff;font-size:12px;} .layer .layer_wrap .DB_info_detail h2{padding:22px;border-bottom:1px solid #222; font-size:24px; font-weight:bold;} .layer .layer_wrap .DB_info_detail .DB_info_detail_wrap p{padding:8px;margin-bottom:12px; font-size:13px; } .layer .layer_wrap .DB_info_detail .DB_info_detail_wrap{width:98%; height:360px; padding:8px 16px; overflow:auto; box-sizing:border-box;} .layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dt{display:block; background: #fff;border-radius:3px; padding:7px 10px; font-weight: bold; color: #333;} .layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dd{margin-bottom:16px; padding:4px 12px; box-sizing:border-box;} /* ============================================================ GNB - 메인 헤더 (common.css 또는 main.css에 추가) ============================================================ */ #gnb {position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: background .3s, box-shadow .3s; background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);} #gnb.scrolled {background: rgba(0,0,0,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,.2);} #gnb.scrolled .gnb__inner {height: 64px;} #gnb.scrolled .gnb__logo {opacity: 0; pointer-events: none;} #gnb .gnb__inner {max-width: 1640px; margin: 0 auto; padding: 0 60px; height: 160px; display: flex; align-items: center; justify-content: space-between; transition: height .4s ease;} /* ── 좌우 메뉴 ── */ #gnb .gnb__left, #gnb .gnb__right {list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 48px; flex: 1;} #gnb .gnb__right {justify-content: flex-end;} #gnb .gnb__left a, #gnb .gnb__right a {font-size: 1.5rem; font-weight: 600; color: #fff; letter-spacing: -.01em; text-decoration: none; position: relative; transition: color .2s;} #gnb .gnb__left a::after, #gnb .gnb__right a::after {content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #f5c800; transition: width .25s ease;} #gnb .gnb__left a:hover, #gnb .gnb__right a:hover {color: #f5c800;} #gnb .gnb__left a:hover::after, #gnb .gnb__right a:hover::after {width: 100%;} /* ── 중앙 로고 ── */ #gnb .gnb__logo {flex-shrink: 0; width: 100px; transition: opacity .35s ease;} #gnb .gnb__logo a {display: block;} #gnb .gnb__logo img {width: 100%; height: auto; display: block;} /* 컨텐츠 */ section{position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; text-align:center; overflow: hidden; z-index: 2;} .bg_ctn{width:1920px; left:50%; margin-left:-960px;} /* 섹션 기본 */ #main01 {position: relative; width: 100%; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: center;} /* ── 배경 비디오 ── */ #main01 .main01__bg {position: absolute; inset: 0; z-index: 0;} #main01 .main01__video {width: 100%; height: 100%; object-fit: cover; display: block;} #main01 .main01__dimmed {position: absolute; inset: 0; background: rgba(0,0,0,.15);} /* ── 이너 레이아웃 ── */ #main01 .inner {position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 60px; display: flex; align-items: flex-end; justify-content: space-between; height: 100%;} /* ── 좌측 타이틀 ── */ #main01 .title {flex: 0 0 auto; width: 44%; display: flex; flex-direction: column; gap: 14px; padding-bottom: 80px; align-self: center; text-align: center;align-items: center;} #main01 .title p {margin: 0; line-height: 0;} #main01 .title img {display: block; width: 100%; height: auto;} #main01 .title__logo img {max-width: 280px;} #main01 .title__main img {max-width:516px;margin:8px 0; } #main01 .title__sub img {max-width:556px} /* ── 우측 콘텐츠 영역 - 섹션 높이 꽉 채움 ── */ #main01 .ctn {flex: 0 0 auto; width: 56%; position: relative; height: 100%; overflow: visible;} /* 배경 장식 (제일 뒤) */ #main01 .ctn__deco {position: absolute; inset: 0; z-index: 1;} #main01 .deco-item {position: absolute; display: block;} #main01 .deco--01 {width: 244px; bottom: 14%; right: 60%;} #main01 .deco--02 {width:541px; bottom: 38%; right:-51%;} /* 컵 이미지 - 중앙~하단 사이 위치 */ #main01 .ctn__cups {position: absolute; inset: 0; z-index: 2;} #main01 .cup-item {position: absolute; display: block;} #main01 .cup--01 {max-width: 419px; top: 12%; right: 28%;} #main01 .cup--02 {max-width:461px; top: 28%; right: -14%;} /* 치킨 조각 - 컵 위쪽 주변으로 흩어지게 */ #main01 .ctn__chicken {position: absolute; inset: 0; z-index: 3;} #main01 .chk {position: absolute; display: block;} #main01 .chk--01 {width: 24%; top: 2%; left: 6%;} #main01 .chk--02 {width: 22%; top: 4%; right: 1%;} #main01 .chk--03 {width: 23%; top:36%; left: 2%;} /* ============================================================ #main02 - 압도적 가성비 섹션 (main.css에 추가) ============================================================ */ #main02 {background: #f5c800; position: relative; overflow: hidden; padding: 70px 0 0;} #main02::before {content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px); background-size: 64px 64px; pointer-events: none; z-index: 0;} #main02 .inner {position: relative; z-index: 1; max-width: 1640px; margin: 0 auto; padding: 0 40px;} /* ── 타이틀 ── */ #main02 .title {text-align: center; margin-bottom: 32px; position: relative;} #main02 .title .badge {display: inline-block; background: #fff; color: #d00; font-size: 1.3rem; font-weight: 700; padding: 5px 12px; border: 2px solid #d00; margin-bottom: 14px; letter-spacing: -.01em;} #main02 .title__main {font-family: 'SchoolSafeLocker'; font-size: clamp(4rem, 6.5vw, 8rem); color: #d00; line-height: 1.15; letter-spacing: -.02em; position: relative; z-index: 1; margin: 0;} /* ── 콘텐츠 레이아웃 ── */ /* 원 2개를 flex 양끝, 음료는 absolute 중앙 */ #main02 .ctn {display: flex; justify-content: space-between; align-items: center; position: relative; min-height: 500px;} /* ── 음료 3개 - absolute 중앙, 원 뒤 ── */ #main02 .ctn__drinks {position: absolute; left: 50%; transform: translateX(-50%); bottom: -120px; width: 900px; height: 900px; z-index: 1; pointer-events: none;} #main02 .drink {position: absolute; display: block; bottom: 0;} #main02 .drink--03 {width: 56%; left: 50%; transform: translateX(-50%); z-index: 3;} #main02 .drink--04 {width: 50%; left: 35%; margin-left: -200px; transform-origin: bottom center; transform: rotate(-12deg); z-index: 2;} #main02 .drink--05 {width: 50%; right: 35%; margin-right: -200px; transform-origin: bottom center; transform: rotate(12deg); z-index: 2;} /* ── 원형 카드 - z-index 음료보다 위 ── */ #main02 .stat-card {position: relative; z-index: 2; flex-shrink: 0; margin-bottom: 60px;} #main02 .stat-card__circle {background: #fff; border-radius: 50%; width: 460px; height: 460px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 110px; position: relative; overflow: hidden; } #main02 .stat-card__circle.first{border:5px solid #d00;} #main02 .stat-card__circle--red {background: #d00; color: #fff; } #main02 .stat-card__label {font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; text-align: center; position: relative; z-index: 1;} #main02 .stat-card__num {font-family: 'SchoolSafeLocker'; font-size: 6.5rem; line-height: 1; color: #d00; letter-spacing: -.03em; text-align: center; position: relative; z-index: 1;} #main02 .stat-card__circle--red .stat-card__num {color: #fff;} #main02 .stat-card__img {position: absolute; bottom: -114px; left: 50%; transform: translateX(-50%); width: 68%; pointer-events: none; z-index: 0;} #main02 .stat-card__img img {width: 100%; display: block; margin-top:100px;} /* ============================================================ #main03 - 우리라서 가능합니다 섹션 (main.css에 추가) ============================================================ */ #main03 {width: 100%;} /* ── 상단: 이미지 배경 ── */ #main03 .main03__top {position: relative; width:96%; margin:0 auto 2%; min-height: 700px; border-radius:36px; overflow: hidden;} #main03 .main03__top-bg {position: absolute; inset: 0; background: url(../image/bg_main03.jpg) center center / cover no-repeat; z-index: 0; will-change: transform;} #main03 .main03__top .inner {position: relative; z-index: 1; padding: 60px 80px; width: 100%;} /* 섹션 타이틀 - main03__top 밖 최상단 */ #main03 .title {padding: 120px 0 40px; text-align: center;} #main03 .title .inner {max-width: 1440px; margin: 0 auto; padding: 0 80px;} #main03 .title .badge {display: inline-block; font-size: 1.4rem; font-weight: 700; color: #e2211c; letter-spacing: -.01em; margin-bottom: 12px;} #main03 .title .title__main {font-family: 'SchoolSafeLocker'; font-size: clamp(4.5rem, 5.5vw, 7.5rem); color: #111; line-height: 1.1; letter-spacing: -.02em; display: block;} /* 상단 ctn 이미지 */ #main03 .main03__top .ctn {position: absolute;left:5%;top:100px;} #main03 .main03__top .ctn img {display: block; width: 747px; height: auto; } /* ── 하단: 비디오 배경 ── */ #main03 .main03__bottom {position: relative; min-height: 600px; overflow: hidden; display: flex; align-items: center; justify-content: center;overflow: hidden;} #main03 .main03__video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;} #main03 .main03__dimmed {position: absolute; inset: 0; background: rgba(0,0,0,.5);} #main03 .main03__bottom .inner {position: relative; z-index: 1; max-width: 1640px; margin: 0 auto; padding: 80px; width: 100%; display: flex; align-items: center; justify-content: center;} /* 하단 3단 레이아웃 */ #main03 .ctn02 {display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%;} #main03 .ctn02__left {flex: 0 0 auto; text-align: left;} #main03 .ctn02__right {flex: 0 0 auto; text-align: right;} #main03 .ctn02__center {flex: 1; text-align: center;} #main03 .ctn02__label {font-size: 1.8rem; font-weight: 800; color: #f5c800; letter-spacing: -.02em; margin-bottom: 6px;} #main03 .ctn02__num {font-family: 'SchoolSafeLocker'; font-size: 2.4rem; color: #fff; letter-spacing: -.02em;} #main03 .ctn02__sub {font-size: 1.4rem; color: rgba(255,255,255,.75); letter-spacing: .08em; margin-top: 16px; word-break: keep-all;} #main03 .ctn02 .title__img {display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto;} /* ============================================================ #main04 - 저인건비 고효율 시스템 (main.css에 추가) ============================================================ */ #main04 {background: #e2211c; position: relative; overflow: hidden; padding: 80px 0;} #main04::before {content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0;} #main04 .inner {position: relative; z-index: 1; max-width: 1640px; margin: 0 auto; padding: 0 80px; display: flex; align-items: center; justify-content: space-between; gap: 60px;} /* ── 좌측 텍스트 ── */ #main04 .ctn {flex: 0 0 auto; width: 44%; text-align: left;} #main04 .ctn .badge {display: inline-block; font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.01em; margin-bottom: 20px;} #main04 .title {margin-bottom: 6px;} #main04 .title__line01 {display: block; font-family: 'SchoolSafeLocker'; font-size: 80px; color: #fff; line-height: 1.2; letter-spacing: -.02em;} #main04 .title__line02 {display: block; font-family: 'SchoolSafeLocker'; font-size: 80px; color: #f5c800; line-height: 1.2; letter-spacing: -.02em;} #main04 .desc {font-size: 1.2rem; font-weight: 600; color: rgba(255,255,255,.85); letter-spacing: -.01em; line-height: 1.5; text-align: left;} /* ── 우측 비주얼 ── */ #main04 .ctn02 {width: 52%; position: relative; height: 580px;} #main04 .ctn02 .oval-wrap {position: absolute; width: 650px; height: 750px; top: -70px; left: 0;} #main04 .ctn02 .oval-bg {position: absolute; width: 100%; height: 100%; transform: translate(20px, 20px); left: 0;} #main04 .ctn02 .oval-svg {position: absolute; width: 100%; height: 100%; left: 0;} #main04 .ctn02 .oval-svg video {width: 100%; height: 100%; object-fit: cover;} #main04 .ctn02 .badge03 {position: absolute; top: 5%; right: 5%; background: #f5c800; color: #111; font-size: 1.8rem; font-weight: 900; padding: 10px 24px; border-radius: 40px; letter-spacing: -.02em;} /* 타원 위 오버레이 이미지들 */ #main04 .ctn02__ctn04 {position: absolute; top: 8%; left: 24%; z-index: 5; width: 52%;} #main04 .ctn02__ctn04 img {width: 100%; display: block;} #main04 .ctn02__ctn03 {position: absolute; top:17%; right: 2%; z-index: 6; width: 22%;} #main04 .ctn02__ctn03 img {width: 100%; display: block;} #main04 .ctn02__ctn02 {position: absolute; top: 28%; left: 6%; z-index: 5; width: 18%;} #main04 .ctn02__ctn02 img {width: 100%; display: block;} /* 컵 이미지 */ #main04 .ctn02__cup {position: absolute; bottom: -45px; right: 50px; width: 38%; z-index: 3;} #main04 .ctn02__cup img {width: 100%; display: block;} /* ============================================================ #main05 - ONE CUP TWO TASTES + 메뉴 탭 (main.css에 추가) ============================================================ */ #main05 {background: #f5c800; position: relative; overflow: hidden; padding-top:100px;} #main05::before {content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px); background-size:60px 60px; pointer-events: none; z-index: 0;} #main05 .inner {position: relative; z-index: 1; max-width: 1640px; margin: 0 auto; padding: 0 60px;} /* ── 상단 비주얼 ── */ #main05 .main05__visual {position: relative; padding-top: 60px;} #main05 .main05__visual .inner {display: flex;align-items: flex-start; justify-content: space-between; gap: 0;} /* 좌측 타이틀 */ #main05 .visual__left {flex: 0 0 auto; width: 30%; display: flex; align-items: center; margin-top:50px;} #main05 .visual__left img {width: 430px; height: auto; display: block;} /* 중앙 컵 */ #main05 .visual__center {flex: 0 0 auto; position: relative; z-index: 2; margin-top: -20px;} #main05 .visual__center img {width: 597px; height: auto; display: block;} /* 우측 타이틀 */ #main05 .visual__right {flex: 0 0 auto; width: 30%; display: flex; align-items: center; justify-content: flex-end; margin-top:50px;} #main05 .visual__right img {width: 445px; height: auto; display: block;} /* ── 마퀴 배너 ── */ #main05 .main05__marquee {background: #111; overflow: hidden; padding:12px 0; position:absolute; z-index:0; bottom: 160px; line-height:1.1;} #main05 .marquee__track {display: flex; align-items: center; gap: 0; white-space: nowrap; animation: marquee05 40s linear infinite;color: #f8d000;} #main05 .marquee__track span {font-family: 'Montserrat'; font-weight: 800;font-size: 11rem; color: #f8d000; padding: 0 24px; letter-spacing: .04em;} #main05 .marquee__track .marquee__dot {color: #f8d000; font-size: 1.4rem; padding: 0 10px;} #main05 .marquee__track .marquee__icon {font-size: 2.8rem; padding: 0 8px;} @keyframes marquee05 { 0% {transform: translateX(0);} 100% {transform: translateX(-50%);} } /* ── 메뉴 탭 영역 ── */ #main05 .main05__menu {padding: 60px 0 130px;} /* 탭 버튼 */ #main05 .menu__tabs {list-style: none; padding: 0; margin: 0 0 48px; display: flex; align-items: center; justify-content: center; gap: 12px;} #main05 .menu__tabs li {margin: 0 -12px;} #main05 .tab-btn {width: 190px;background: #fff; border:1px solid #111; color: #111; font-size: 1.4rem; font-weight: 700; padding: 14px 32px; border-radius: 40px; cursor: pointer; transition: background .2s, color .2s; letter-spacing: -.05em;} #main05 .tab-btn.active {background: #111; color: #fff;} #main05 .tab-btn:hover {background: #111; color: #fff;} /* 탭 패널 */ #main05 .menu__panels {position: relative;} #main05 .menu__panel {display: none;} #main05 .menu__panel.active {display: block;} /* 메뉴 카드 */ #main05 .menu-card {text-align: center; padding: 0 8px;} #main05 .menu-card__img {display:flex;border-radius: 50%; overflow: hidden; aspect-ratio: 1/1; background: #fff; margin-bottom: 16px; border: 3px solid #000; justify-content:center; align-content:center; align-items:center; } #main05 .menu-card__img img {width:70%;display: block;} #main05 .menu-card__name {font-size: 0.95rem; font-weight: 700; color: #111; letter-spacing: -.02em; word-break: keep-all;} /* Swiper 커스텀 */ #main05 .menu-swiper {padding: 10px 0 20px;} #main05 .swiper-button-prev, #main05 .swiper-button-next {width: 48px; height: 48px; background: #111; border-radius: 50%; color: #fff;} #main05 .swiper-button-prev::after, #main05 .swiper-button-next::after {font-size: 1.6rem; font-weight: 900;} #main05 .swiper-button-prev {left: 0; top: 144px;} #main05 .swiper-button-next {right: 0; top: 144px;} #main05 #tab-drink .menu-card__img img{width:40%;} /* ============================================================ #main06 - 시각으로 맛보는 즐거움 (main.css에 추가) ============================================================ */ #main06 {background: #fff; padding: 100px 0;} #main06 .inner {max-width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px;} /* ── 좌우 슬라이드 ── */ #main06 .ctn {flex: 0 0 auto; width: 31%;} #main06 .ctn .swiper {border-radius: 24px; overflow: hidden;} #main06 .ctn .swiper-slide img {width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover;} /* 페이지네이션 */ #main06 .swiper-pagination {bottom: 14px;} #main06 .swiper-pagination-bullet {background: #fff; opacity: .6; width: 8px; height: 8px;} #main06 .swiper-pagination-bullet-active {background: #fff; opacity: 1; width: 24px; border-radius: 4px;} /* ── 중앙 텍스트 ── */ #main06 .title {flex: 0 0 auto; width: 28%; text-align: center;} #main06 .title__main {font-family: 'SchoolSafeLocker'; font-size: clamp(4rem, 4.5vw, 6.4rem); color: #111; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 28px;} #main06 .title__main em {color: #e2211c; font-style: normal;} #main06 .title__desc {font-size: 0.9rem; color: #444; line-height: 1.8; letter-spacing: -.01em; word-break: keep-all;} #main06 .title__desc strong {color: #111; font-weight: 700;} /* ============================================================ #main07 - 체계적인 가맹 지원 (main.css에 추가) ============================================================ */ #main07 {background: #e2211c; position: relative; overflow: hidden; padding:120px 0 0;} /* 워터마크 */ #main07 .main07__watermark {position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; pointer-events: none; z-index: 0; overflow: hidden;} #main07 .main07__watermark span {font-family: 'Montserrat';line-height:1;font-weight: 800; font-size: 8rem; color: #d81d19; white-space: nowrap; display: block; text-transform:uppercase } #main07 .main07__watermark span:nth-child(odd) {animation: wm-left 20s linear infinite;} #main07 .main07__watermark span:nth-child(even) {animation: wm-right 24s linear infinite;} @keyframes wm-left { 0% {transform: translateX(0);} 100% {transform: translateX(-30%);} } @keyframes wm-right { 0% {transform: translateX(-30%);} 100% {transform: translateX(0%);} } #main07 .inner {position: relative; z-index: 1; max-width: 1640px; margin: 0 auto; padding: 0 40px; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;} /* ── 좌우 카드 열 ── */ #main07 .ctn {flex: 0 0 auto; width: 26%; display: flex; flex-direction: column; gap: 20px; padding-top: 60px;} /* 카드 */ #main07 .card {background: #fff; border-radius: 20px; padding: 32px 28px; text-align: center; border:2px solid #111} #main07 .card__title {font-family: 'SchoolSafeLocker'; font-size: 2.2rem; color: #e2211c; letter-spacing: -.02em; margin-bottom: 8px; line-height: 1.2;} #main07 .card__desc {font-size:0.9rem; color: #444; line-height: 1.6; letter-spacing: -.01em; word-break: keep-all;} /* ── 중앙 타이틀 ── */ #main07 .title {flex: 0 0 auto; width: 42%; text-align: center; display: flex; flex-direction: column; align-items: center;} #main07 .title .badge {display: inline-block; font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.01em; margin-bottom: 14px;} #main07 .title__main {font-family: 'SchoolSafeLocker'; font-size: clamp(4.5rem, 5vw, 7rem); color: #fff; line-height: 1.1; letter-spacing: -.02em; margin-bottom:8px;} #main07 .title__main em {color: #f5c800; font-style: normal;} #main07 .title__desc {font-size:1rem; color: rgba(255,255,255,.85); line-height: 1.7; letter-spacing: -.01em; word-break: keep-all; margin-bottom: 40px;} #main07 .title__img {width: 100%; margin-top: auto;} #main07 .title__img img {width: 100%; display: block;} /* ============================================================ #main08 - 가맹비 표 (main.css에 추가) ============================================================ */ #main08 {background: #fff; padding: 150px 0 140px;} #main08 .inner {max-width: 1300px; margin: 0 auto; padding: 0 60px;} /* ── 타이틀 ── */ #main08 .title {text-align: center; margin-bottom: 48px;} #main08 .title__main {font-family: 'SchoolSafeLocker'; font-size: clamp(5rem, 6vw, 7rem); color: #111; letter-spacing: -.02em; line-height: 1;} /* ── 테이블 ── */ #main08 .ctn {width: 100%; text-align:left;} #main08 .fee-table {width: 100%; border-collapse: collapse; border: 2px solid #111; border-left: none; border-right: none;} /* 헤더 */ #main08 .fee-table thead tr {background: #f5c800;} #main08 .fee-table th {padding: 16px 24px; font-size: 1.4rem; font-weight: 800; color: #111; letter-spacing: -.02em; text-align: left; border: none;} #main08 .fee-table th:first-child {width: 160px;} #main08 .fee-table th:last-child {width: 220px; text-align: right;} /* 바디 */ #main08 .fee-table tbody tr {border-bottom: 1px solid #e8e8e8;} #main08 .fee-table tbody tr:last-child {border-bottom: none; border-top: 1px solid #e8e8e8;} #main08 .fee-table td {padding: 18px 24px; font-size: 1.05rem; color: #333; line-height: 1.7; vertical-align: middle;} /* 구분 (첫번째 컬럼) */ #main08 .fee-name {font-weight: 800; color: #111; font-size: 1.4rem; letter-spacing: -.02em; white-space: nowrap;} /* 금액 (마지막 컬럼) */ #main08 .fee-price {font-weight: 800; font-size: 1.5rem; color: #111; text-align: right; white-space: nowrap; letter-spacing: -.02em;} #main08 .fee-price--special {font-size: 1.4rem; color: #111;} #main08 .fee-price--special span {font-size: 1.2rem; font-weight: 600; color: #666; margin-left: 6px;} /* 주석 */ #main08 .fee-note {margin-top: 20px;} #main08 .fee-note p {font-size: 0.9rem; color: #888; line-height: 1.4; letter-spacing: -.01em;} /* ============================================================ #main09 - 가맹절차 (main.css에 추가) ============================================================ */ #main09 {background: #f5c800; position: relative; overflow: hidden; padding: 120px 0 100px;} #main09::before {content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px); background-size: 60px 60spx; pointer-events: none; z-index: 0;} #main09 .inner {position: relative; z-index: 1; max-width: 1640px; margin: 0 auto; padding: 0 60px;} /* ── 타이틀 ── */ #main09 .title {text-align: center; margin-bottom: 32px;} #main09 .title__main {font-family: 'SchoolSafeLocker'; font-size: clamp(5rem, 6vw, 6rem); color: #e2211c; line-height: 1; letter-spacing: -.02em; margin-bottom:4px;} #main09 .title__desc {font-size: 1.1rem; color: #e2211c; letter-spacing: -.01em; font-weight: 600;} /* ── 스텝 레이아웃 ── */ #main09 .ctn {display: flex; align-items: center; justify-content: center; gap: 0;} /* 스텝 아이템 */ #main09 .step-item {display: flex; flex-direction: column; align-items: center; gap: 20px; flex: 0 0 auto;} #main09 .step-item__circle {width: 180px; height: 180px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0,0,0,.1);} #main09 .step-item__circle img {width: 100px; height: 100px; object-fit: contain;} #main09 .step-item__info {text-align: center;} #main09 .step-num {font-family: 'SchoolSafeLocker'; font-size: 0.9rem; color: #e2211c; letter-spacing: .02em; margin-bottom: 2px;} #main09 .step-name {font-size: 1.1rem; font-weight: 600; color: #333; letter-spacing: -.02em; white-space: nowrap;} /* 화살표 */ #main09 .step-arrow {flex-shrink: 0; width: 32px; height: 32px; margin: 0 8px 40px; position: relative;} #main09 .step-arrow::before {content: '›'; font-size: 3.2rem; color: #caac0c; font-weight: 300; line-height: 1;} #main10{padding:130px 0 200px; background:url(../image/bg_main10.jpg);} #main10 .inner{display:flex; max-width:1280px; margin:0 auto; gap:60px;} #main10 .inner .title{width: 60%;position: relative;text-align: center;} #main10 .inner .title .bot_img{position: absolute; bottom:-430px; } #main10 .inner .db_area{position: relative;text-align:left;color: #fff;width:40%; z-index:1;} #main10 .inner .db_area ul li{padding:16px 0; display:flex;border-bottom:2px solid #fff; } #main10 .inner .db_area ul li:last-child{border-bottom: none;} #main10 .inner .db_area ul li label{width: 150px;font-size: 20px; font-weight:600;} #main10 .inner .db_area ul li label span{color: #f8d000; } #main10 .inner .db_area ul li input[type="text"]{width:calc(100% - 150px);border:none; background: none; color: #fff !important;font-size:17px;} #main10 .inner .db_area ul li input[type="text"]::placeholder{color: #fff !important;} #main10 .inner .db_area ul li.agree{width:100%;display:flex; justify-content:center; align-content:center; align-items:center; } #main10 .inner .db_area ul li.agree label{width:100%;font-size:16px; font-weight:400;} #main10 .inner .db_area ul li.agree input[type="checkbox"]{width:20px; height:20px; margin-right:6px;} #main10 .inner .db_area .db_submit{margin-top:24px;} #main10 .inner .db_area .db_submit input{width:100%; background:#f8d000 ; color: #e2211c; padding:16px 0; font-size:24px; font-weight:600; border:none; cursor: pointer;} #main10 .inner .db_area .db_submit input:hover{background:#ffda1c;} #main03_new {position: relative; overflow: hidden; padding: 140px 0; background: url('../image/bg_main03_new.jpg') center center / cover no-repeat;} #main03_new .inner {position: relative; z-index: 1; max-width: 1640px; margin: 0 auto; padding: 0 80px; display: flex; align-items: center; justify-content: space-between; gap: 40px;} /* ── 좌측 텍스트 ── */ #main03_new .ctn {flex: 0 0 auto; width: 38%; text-align: left;} #main03_new .badge {display: inline-block; background: #fff; color: #d00; font-size: 1.3rem; font-weight: 700; padding: 5px 12px; border: 2px solid #d00; margin-bottom: 14px; letter-spacing: -.01em;} #main03_new .title {margin-bottom: 20px;} #main03_new .title__line01 {display: block; font-family: 'SchoolSafeLocker'; font-size: clamp(4rem, 5.5vw, 7rem); color: #111; line-height: 1.15; letter-spacing: -.02em;} #main03_new .title__line02 {display: block; font-family: 'SchoolSafeLocker'; font-size: clamp(4rem, 5.5vw, 7rem); color: #e2211c; line-height: 1.15; letter-spacing: -.02em;} #main03_new .desc {font-size: 1.3rem; font-weight: 600; color: #333; line-height: 1.7; letter-spacing: -.01em;} #main03_new .ctn02 {flex: 0 0 auto; width:60%; position: relative; height: 600px;} #main03_new .red-circle {position: absolute; width: 460px; height: 460px; background: #e2211c; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0;} #main03_new .circle-txt {position: absolute; width: 160px; height: 160px; top: 10px; left: 60%; transform: translateX(-50%); z-index: 3; animation: rotateTxt 8s linear infinite;} #main03_new .circle-txt img {width: 100%; display: block;} @keyframes rotateTxt {0% {transform: translateX(-50%) rotate(0deg);} 100% {transform: translateX(-50%) rotate(360deg);}} #main03_new .food img {width: 100%; display: block;} /* 치킨 컵 - 좌상단 */ #main03_new .food--ctn01 {position: absolute; width: 48%; top: -40px; left:30px; z-index: 2;} /* 떡볶이 컵 - 우상단 */ #main03_new .food--ctn02 {position: absolute; width:48%; top: 120px; right: 0px; z-index: 2;} /* 소떡 접시 - 하단 중앙 */ #main03_new .food--ctn03 {position: absolute; width: 60%; bottom:-40px; left: 25%; transform: translateX(-50%); z-index: 2;} #main04_new {background: #e2211c;position: relative; overflow: hidden; padding:100px 0;} #main04_new::before {content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0;} #main04_new .inner {position: relative; z-index: 1; max-width:1440px; margin: 0 auto; padding: 0;} /* ── 3컬럼 그리드 ── */ #main04_new .grid-wrap {display: grid; grid-template-columns: 1fr 740px 1fr; gap: 10px; align-items: stretch; } #main04_new .grid-col--left {display: flex; flex-direction: column; gap: 20px;} #main04_new .grid-col--right {display: flex; flex-direction: column; gap:20px;} #main04_new .grid-col--center {display: flex; align-items: center; justify-content: center;} /* ── 영상 카드 ── */ #main04_new .video-card {position: relative; overflow: hidden; border-radius: 4px; flex: 1; border:2px solid #111} #main04_new .video-card video {width: 100%; height: 100%; min-height:300px; object-fit: cover; display: block; filter: brightness(0.65);} #main04_new .video-card__label {font-family: 'SchoolSafeLocker';position: absolute; bottom: 0; left: 0; right: 0; background: #fff; color: #111; font-size: 1.7rem; text-align: center; padding: 12px 0; } /* ── 중앙 타이틀 ── */ #main04_new .center-ctn {text-align: center; padding: 0 10px;} #main04_new .center-ctn__logo {width: 100px; margin: 0 auto 16px;} #main04_new .center-ctn__logo img {width: 100%; display: block;} #main04_new .center-ctn__title {margin-bottom: 14px;} #main04_new .center-ctn .line01 {display: block; font-family: 'SchoolSafeLocker'; font-size:110px; color: #f5c800; line-height: 1.15; letter-spacing: -.02em;} #main04_new .center-ctn .line02 {display: block; font-family: 'SchoolSafeLocker'; font-size:110px; color: #fff; line-height: 1.15; letter-spacing: -.02em;} #main04_new .center-ctn__desc {font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,.9); letter-spacing: -.01em; line-height: 1.6;} /* ── 하단 리스트 ── */ #main04_new .feat-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; list-style: none; padding: 0;} #main04_new .feat-item {text-align: center; padding: 48px 24px 52px; border:2px solid #111; border-right:none} #main04_new .feat-item:last-child{border-right:2px solid #111;} #main04_new .feat-item:nth-child(odd) {background: #f5c800;} #main04_new .feat-item:nth-child(even) {background: #fff;} #main04_new .feat-item__icon {width: 120px; height:120px; margin: 0 auto 4px;} #main04_new .feat-item__icon img {width: 100%; display: block;} #main04_new .feat-item__title {font-size: 2.2rem; color: #111; font-family: 'SchoolSafeLocker';} #main04_new .feat-item__desc {font-size: 0.9rem; font-weight: 500; color: #444; letter-spacing: -.01em; line-height: 1.5;} .marquee-wrapper {position: absolute; bottom: 0;width: 100%; overflow: hidden; white-space: nowrap; padding: 12px 0; user-select: none; background: #e2211c; z-index: 10;} .marquee-track { display: inline-flex; align-items: center; animation: marquee 40s linear infinite;} @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-item {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; display: inline-block; font-size: 28px; font-weight: 500; color: #fff; padding: 0 40px; flex-shrink: 0; font-weight:900;} .marquee-wrapper2 {position: absolute;bottom: 130px; width:100%; overflow: hidden; white-space: nowrap; padding:4px 0; user-select: none;background: #000; z-index:-1;} .marquee-track2 { display: inline-flex; align-items: center; animation: marquee2 240s linear infinite; } @keyframes marquee2 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-item2 {line-height:1.1; font-family: "Montserrat", sans-serif; display: inline-flex; align-items: center; gap: 16px; font-size:175px; font-weight: 500; color: #f8d000; padding: 0 20px; flex-shrink: 0; } .marquee-item2 img { width: 137px; height: 137px; object-fit: cover; border-radius: 50%; } #main05_new {position: relative; overflow: hidden; padding: 120px 0; background: #f9f6f0;} #main05_new .inner {position: relative; z-index: 1; max-width: 1640px; margin: 0 auto; padding: 0 80px; display: flex; align-items: center;justify-content: center;} /* ── 좌측 영상 ── */ #main05_new .ctn {flex: 0 0 auto; width: 52%;} #main05_new .video-wrap {position: relative; border-radius:40px; overflow: hidden; aspect-ratio: 826 / 547;} #main05_new .video-wrap video {width: 100%; height: 100%; display: block; object-fit: cover;} /* ── 원형 오버레이 - inner 정중앙 ── */ #main05_new .video-wrap__circle {position: absolute; width: 140px; height: 140px; top: 50%; left: 50%; transform: translate(-40%, -50%); z-index: 5;} #main05_new .video-wrap__circle-inner {position: absolute; width: 70%; height: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;} #main05_new .video-wrap__circle-inner img {width: 100%; display: block;} #main05_new .video-wrap__circle-txt {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; animation: rotateTxt05 8s linear infinite;} #main05_new .video-wrap__circle-txt img {width: 100%; display: block;} @keyframes rotateTxt05 {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}} /* ── 우측 텍스트 ── */ #main05_new .ctn02 {flex: 0 0 auto; width: 46%; text-align: left;margin-left: 4%; text-align: center;} #main05_new .badge {display: inline-block; font-size: 1.4rem; font-weight: 700; color: #e2211c; border: 2px solid #e2211c; padding: 4px 14px; margin-bottom: 20px; letter-spacing: -.01em;} #main05_new .title {margin-bottom: 20px;} #main05_new .title__line01 {display: block; font-family: 'SchoolSafeLocker'; font-size: clamp(3.8rem, 5vw, 6.8rem); color: #111; line-height: 1.15; letter-spacing: -.02em;} #main05_new .title__line01 em {color: #e2211c; font-style: normal;} #main05_new .title__line02 {display: flex; align-items: center; gap: 0; font-family: 'SchoolSafeLocker'; font-size: clamp(3.8rem, 5vw, 6.8rem); color: #111; line-height: 1.15; letter-spacing: -.02em;} #main05_new .title__logo {height: 0.85em; width: auto; display: inline-block; vertical-align: middle;} #main05_new .desc__strong {font-size: 1.5rem; font-weight: 900; color: #111; letter-spacing: -.02em; } #main05_new .desc {font-size: 1.1rem; font-weight: 500; color: #555; letter-spacing: -.01em; line-height: 1.6;}