@charset "utf-8";
.sec-tit {font-family: Recipekorea; font-size: var(--font-size-40); font-weight: 400; line-height: 1.4em; color: var(--dark-color);}
.group-tit {display: flex; align-items: center; gap: 15px; font-size: var(--font-size-32); font-weight: 600; line-height: 1.4375em; color: var(--dark-color);}
.group-tit:before {content: ''; display: block; width: 16px; height: 16px; background: url('/images/common/gnb-deco.svg') no-repeat center center / contain;}
.root_daum_roughmap .wrap_map, .root_daum_roughmap, .direction-map iframe {width: 100% !important; height: 100% !important;}

.banner-brand-about {padding: clamp(50px, calc(200 / var(--inner) * 100vw), 200px) 0; background: url('/images/sub/bg-banner-about.jpg') no-repeat center center / cover;}
.brand-logo-cnt {display: flex; flex-direction: column; gap: var(--space-80);}
.ci-boxes {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-15);}
.ci-box {display: flex; align-items: center; justify-content: center; background: #FAFAFA; border-radius: var(--radius-24); padding: clamp(25px, calc(100 / var(--inner) * 100vw), 140px);}
.color-boxes {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.color-box {display: flex; flex-direction: column; gap: var(--space-50); padding: var(--space-30); border-radius: var(--radius-16); color: #fff; font-size: var(--font-size-18); font-weight: 600; line-height: 1.7778em;}
.color-box .name {font-size: var(--font-size-24); font-weight: 700; line-height: 1.5833em;}
.color-box:first-child {color: var(--primary-color);}

.history-banner {padding: clamp(35px, calc( 135 / var(--inner) * 100vw ), 135px) var(--container-space);}
.history {padding-top:63px; position:relative;}
.history-wrap {display: flex;}
.history-wrap:not(:last-child) {padding-bottom: 135px;}
.history-year, .history-items {width: 50%;}
.history-year {font-size: clamp(24px, calc( 56 / var(--inner) * 100vw ), 56px); font-weight: 700; color: var(--dark-color);}
.history-month {min-width: 100px; padding-left: 40px; font-size: clamp(18px, calc( 25 / var(--inner) * 100vw ), 25px); color: var(--primary-color); font-weight: 600;}
.history .group {position:relative;}
.history .group .cnt {display: flex; position:relative;}
.history .group:not(:last-child) .cnt {padding-bottom:85px;}
.history .group:before {content:""; z-index:50; position:absolute; top:5px; left:0; margin-left:-12px; width:24px; height:24px; border-radius:100%; background:#e4e4e4;}
.history .group:after {content:""; z-index:50;position:absolute; top:14px; left:0; margin-left:-3px; width:6px; height:6px; border-radius:100%; background:#999;}
.history .group ul {padding-top: 2px;}
.history .group ul li {line-height:1.4em; margin-bottom:12px;}
.history .group ul li:last-child {margin-bottom:0;}
.history .group.active:after {background:var(--primary-color);}
.history .group.active:before {background: var(--primary-color); opacity: .2;}
.history-wrap:nth-child(odd) {flex-direction: row-reverse; text-align: right;}
.history-wrap:nth-child(odd) .group .cnt {flex-direction: row-reverse;}
.history-wrap:nth-child(odd) .history-month {padding-left: 0; padding-right: 40px;}
.history .history-wrap:nth-child(odd) .group:before {left: auto; right: 0; margin-left: 0; margin-right: -12px;}
.history .history-wrap:nth-child(odd) .group:after {left: auto; right: 0; margin-left: 0; margin-right: -3px;}
.progress-container {position:absolute; left:50%; top:0; height:100%; width:2px; margin-left: -1px; background: #ddd url("../images/sub/dashed.png") repeat 50% 50%; z-index:10; overflow: hidden;}
.progress-bar {width:1px; background:var(--primary-color); height:0;}
.history#history .progress-container {background: #ddd;}
.history#history .progress-bar {width: 2px; background: var(--secondary-color);}
.history .row {display: flex; align-items: flex-start; gap: clamp(15px, calc(30 / var(--inner) * 100vw), 80px); padding-bottom: var(--space-140); position: relative; z-index: 20; line-height: 1.58;}
.history .row-left {padding-left: calc(50% - clamp(20px, calc(56 / var(--inner) * 100vw), 56px) / 2);}
.history .row-right {padding-right: calc(50% - clamp(20px, calc(56 / var(--inner) * 100vw), 56px) / 2); flex-direction: row-reverse;}
.history .mark {flex-shrink: 0; display: flex; align-items: center; padding-top: 12px;}
.history .dot {display: block; width: clamp(20px, calc(56 / var(--inner) * 100vw), 56px); height: clamp(20px, calc(56 / var(--inner) * 100vw), 56px); border-radius: 50%; box-sizing: border-box; border: clamp(6px, calc(18 / var(--inner) * 100vw), 18px) solid #FAFAFA; background: var(--gray-color);}
.history .row.active .dot {border-color: #F3F9DC; background: var(--secondary-color);}
.history .box {flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-40);}
.history .row-right .box {text-align: right;}
.history .box .tit {margin: 0; font-size: var(--font-size-64); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--gray-color2);}
.history .row.active .box .tit {color: var(--primary-color);}
.history .box .list {display: flex; flex-direction: column; gap: var(--space-30); margin: 0; padding: 0; list-style: none;}
.history .box .item {display: flex; align-items: flex-start; gap: var(--space-24); margin: 0; font-size: var(--font-size-24); line-height: 1.58em;}
.history .row-right .item {justify-content: flex-end;}
.history .box .ico {flex-shrink: 0; margin: 0; color: var(--secondary-color);}
.history .box .ico img {display: block; width: 12px; height: 1.58em; filter: grayscale(1);}
.history .row.active .box .ico img {filter: grayscale(0);}
.history .row-right .txt {text-align: right;}

.page-franchise-about .intro {padding-bottom: var(--space-100);}
.page-franchise-about .hero {display: flex; align-items: center; justify-content: center; gap: var(--space-80); flex-wrap: wrap;}
.page-franchise-about .hero .img {margin: 0; flex: 0 1 clamp(280px, calc(680 / var(--inner) * 100vw), 680px); max-width: 100%; border-radius: var(--radius-40); overflow: hidden;}
.page-franchise-about .hero .img img {display: block; width: 100%; aspect-ratio: 680 / 480; object-fit: cover;}
.page-franchise-about .hero .txt {display: flex; flex-direction: column; align-items: center; gap: var(--space-40); flex: 1 1 280px; min-width: 0; text-align: center;}
.page-franchise-about .hero .tit {margin: 0; font-size: var(--font-size-44); font-weight: 600; line-height: 1.32; letter-spacing: -0.02em; color: var(--dark-color);}
.page-franchise-about .hero .tit .brand {color: var(--primary-color);}
.page-franchise-about .hero .desc {margin: 0; font-size: var(--font-size-28); font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: #2A521A;}
.page-franchise-about .link {padding: var(--space-100) var(--container-space) var(--space-140); background: #FCFAEE;}
.page-franchise-about .fblock {display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, clamp(300px, calc(708 / var(--inner) * 100vw), 708px)); gap: 16px; align-items: stretch;}
.page-franchise-about .fblock .col {display: flex; flex-direction: column; gap: 16px; min-width: 0;}
.page-franchise-about .fcard {display: flex; align-items: center; gap: var(--space-30); padding: 16px 16px 16px 16px; background: #fff; border-radius: var(--radius-24); text-decoration: none; color: inherit; box-sizing: border-box;}
.page-franchise-about .fcard .thumb {flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-30); background: #F3F9DC; border-radius: var(--radius-16);}
.page-franchise-about .fcard .thumb.type2 {background: #E5EFE2;}
.page-franchise-about .fcard .thumb .img {display: flex; align-items: center; justify-content: center; width: clamp(100px, calc(140 / var(--inner) * 100vw), 140px); height: clamp(100px, calc(140 / var(--inner) * 100vw), 140px); margin: 0;}
.page-franchise-about .fcard .thumb .img img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;}
.page-franchise-about .fcard .cnt {display: flex; flex-direction: column; gap: var(--space-48); align-items: flex-start; min-width: 0;}
.page-franchise-about .fcard .txt {display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;}
.page-franchise-about .fcard .tit {margin: 0; font-size: var(--font-size-28); font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; color: var(--dark-color);}
.page-franchise-about .fcard .desc {margin: 0; font-size: var(--font-size-20); font-weight: 500; line-height: 1.7; letter-spacing: -0.02em; color: var(--gray-color2);}
.page-franchise-about .fcard .go {display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 16px; background: var(--secondary-color); border-radius: 80px;}
.page-franchise-about .fcard .go .ico {display: flex; align-items: center; justify-content: center; width: 8px; height: 8px; margin: 0;}
.page-franchise-about .fcard .go .ico img {display: block; width: 8px; height: 8px;}
.page-franchise-about .fcta {position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; padding: var(--space-48); background: #2A521A; border-radius: var(--radius-24); text-decoration: none; color: inherit; box-sizing: border-box;}
.page-franchise-about .fcta .inner {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 25px; min-width: 0; height: 100%;}
.page-franchise-about .fcta .txt {display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left;}
.page-franchise-about .fcta .tit {margin: 0; font-size: var(--font-size-32); font-weight: 600; line-height: 1.44; letter-spacing: -0.02em; color: #fff;}
.page-franchise-about .fcta .desc {margin: 0; font-size: var(--font-size-20); font-weight: 500; line-height: 1.7; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.88);}
.page-franchise-about .fcta .go {display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: var(--space-24); background: #fff; border-radius: 80px;}
.page-franchise-about .fcta .go .ico {display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0;}
.page-franchise-about .fcta .go .ico img {display: block; width: 16px; height: 16px;}
.page-franchise-about .fcta .deco {position: absolute; right: var(--space-48); bottom: var(--space-48); display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(100px, calc(160 / var(--inner) * 100vw), 160px); height: clamp(100px, calc(160 / var(--inner) * 100vw), 160px); margin: 0;}

.find-store-wrap {position:relative; display:flex; gap: var(--space-20); height:clamp(400px, calc(854 / var(--inner) * 100vw), 854px);}

.find-store-list {display:flex; flex-direction:column; position:relative; z-index:10; width:25%; min-width:240px; background:#fff; border: 1px solid #eee; border-radius: var(--radius-24); overflow:hidden;}
.find-store-list .search-wrap {border-bottom:1px solid #ddd; padding: var(--space-40);}

.find-store-list .tab-area {border-bottom:1px solid #2c2c2c;}
.find-store-list .tab-area .tabs {display:flex;}
.find-store-list .tab-area .tabs li {width:50%;}
.find-store-list .tab-area .tabs li a {display:flex; justify-content:center; align-items:center; width:100%; height:60px; padding:4px; background:#f7f7f7; font-size:16px; font-weight:700; line-height:1.3em; letter-spacing:-.04em; color:#767676; text-align:center;}
.find-store-list .tab-area .tabs li.active a {background:#2c2c2c; color:#fff;}

.find-store-list .search-area {position:relative; display:flex; gap:10px; margin-bottom: 8px;}
.find-store-list .search-area .input {display:block; width:100%; height:44px; color:#505050; font-size:15px; letter-spacing:-.04em; border:1px solid #ddd; border-radius:4px;}
.find-store-list .search-area .input[type=search] {padding-right:40px;}
.find-store-list .search-area .submit {position:absolute; top:50%; right:5px; margin-top:-16px; width:32px; height:32px; border:0; background:none;}
.find-store-list .search-area .submit svg {display:block; width:18px; margin:0 auto;}
.find-store-list .total {margin-bottom: 16px; color:var(--dark-color); font-size:var(--font-size-16); line-height:1.5em; letter-spacing:-.04em;}
.find-store-list .total strong {color:var(--primary-color);}

.find-store-list .list-area {position:relative; overflow:auto; flex:1 1 auto; min-height:0; height:1%;}
.find-store-list .list-area::-webkit-scrollbar {width:5px; height:5px; border-radius:5px; background-color:transparent;}
.find-store-list .list-area::-webkit-scrollbar-thumb {background:rgba(0,0,0,.2); border-radius:5px;}
.find-store-list .list-area ul li {display:grid; gap:8px 0; padding:var(--space-34) var(--space-40); border-bottom:1px solid #ddd; font-size:15px; line-height:1.33em; letter-spacing:-.04em; color:#505050;}
.find-store-list .list-area ul li:last-child {border-bottom:0;}
.find-store-list .list-area ul li.active {background:#f8f8f8;}
.find-store-list .list-area .name {margin-bottom:4px; font-size:var(--font-size-24); line-height:1.41667em; letter-spacing:-.04em; color:var(--dark-color);}
.find-store-list .list-area ul li.active .name {color:var(--primary-color);}
.find-store-list .list-area .name strong {font-weight:600;}
.find-store-list .list-area .tel {display: flex; align-items: center; gap: 8px; font-weight:500; color:#a8a8a8;}
.find-store-list .list-area .tel span {display: block; background: #E5EFE2; border-radius: 8px; padding: 6px 10px; font-size: var(--font-size-12); font-weight: 700; line-height: 1.3333em; color: var(--primary-color);}

.find-store-map {position:relative; overflow:hidden; flex:1; border-radius: var(--radius-24); overflow: hidden;}
.find-store-map #map {position:relative; width:100%; height:100%;}

.customoverlay {position:absolute; bottom:60px; left:0; z-index:20; width:300px; margin-left:-150px; padding:20px; background:#fff; border:2px solid var(--primary-color); border-radius:16px; box-shadow:0px 6px 36px 0px rgba(0, 0, 0, 0.12); font-size:15px; line-height:1.33em; letter-spacing:-.04em; color:#505050; white-space:normal;}
.customoverlay:after {content:''; position:absolute; top:100%; left:50%; margin-left:-11px; width:22px; height:14px; background:url('/images/bbs/vertex-white.png') 50% 0/contain no-repeat;}
.customoverlay .inner {position:relative; display:grid; gap:8px;}
.customoverlay .name {margin-bottom:4px; font-size:18px; font-weight:700; line-height:1.33em; letter-spacing:-.04em; color:#2c2c2c;}
.customoverlay .tel {font-weight:500; color:#a8a8a8;}
.customoverlay .close {position:absolute; bottom:0; right:0; color:#505050; font-weight:500; font-size:12px; line-height:1.5em; cursor:pointer;}

.btn-get-position {position:absolute; bottom:20px; right:20px; z-index:10; width:48px; height:48px; background:#fff; border:1px solid #2c2c2c; border-radius:12px;}
.btn-get-position svg {display:block; margin:0 auto; width:20px;}

.btn-view-map {display:none;}
.btn-view-list {display:none;}

.sec-acquisition-txt {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-60);}
.sec-acquisition-process {display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px var(--space-20); margin-bottom: var(--space-80); padding: var(--space-60) 0; border-radius: var(--radius-24); border: 1px solid #dfdfdf;}
.acquisition-process-item .step {margin: var(--space-24) 0 2px;}
.dot-list li:before {content: '•'; color: #ccc; margin-right: 10px;}
.dot-list li {text-indent: -1em; padding-left: 1em;}
.dot-list li:not(:last-child) {margin-bottom: 10px;}