@media(max-width:768px) {
    .sub .font-32 {font-size: 2.5rem;}
    .sub .font-26 {font-size: 2rem;}
}

/* 서브탑 */
#subTop { color: #fff; position: relative; overflow-x: clip; height: 47rem;}
#subTop .bg {background: #fd9401; height: 100%; border-radius: 0 0 5rem 5rem; position: relative;}
#subTop .bgTxt {font-size: 22rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; mix-blend-mode: overlay; opacity: .1; line-height: 1; position: absolute; left: 50%; top: -4rem; transform: translateX(-50%);}

#subTop .tit .en {display: flex; gap: 1rem; align-items: center; justify-content: center;}
#subTop .tit .en .dot {position: relative;}
#subTop .tit .en .dot:before {width: .375rem; height: .375rem; background: #fff; border-radius: 50%; content: ""; position: absolute; top: 50%; transform: translateY(-50%);}
#subTop .tit .en .dot:after {position: absolute; top: 50%; transform: translateY(-50%); width: 6.25rem; height: 1px; background: #fff; content: "";}
#subTop .tit .en .dot:nth-child(1):after {right: 0;}
#subTop .tit .en .dot:nth-child(2):after {left: 0;}
#subTop .tit .en .dot:nth-child(1):before {right: 0;}
#subTop .tit .en .dot:nth-child(2):before {left: 0;}

#subTop .breadcrumb {width: 29.5rem; margin: 4.5rem auto 0; display: flex; background: #fff; border-radius: 100px; overflow: hidden;}
#subTop li {width: 50%;}
#subTop a {width: 100%; display: block; border-radius: 100px;  padding: 1rem;}
#subTop a.active {background: #000; color: #fff;}

#subTop .imgbox {position: absolute;}

/* 왼쪽 정렬 */
#subTop.left .tit {width: fit-content; overflow: hidden; position: absolute; left: calc((100% - var(--layoutwidth)) / 2); top: 20%; z-index: 2;}
#subTop.center .tit {width: fit-content; overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%); top: 20%; z-index: 2; width: 100%;}

/* 브랜드 스토리 */
#subTop.left.pujukan .imgbox {top: 30%; right: 5%;}
#subTop.left.pujukan .imgbox img {width: 61.25rem;}

/* 창업 */
#subTop.left.franchise .imgbox {top: 0%; right: 2.5%;}
#subTop.left.franchise .imgbox img {width: 60rem;}

/* 매장 */
#subTop.store .bgTxt {bottom: -4rem; top: auto;}
#subTop.store .bg {overflow: hidden;}
#subTop.left.store .imgbox {top: 0%; right: 0%;}
#subTop.left.store .imgbox img {width: 81rem;}
#subTop.store li {width: 33.333%;}

/* 메뉴 */
#subTop.menu .bg {overflow: hidden;}
#subTop.center.menu .imgbox.top {top: -22rem; right: 0%;}
#subTop.center.menu .imgbox.top img {width: 47.5rem;}
#subTop.center.menu .imgbox.bottom {top: auto; right: auto; bottom: -21rem; left: 2.5%;}
#subTop.center.menu .imgbox.bottom img {width: 44.5rem;}
#subTop.menu li {width: 33.333%;}

@media(max-width:1680px) {
    #subTop.left .tit {left: 5%;}
}

@media(max-width:1240px) {
    #subTop.left.pujukan .imgbox {right: 0; top: 40%;}
    #subTop.left.pujukan .imgbox img {width: 50rem;}
    #subTop.left.franchise .imgbox {right: -5%;}
    #subTop.left.franchise .imgbox img {width: 50rem;}
    #subTop.left.store .imgbox img {width: 72rem;}
    #subTop.center.menu .imgbox.top {top: -18rem;}
    #subTop.center.menu .imgbox.top img {width:37rem;}
    #subTop.center.menu .imgbox.bottom  {bottom: -16rem;}
    #subTop.center.menu .imgbox.bottom img {width: 34rem;}
}

@media(max-width:768px) {
    #subTop {height: auto; aspect-ratio: 5 / 6;}
    #subTop .bg {height: 90%;}
    #subTop .bgTxt {font-size: 8.375rem; top: -1.5rem;}
    #subTop .tit p.font-32 {font-size: 1.875rem;}

    #subTop.left .tit {width: 100%; left: 0; top: 15%;}
    #subTop.left .imgbox {right: auto !important; left: 50%; transform: translateX(-50%); width: 100%;}
    #subTop.left .imgbox img {margin: auto;}

    #subTop.left.pujukan .imgbox {top: 55%;}
    #subTop.left.pujukan .imgbox img {width: 80%;}

    #subTop.left.franchise .imgbox {top: 20%;}
    #subTop.left.franchise .imgbox img {width: 100%;}

    #subTop.store .bg {background-image: url("/img/sub/subTop/storeBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center bottom;}
    #subTop.store .bgTxt {bottom: auto; top: -1.5rem;}
    #subTop.left.store .imgbox {top: 45%;}
    #subTop.store ul {width: 85%;}

    #subTop.center.menu .imgbox.top {top: -20%; right: -22.5%; transform: rotate(200deg);}
    #subTop.center.menu .imgbox.top img {width:50%;}
    #subTop.center.menu .imgbox.bottom  {left: -10%; bottom: -15%;}
    #subTop.center.menu .imgbox.bottom img {width: 50%;}
    #subTop.menu ul {width: 85%;}

    #subTop .tit .en .dot:before {width: 0.625rem; height: .625rem;}
}

@media(max-width:500px) {
    #subTop.pujukan .imgbox {top: 57%;}
    #subTop.left.franchise .imgbox {top: 25%;}
}

@media(max-width:420px) {
    #subTop {height: auto; aspect-ratio: 5 / 7;}
    #subTop .bg {height: 92%;}
    #subTop .bgTxt {font-size: 7rem;}

    #subTop.left.pujukan .imgbox {top: 65%;}
    #subTop.left.franchise .imgbox {top: 35%;}
}

.sub {overflow: hidden;}

/* 브랜드 */
.sub #brand .flexList {align-items: flex-start;}
.sub #brand .box {border-radius: 1.875rem; overflow: hidden; background: #f8f8f8;}
.sub #brand .box:nth-child(odd) {margin-top: 5rem;}
.sub #brand .txt {padding: 2.5rem 1rem 3.125rem; height: 26rem;}
.sub #brand .txt img {width: 5.3125rem;}
.sub #brand .img img {border-radius: 1.875rem 1.875rem 0 0;}

@media(max-width: 1240px) {
    .sub #brand .flexList {justify-content: center;}
    .sub #brand .box:nth-child(odd) {margin-top: 0;}
}

@media(max-width:768px) {
    .sub #brand .txt {height: auto; padding: 3.75rem 1rem 3.5rem;}
    .sub #brand .txt img {width: 7.1875rem;}
}

/* 이유있는 선택 */
.sub #reason {max-width: 1800px; width: 90%; margin: auto; background: #fff9f0; border-radius: 5rem;}
.sub #reason .tit .logo {width: 5.5rem; margin: auto;}
.sub #reason .cont {display: flex; justify-content: space-between; align-items: center; position: relative;}
.sub #reason .cont:after {position: absolute; left: 50%; top: 0%; transform: translate(-50%, 50%); width: 1px; height: 110%; background: #ff7e00; content: "";}
.sub #reason .cont:last-child:after {display: none;}
.sub #reason .cont:nth-child(n+2) {margin-top: 4rem;}
.sub #reason .imgbox {width: 42%; border-radius: 1.875rem; overflow: hidden;}
.sub #reason .txtbox {width: 42%;}
.sub #reason .num {width: 4rem; height: 4rem; background: var(--pointcolor); border-radius: 50%; color: #fff; text-align: center; line-height: 4rem; margin: auto; position: relative; z-index: 1;}

@media(min-width:769px) {
    .sub #reason .cont:nth-child(even) .imgbox {order: 3;}
    .sub #reason .cont:nth-child(even) .num {order: 2;}
    .sub #reason .cont:nth-child(even) .txtbox {text-align: right;justify-content: flex-end;}
}

@media(max-width:768px) {
    .sub #reason .cont {flex-wrap: wrap; align-items: flex-start;}
    .sub #reason .cont:after {display: none;}
    .sub #reason .imgbox {width: 100%; margin-bottom: 2rem;}
    .sub #reason .txtbox {width: calc(100% - 4.5rem);}
    .sub #reason .num {width: 3.125rem; height: 3.125rem; line-height: 3.125rem; margin: 0; font-size: 1.875rem;}
}

/* 발자취 */
.sub #history .flexList {--y-gap: 0rem;}
.sub #history .imgbox img {border-radius: 1.875rem;}
.sub #history .cont_box {margin-top: 3.5rem;}
.sub #history .list {display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 3rem; position: relative;}
.sub #history .list:after {position: absolute; left: calc(10% + 10rem); top: 2rem; transform: translateX(-50%); width: 1px; height: 90%; background: #000; content: ""; z-index: -1; opacity: .5;}
.sub #history .list .num {color: var(--pointcolor); width: 10rem;}
.sub #history .list .desc {width: calc(80% - 10rem);}
.sub #history .list p {padding-top: 1rem;}
.sub #history .list p:last-child {padding-bottom: 1.5rem;}
.sub #history .list .dot {width: 1rem; height: 1rem; border-radius: 50%; margin: 1.5rem auto 0; background: var(--pointcolor); position: relative;}

.sub #history .box.right p:last-child {padding-bottom: 2rem;}

@media(max-width:990px) {
    .sub #history .box.right p:last-child {padding-bottom: 1rem;}
}

/* 포인트 */
.sub #point {background-image: url("/img/sub/pujukan/brandStory/pointBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center;}

@media(max-width:768px) {
    .sub #point {background-image: url("/img/sub/pujukan/brandStory/pointBg_m.jpg"); text-align: center;}
    .sub #point h2,
    .sub #point p {text-shadow: 5px 5px 10px rgba(49, 36, 0, 0.38);}
}

/* 문의 */
.sub #inquiry .wrap {background-image: url("/img/sub/pujukan/brandStory/inquiryBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 5rem;}
.sub #inquiry .box {background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 3.75rem 5rem; border-radius: 1.875rem;}
.sub #inquiry .box .icon {width: 18%;}
.sub #inquiry a {display: flex; justify-content: space-between; background: #ff7e00; color: #fff; padding: 1rem 1.5rem 1rem 15%; width: 70%; border-radius: 100px; position: relative;}

@media(max-width:990px) {
    .sub #inquiry .box {padding: 3.75rem 3.5rem;}
}

@media(max-width:768px) {
    .sub #inquiry .wrap {background-image: url("/img/sub/pujukan/brandStory/inquiryBg_m.jpg");}
    .sub #inquiry .box {padding: 3.75rem 8%;}
    .sub #inquiry a {width: 75%; padding: 1rem 1.5rem 1rem 10%;}
}

/* 오시는길 */
.section_address,
.wrap_controllers {display: none;}

.sub #direction .tit .tel {display: flex; align-items: center; justify-content: center; gap: 1.5rem; background: var(--pointcolor); width: fit-content; margin: auto; padding: 1rem 3rem; border-radius: 1.25rem; color: #fff;}
.sub #direction .tit .tel span {letter-spacing: 0;}
.sub #direction .tit .tel img {width: 3.75rem;}

.sub #direction .cont_box {width: 90%; margin: 4.5rem auto 0; border-radius: 1.875rem; overflow: hidden;}
.sub #direction .flexList {--x-gap: 0rem; --y-gap: 0rem;}
.sub #direction .infor {background: #f8f8f8; display: flex; align-items: center; padding: 6%;}
.sub #direction .infor .logo {width: 17rem;}
.sub #direction .infor p span {color: #fff; padding: 0 .5rem; border-radius: 100px; font-weight: 600;}
.sub #direction .infor p span.line1 {background: #f06702;}
.sub #direction .infor p span.line3 {background: #b38400;}
.sub #direction .infor .nav {display: flex; gap: 1.5rem;}
.sub #direction .infor .nav a {display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .8rem; width: 50%; color: #fff; border-radius: .625rem;}
.sub #direction .infor .nav a.naver {background: #1bc73f;}
.sub #direction .infor .nav a.kakao {background: #fbc600;}
.sub #direction .infor .nav a img {width: 3rem;}

.sub #direction .mapCont {width: 100%;}
.sub #direction .mapCont .wrap_map {height: 50rem;}

@media(max-width:1440px) {
    .sub #direction .infor {padding: 5%;}
}

@media(max-width:1240px) {
    .sub #direction .infor {padding: 10% 5%;}
    .sub #direction .infor > div {margin: auto;}
}

@media(max-width:768px) {
    .sub #direction .infor p span {padding: 0 1rem;}
    .sub #direction .mapCont .wrap_map {height: 30rem;}
}

/* 매장인테리어 */
.marquee {overflow: hidden; display: flex; gap: 2rem; white-space: nowrap; padding: 3rem 0 5rem;}

.marquee-track.original,
.marquee-track.clone {animation: marquee 40s linear infinite;}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* 배달 매장 */
.sub #delivery.branch {overflow: hidden; background-image: url("/img/sub/store/wave.png"); background-repeat:repeat-x; background-position: center bottom; background-size: cover;}
.sub #delivery.branch .tit {width: 90%; margin: auto;}
.sub #delivery.branch .bgTxt {font-size: 22rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; mix-blend-mode: overlay; opacity: .1; line-height: 1; position: absolute; left: 50%; transform: translateX(-50%);}
.sub #delivery.branch .bgTxt.top {top: -4rem;}
.sub #delivery.branch .bgTxt.bottom {bottom: -4rem;}
.sub #delivery.branch .swiper-slide {width: 35.6rem;}
.sub #delivery.branch .swiper-slide img {border-radius: 1.875rem;}

@media(max-width:768px) {
    .sub #delivery.branch .bgTxt {font-size: 8.375rem;}
    .sub #delivery.branch .bgTxt.top {top: -1.5rem;}
    .sub #delivery.branch .bgTxt.bottom {bottom: -.5rem;}
}

@media(max-width:420px) {
    .sub #delivery.branch .bgTxt {font-size: 7rem;}
}

/* 홀 매장 */
.sub #hall.branch .flexList {--y-gap: 5rem;}
.sub #hall.branch .txt {padding-left: 5%;}
.sub #hall.branch .txt ul {display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;}
.sub #hall.branch .txt li {width: fit-content; background: var(--pointcolor); color: #fff; font-weight: 700; border-radius: 100px; padding: .5rem 2rem;}

.sub #hall.branch .swiper-slide {border-radius: 1.875rem; overflow: hidden;}
.sub #hall.branch .hallSwiper2 .swiper-wrapper {transition-timing-function: linear !important;}
.sub #hall.branch .hallSwiper2 .swiper-slide {margin: 0 1rem;}

@media(max-width:768px) {
    .sub #hall.branch .txt {order: -1; text-align: center; padding-left: 0;}
    .sub #hall.branch .txt ul {justify-content: center;}
    .sub #hall.branch .txt li {font-size: 1.5rem;}
    .sub #hall.branch .hallSwiper2 {margin-top: 1.5rem;}
    .sub #hall.branch .hallSwiper2 .swiper-slide {margin: 0 .625rem;}
}

/* 매장찾기 */
.sub #search {background: #fff9f0; border-radius: 5rem;}
.sub #search { position: relative; background-image: url(../img/main/bg_Branches.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.sub #search .branchBox {border-radius: 1.875rem; overflow: hidden;}
.sub #search .branchList, 
.sub #search .branchMap {height: 45rem;}
.sub #search .branchList { order: 1; width: 33rem; background: #fff; }
/* 검색 */
.sub #search .branchList .searchBox {position: relative; gap: 1rem;}
.sub #search .branchList .searchBox:after {position: absolute; left: 0; top: 50%; transform: translateY(-50%); content:""; width: 1.125rem; height: 1.125rem; background-image: url("/img/sub/store/searchIcon.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}
.sub #search .branchList .searchBox2 {gap: .5rem;}

.sub #search .branchList .tabs {display: flex; align-items: center; gap: 2rem; color: var(--dark-gray);}
.sub #search .branchList .tabs li {cursor: pointer;}
.sub #search .branchList .tabs li.current {text-decoration: underline; text-decoration-color: var(--pointcolor); text-decoration-thickness: 2px; text-underline-offset: .5rem;}
.sub #search .branchList .tab-contents {display: none;}
.sub #search .branchList .tab-contents.current {display: flex;}

.sub #search .branchList form {padding: 2rem 2rem 2.5rem;}
.sub #search .branchList form input[type=text],
.sub #search .branchList form select,
.sub #search .branchList form button[type=submit]
{ height: auto; padding: .5rem 2rem;}
.sub #search .branchList form input[type=text] {border: none; border-bottom: 1px solid #000; background: transparent; position: relative; padding: .5rem 2rem .5rem 2.5rem;}
.sub #search .branchList form input[type=text]:focus { box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important;}
.sub #search .branchList form select:focus {box-shadow: none !important; border-color: var(--dark-gray) !important;}
.sub #search .branchList form input[type=text]::placeholder { color: var(--gray); }
.sub #search .branchList form button[type=submit] { width: 7rem; background: var(--pointcolor); color: #fff; border-radius: .25rem;}
.sub #search .branchList form select {background: #fff; -webkit-appearance: none; -moz-appearance: none; background-image: url(/img/main/select.svg); background-position: 96% center; background-repeat: no-repeat; padding: .5rem; border-color: #e4e4e4; border-radius: .25rem;}

.sub #search .branchList form #branch_si {width:30%;}
.sub #search .branchList form #branch_gu {width: calc(70% - 8rem);}
.sub #search .branchList form #branch_name { width: calc(100% - 8rem); }

/* 로드 */
.sub #search .branchList .branchResult .loaderwrap { display: flex; justify-content: center; padding: 3rem 0; }
.sub #search .branchList .branchResult .loader {width: 3rem; height: 3rem; border: 5px solid var(--light-gray); border-bottom-color: var(--sub3color); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 2s linear infinite;}

/*검색 결과 list부분 */
.sub #search .branchList .branchResult {padding: 2rem 1rem 0 2rem; border-top: 1px solid rgba(131,131,131,.5); height: 100%;}
.sub #search .branchList .branchResult,
.sub #search .branchList .branchResult .list {background: #fff; }
.sub #search .branchList .branchResult .listBox {height: calc(100% - 10.125rem); overflow-y: scroll;}
/* .sub #search .branchList .branchResult .listBox::-webkit-scrollbar {display: none;} */
.sub #search .branchList .branchResult .list {padding: 1.625rem 0; border-bottom: 1px solid rgba(131,131,131,.5); cursor: pointer; margin-right: 1rem;}
.sub #search .branchList .branchResult .list:first-child {padding-top: 0;}
.sub #search .branchList .branchResult .list .txt,
.sub #search .branchList .branchResult .list ul {display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;}
.sub #search .branchList .branchResult .list ul li {background: var(--pointcolor); color: #fff; padding: .125rem 1rem; border-radius: 100px;}

/* 지도 */
.sub #search .branchMap { width: calc(100% - 33rem); order: 2; }
.sub #search .branchMap .map-marker { position: relative; transform: rotate(-45deg); cursor: pointer;}
.sub #search .branchMap .map-marker-pointer { position: absolute; width: .5rem; height: auto; aspect-ratio: 1/1; left: -.25rem; bottom: -.25rem; border: 1px solid #4789e7; border-radius: 50%; background-color: rgba(71, 137, 231, .75); }
.sub #search .branchMap .map-marker-pin {position: relative; width: 2rem; height: auto; aspect-ratio: 1/1; background-color: #fff; color: #4789e7; border-radius: 50% 50% 50% 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 0 0 1px #4789e7;}
.sub #search .branchMap .map-marker-pin span {position: relative; transform: rotate(45deg);}

.sub #search .map-info button {position: absolute; right: 5%;}

@media(max-width:768px) {
    .sub #search .font-18 {font-size: 1.75rem;}
    .sub #search .font-16 {font-size: 1.75rem;}
    .sub #search ul.font-16 {font-size: 1.375rem;}
    .sub #search .branchList .branchResult .list ul li {padding: .375rem 1rem .125rem;}
    .sub #search .branchList {width: 100%;}
    .sub #search .branchMap {width: 100%;}
    .sub #search .branchList .tabs {margin-bottom: 2rem;}
    .sub #search .branchList .searchBox:after {width: 1.75rem; height: 1.75rem;}
    .sub #search .branchList form {padding: 3.75rem 5% 2.5rem;}
    .sub #search .branchList .branchResult {padding: 2.5rem 2.5% 0 5%;}
    .sub #search .branchList .branchResult .list {margin-right: 2.5%;}
    .sub #search .branchList .branchResult .listBox {height: 26rem;}

    .sub #search .branchMap .map-marker-pointer {width: 1.5rem; left: -.5rem; bottom: -.5rem;}
    .sub #search .branchMap .map-marker-pin {width: 2.5rem;}
    .sub #search .branchMap .map-marker-pin span {font-size: 1.5rem;}
    .sub #search .branchMap .map-info {min-width: 30rem; text-wrap: wrap;}


    .sub #search .map-info button svg {width: 2rem; height: 2rem;}
}

/* 배달메뉴 */
.sub #menuList .subTit {width: fit-content; background: var(--pointcolor); color: #fff; padding: .5rem 2rem; border-radius: 100px; margin: auto;}
.sub #menuList .flexList {--y-gap: 2.5rem;}
.sub #menuList .name {display: flex; align-items: center; gap: .625rem;}
.sub #menuList .name .label {text-transform: uppercase; background: var(--pointcolor); color: #fff; padding: .125rem 1rem; border-radius: 5px;}
.sub #menuList .imgbox {border-radius: 1.75rem; overflow: hidden;}
.sub #menuList.delivery .imgbox img {aspect-ratio: 50 / 43;}
.sub #menuList.hall .imgbox img {aspect-ratio: 49 / 38;}

@media(max-width:768px) {
    .sub #menuList .font-30 {font-size: 2.125rem;}
    .sub #menuList .font-18 {font-size: 1.5rem;}
}

.sub #collabo .box {background: var(--pointcolor); padding: 3.125rem; border-radius: 1.75rem; overflow: hidden;}
.sub #collabo .box .txtbox {background: #fff; padding: 3rem 1rem; border-radius: 1.75rem;}

/* @media(max-width:420px) {
    .sub #collabo .box br.visible-md {display: none !important;}
} */

/* 이렇게 주문하세요 */
.sub #orderApp .cont_box {background: #fff9f0; padding: 6.25rem 0;}
.sub #orderApp .flexList {--x-gap: 3.5rem;}
.sub #orderApp .box {background: #fff; padding: .75rem 1.5rem .75rem 1.25rem; border-radius: 100px; border: 1px solid #c6b193; display: flex; align-items: center; gap: 1rem;}
.sub #orderApp .box img {width: 6rem;}
.sub #orderApp .box h3 {width: calc(100% - 7rem); text-align: center; padding-right: 1rem;}

@media(max-width:1440px) {
    .sub #orderApp .flexList {--x-gap: 2.5rem;}
}

@media(max-width:1024px) {
    .sub #orderApp .flexList {--x-gap: 1.5rem;}
}

@media(max-width:990px) {
    .sub #orderApp .flexList {max-width: 50rem; margin: auto;}
}

@media(max-width:768px) {
    .sub #orderApp .flexList {max-width: 25rem; margin: auto;}
    .sub #orderApp .box img {width: 8rem;}
}


/* 매장안내 */
#guide {background-image: url("/img/sub/menu/guideBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; max-width: 1800px; width: 90%; margin: auto; border-radius: 5rem;}
#guide img.logo {width: 4.75rem;}
#guide a.goBtn {width: 18rem; background: #fff; color: var(--pointcolor); border-radius: 100px; display: flex; justify-content: space-between; padding: 1rem 2rem; margin: auto;}

/* 매장 */
.sub #comfort {background: #fff9f0;}
.sub #comfort .flexList {--y-gap: 3.5rem;}
.sub #comfort .imgbox {border-radius: 1.75rem; overflow: hidden;}
.sub #comfort p {display: flex; align-items: center; justify-content: center; gap: .5rem;}
.sub #comfort p img {width: 2.5rem;}

/* 창업 */
.sub #pujukan {padding-bottom: 120px !important;}
.sub #pujukan .wrap {max-width: 1550px; width: 90%; margin: auto;}
.sub #pujukan .cont {display: flex; gap: 1.5rem; justify-content: space-between;}
.sub #pujukan .tit span {color: #fffec2 !important;}
.sub #pujukan .tit,
.sub #pujukan .contbox {position: relative; z-index: 2;}
.sub #pujukan .contbox li {padding: 1.25rem 0 .625rem; border-bottom: 1px solid rgba(255,251,188,.5);}
.sub #pujukan .contbox li:last-child {border-bottom: none;}
.sub #pujukan .contbox li > p {background: #fffec2; width: fit-content; color: var(--pointcolor); padding: 0 .25rem; border-radius: 5px;}

.sub #pujukan .imgbox {position: absolute; left: 53%; transform: translateX(-50%); bottom: 0;}

@media(max-width:1550px) {
    .sub #pujukan {padding-bottom: 80px !important;}
}

@media(max-width:1240px) {
    .sub #pujukan .tit {width: 40%;}
    .sub #pujukan .contbox {width: 25%;}
}

@media(max-width:990px) {
    .sub #pujukan .cont {gap: 3.75rem; align-items: flex-start; flex-wrap: wrap;}
    .sub #pujukan .tit {width: 50%;}
    .sub #pujukan .imgbox {width: 100%; order: 3; position: initial; transform: translate(0); margin-bottom: -80px !important;}
    .sub #pujukan .contbox {width: calc(50% - 3.75rem);}
}

@media(max-width:768px) {
    .sub #pujukan .tit {width: 100%;}
    .sub #pujukan .contbox {width: 100%;}
    .sub #pujukan .contbox li > p {padding: .5rem .625rem; line-height: 1;}
}

.sub #startUp .cont_box {background-image: url("/img/sub/franchise/startUpBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 6.25rem 10%; border-radius: 3.125rem;}
.sub #startUp li {background: #fff; border-radius: 100px; border: 3px solid var(--pointcolor); padding: .8rem 0;}

.sub #startUp .mouse-wrapper > div.top {transform: scale(0.8); animation: mouse-scroll 1s infinite; animation-direction: alternate;}
.sub #startUp .mouse-wrapper > div.bottom {margin-top: -.5rem; animation: mouse-scroll 1s infinite; animation-delay: 200ms; animation-direction: alternate;}
.sub #startUp .mouse-wrapper > div img {margin: auto; width: 2.375rem;}

@keyframes mouse-scroll {
    0% {opacity: 0;}
    50% {opacity: 0.5;}
    100% {opacity: 1;}
}

.sub #startUp h3 {color: #fff;}
.sub #startUp h3 span { position: relative; display: inline-block; }
.sub #startUp h3 span:after {position: absolute; left: 0; bottom: -1.5rem; width: 17.5rem; height: 2rem; background: url("/img/sub/franchise/underline.png"); content: ""; background-repeat: no-repeat; background-size: contain;}

@media(max-width:990px) {
    .sub #startUp .cont_box {padding: 6.25rem 5%;}
    .sub #startUp h3 span:after {bottom: -1rem;}
}

.sub #three .wrap {max-width: 1800px; width: 90%; margin: auto;}
.sub #three .cont {border-radius: 3.125rem; background-size: cover; background-position: center; background-repeat: no-repeat; margin-bottom: 3rem;}
.sub #three .cont .label {width: fit-content; padding: .5rem 2rem; background: var(--pointcolor); color: #fff; border-radius: 100px;}

.sub #three .cont:nth-child(1) {background-image: url("/img/sub/franchise/threeBg01.jpg"); padding: 11rem 0;}
.sub #three .cont:nth-child(1) h3 {position: relative; width: fit-content;}
.sub #three .cont:nth-child(1) h3:after {position: absolute; right: -7rem; bottom: .5rem; content: ""; width: 6rem; height: 6rem; background-image: url("/img/sub/franchise/haccp.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}

.sub #three .cont:nth-child(2) {background-image: url("/img/sub/franchise/threeBg02.jpg"); padding: 10rem 0;}
.sub #three .cont:nth-child(2) li {display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem;}
.sub #three .cont:nth-child(2) li:last-child {margin-bottom: 0;}
.sub #three .cont:nth-child(2) li img {width: 2.5rem;}

.sub #three .cont:nth-child(3) {background: linear-gradient(to right, #fff9f0 20%, var(--pointcolor) 80%, var(--pointcolor) 100%); margin-bottom: 0; padding: 5rem 0;}
.sub #three .cont:nth-child(3) .container {display: flex; align-items: center; justify-content: space-between;}
.sub #three .flexList {position: relative;}
.sub #three .flexList:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: "+"; font-weight: 2.5rem; color: var(--pointcolor); width: 5rem; height: 5rem; background: #fff; border-radius: 50%; text-align: center; line-height: 5rem;}
.sub #three .cont:nth-child(3) .box {text-align: center; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 5rem 0; border-radius: 1.25rem;}
.sub #three .cont:nth-child(3) .box:nth-child(1) {background-image: url("/img/sub/franchise/threeBox01.jpg");}
.sub #three .cont:nth-child(3) .box:nth-child(2) {background-image: url("/img/sub/franchise/threeBox02.jpg");}
.sub #three .cont:nth-child(3) .box:nth-child(3) {background-image: url("/img/sub/franchise/threeBox03.jpg");}
.sub #three .cont:nth-child(3) .box:nth-child(4) {background-image: url("/img/sub/franchise/threeBox04.jpg");}

@media(max-width:768px) {
    .sub #three .font-26 {font-size: 2rem;}
    .sub #three .cont {padding: 8rem 0 !important; background-position: 40% center;}

    .sub #three .cont:nth-child(1) h3:after {width: 5rem; height: 5rem; right: -6rem;}

    .sub #three .cont:nth-child(3) {background: linear-gradient(to bottom, #fff9f0 20%, var(--pointcolor) 80%, var(--pointcolor) 100%);}
    .sub #three .cont:nth-child(3) .container {flex-direction: column; align-items: flex-start; gap: 2.5rem;}
    .sub #three .contbox {width: 100%;}
}

.sub #sales {overflow: hidden; background: linear-gradient(to bottom, transparent 20%, #fff9f0 20%, #fff9f0 100%); position: relative;}
.sub #sales .container {background-image: url("/img/sub/franchise/salesBg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 5rem 0; position: relative; z-index: 2;}
.sub #sales .tit {position: relative; z-index: 2;}
.sub #sales .tit .star {animation: twinkle 1s infinite ease-in-out;}
.sub #sales .tit h3 {width: fit-content; margin: auto; padding: 0 .5rem; line-height: 1.3;}
.sub #sales .tit img {width: 7rem;}
.sub #sales p.bgTxt {font-family: var(--pointfont); font-size: 19.5vw; color: var(--pointcolor); opacity: .15; position: absolute; left: 50%; transform: translateX(-50%); top: 25%; z-index: 1;}

.sub #sales .swiper-slide {max-width: 39rem; width: 90%; margin: auto; background-image: url("/img/sub/franchise/salesSlideBg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 3.25rem 2.5%; border-radius: 1.25rem; margin-bottom: 10rem; margin-top: 5rem; filter: blur(2px);}
.sub #sales .swiper-slide-active {filter: none;}
.sub #sales .swiper-slide.point {background-image: url("/img/sub/franchise/salesPointBg.jpg");}
.sub #sales .salesBox {display: flex; align-items: baseline; justify-content: space-between; padding: 1rem 0 ; border-bottom: 1px solid #fff; border-top: 1px solid #fff;}

.sub #sales .swiper-slide.point p span {color: #fff583;}
.sub #sales .swiper-slide .branchName {text-align: center; width: fit-content; margin: 0 auto 3rem; padding: 1rem 2rem; border-radius: 100px; background: #fff; color: var(--pointcolor); line-height: 1;}
.sub #sales .swiper-slide.point .branchName {background: #ffdcad; color: #5e2901; position: relative;}
.sub #sales .swiper-slide.point .branchName:after {position: absolute; left: -.8rem; top: -2rem; width: 4rem; height: 3rem; content: ""; background-image: url("/img/sub/franchise/crown.png"); background-repeat: no-repeat; background-size: cover; background-position: center;} 

@media(max-width:1024px) {
    .sub #sales .swiper-slide {margin-bottom: 7rem;}
}

@media(max-width:990px) {
    .sub #sales .swiper-slide {margin-bottom: 6rem;}
}

@media(max-width:768px) {
    .sub #sales .font-20 {font-size: 1.5rem;}
    .sub #sales .swiper-slide {padding: 3.25rem 3.5%; margin-bottom: 5rem;}
    .sub #sales .salesBox p:first-child {font-size: 1.5rem;}
    .sub #sales p.bgTxt {top: 35%;}
}

@media(max-width:500px) {
    .sub #sales .container {background-position: 30% center;}
    .sub #sales .swiper-slide {margin-bottom: 0;}
    .sub #sales p.bgTxt {top: 45%;}
}

.sub #chart {background: #fff9f0; overflow: hidden;}
.sub #chart .wrap {margin-top: -10rem;}

@media(max-width:768px) {
    .sub #chart {padding-bottom: 80px !important;}
    .sub #chart .wrap {width: 90%; margin: 5rem auto 0 !important;}
}

.sub #review {padding-top: 90px; background-image: url("/img/sub/franchise/reviewBg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat;}
.sub #review .star {animation: twinkle 1s infinite ease-in-out;}
.sub #review .cont {display: flex; align-items: flex-end; justify-content: center; gap: 6.25rem;}

.sub #review .slideBox {display: flex; align-items: flex-end; justify-content: flex-end;}
.sub #review .slideBox > div {width: 20.25rem;}

.sub #review li {display: flex; align-items: baseline; background: var(--pointcolor); margin-bottom: 1rem; color: #fff; width: fit-content; padding: .5rem 1rem .5rem 2rem; border-radius: 1.5625rem 1.52625rem 1.5625rem 0; line-height: 1;}
.sub #review li img { filter: brightness(0) invert(1); width: 1.68rem;}
.sub #review li p {display: flex; align-items: center; gap: .5rem;}

@media(max-width:990px) {
    .sub #review .cont {gap: 5rem;}
    .sub #review .slideBox > div {width: 25rem;}
    .sub #review .txtbox {width: 70%;}
}

@media(max-width:768px) {
    .sub #review {padding-top: 80px;}
    .sub #review .cont {flex-direction: column; align-items: center;}
    .sub #review .txtbox {width: 100%; order: -1; padding-bottom: 0;}
    .sub #review .slideBox {width: 80%;}
    .sub #review .slideBox > div {width: 100%;}

    .sub #review li {padding: 1rem 1.5rem 1rem 2rem;}
    .sub #review li img {width: 2.5rem;}
    .sub #review li .font-26 {font-size: 2rem;}
}


.sub #zero {background-image: url("/img/sub/franchise/zeroBg.jpg"); background-size: cover; background-position: center top; background-repeat: no-repeat; padding-bottom: 6.25rem !important;}
.sub #zero h3 {animation: twinkle 1.5s infinite ease-in-out; font-style: italic;}
.sub #zero li {display: flex; align-items: baseline; background: var(--pointcolor); margin-bottom: 1rem; color: #fff; width: fit-content; padding: .5rem 1.5rem .5rem 1.5rem; border-radius: 1.5625rem 1.52625rem 0 1.5625rem; line-height: 1;}
.sub #zero li img { filter: brightness(0) invert(1); width: 1.68rem;}
.sub #zero li p {display: flex; align-items: center; gap: .5rem;}

@media(max-width:768px) {
    .sub #zero {background-image: url("/img/sub/franchise/reviewBg.jpg"); padding-bottom: 0 !important;}
    .sub #zero li {padding: 1rem 1.5rem 1rem 2rem;}
    .sub #zero li img {width: 2.5rem;}
    .sub #zero li .font-26 {font-size: 2rem;}

    .sub #zero .imgbox {padding-left: 5%;}
}


.sub #sucess .swiper-button-next, 
.sub #sucess .swiper-button-prev {position: initial; width: fit-content; height: fit-content; margin-top: 0;}

.sub #sucess .section-left {display: flex; justify-content: space-between; gap: 5%;}
.sub #sucess .swiper-slide {background: var(--pointcolor); padding: 2rem 3.5rem 5rem; border-radius: 3.125rem;}
.sub #sucess .moreBtn {width: fit-content; padding: 1rem 2rem;}

.sub #sucess .youtube-wrap {position: relative; padding-bottom: 56.25%; height: 0; width: 100%; border-radius: 1.875rem; overflow: hidden;}
.sub #sucess .youtube-wrap iframe {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.sub #sucess .nav {display: flex; align-items: center; gap: 1.5rem; position: absolute; right: 0; bottom: 0;}
.sub #sucess .nav > div {width: 4.375rem; height: 4.375rem; background: var(--pointcolor); color: #fff; border-radius: 50%;}
.sub #sucess .nav > div:after {font-size: 1.5rem; font-weight: 800;}

@media(max-width:990px) {
    .sub #sucess .section-left {flex-direction: column; gap: 1.5rem;}
    .sub #sucess .section-left > div {width: 100%;}
    .sub #sucess .txtbox {padding-right: 5%;}
    .sub #sucess .nav {position: initial; align-items: flex-end; justify-content: flex-end; margin-top: 5rem;}
}

@media(max-width:500px) {
    .sub #sucess .slidebox {padding-right: 5%;}
}

.sub #model .box img {border-radius: 1.875rem;}
.sub #model h3 {width: fit-content; margin: auto; background: var(--pointcolor); color: #fff; border-radius: 100px; padding: .25rem 1.5rem; transform: translateY(2rem);}
.sub #model ul {background: #f8f8f8; border-radius: 1.875rem; padding: 3rem 3.75rem 2rem;}
.sub #model ul li {padding: 1rem; border-bottom: 1px solid rgba(0,0,0,0.3);}
.sub #model ul li:first-child{padding-top: 0;}
.sub #model ul li:last-child {padding-bottom: 0; border-bottom: none;}

.sub #RD {background: #fff9f0;}
.sub #RD .swiper-wrapper{transition-timing-function: linear;}
.sub #RD .swiper-slide {border-radius: 1.875rem; overflow: hidden;}
.sub #RD .swiper-slide:nth-child(odd){margin-top: 4rem;}

.sub #support .flexList {--y-gap: 3.75rem;}
.sub #support .box .imgbox {position: relative;}
.sub #support .box .imgbox:after {position: absolute; left: -2.5rem; top: 50%; transform: translateY(-50%); content: "▶"; width: 4.375rem; height: 4.375rem; background: var(--pointcolor); border-radius: 50%; font-size: 2rem; line-height: 4.375rem; color: #fff;}
.sub #support .box:first-child .imgbox:after {display: none;}
.sub #support .box .imgbox img {border-radius: 1.875rem;}
.sub #support .box ul { width: fit-content; margin: auto;}
.sub #support .box:nth-child(2) ul {max-width: 18rem;}
.sub #support .box:nth-child(3) ul {max-width: 19rem;}
.sub #support .box li {display: flex; align-items: baseline; gap: .5rem; margin-top: 1rem;}
.sub #support .box li:nth-child(n+2) {margin-top: .5rem;}
.sub #support .box li img {width: 2rem;}

@media(max-width:990px) {
    .sub #support .box .imgbox:after {display: none;}
}

@media(max-width:768px) {
    .sub #support .flexList {--y-gap: 8rem;}
    .sub #support .box {position: relative;}
    .sub #support .box:after {position: absolute; left: 50%; bottom: -6rem;; transform: translateX(-50%) rotate(90deg); content: "▶"; width: 4.375rem; height: 4.375rem; background: var(--pointcolor); border-radius: 50%; font-size: 2rem; line-height: 4.375rem; color: #fff; z-index: 1;}
    .sub #support .box:last-child:after {display: none;}
    .sub #support .box:nth-child(2) ul {max-width: 22rem;}
    .sub #support .box:nth-child(3) ul {max-width: 23rem;}
}

.sub #benefit h2 span {background: #fff; padding: 0 .5rem;}
.sub #benefit h3 span {color:#feff9e;}
.sub #benefit .box {background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 3rem; border-radius: 1.875rem; position: relative;}
.sub #benefit .box.point {background-image: url("/img/sub/franchise/benefitPointBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 0 0 1.875rem 1.875rem; text-align: center; color: #fff; justify-content: center; border-top: 1rem solid #ffe75a;}
.sub #benefit .box.point:after {position: absolute; left: 0; top: -5rem; width: 100%; height: 4.2rem; content: ""; background-image: url("/img/sub/franchise/point.png"); background-position: center; background-size: contain; background-repeat: no-repeat;}
.sub #benefit .box.badge:after {position: absolute; right: 5%; top: -4rem; width: 8.1875rem; height: 8.1875rem; content: ""; background-image: url("/img/sub/franchise/badge.png"); background-position: center; background-size: contain; background-repeat: no-repeat;}
.sub #benefit .box .price {display: flex; align-items: baseline; gap: 3rem;}
.sub #benefit .box .price .default {position: relative;}
.sub #benefit .box .price .default:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 1.5rem); height: 2px; background: var(--pointcolor); content: "";}
.sub #benefit .box .price .default::before {position: absolute; right: -1rem; top:calc(50% - .4rem); transform: translateY(-50%) rotate(45deg); height: 2px; width: 1.25rem; background: var(--pointcolor); content: "";} 
.sub #benefit .line {width: 100%; height: 1px; background: #fff; opacity: .5;}

@media(max-width:1240px) {
    .sub #benefit .box.point {margin-top: 5rem;}
}

@media(max-width:768px) {
    .sub #benefit .box .price .default:after {width: calc(100%  + 2rem);}
    .sub #benefit .box .price .default::before {right: -1.25rem; width: 1.5rem; top: calc(50% - .5rem);}
}

@media(max-width:500px) {
    .sub #benefit .box {flex-direction: column; text-align: center;}
    .sub #benefit .box.badge {margin-top: 2rem;}
}

.sub #table table {width: 100%; border-collapse: collapse; border-radius: 1.875rem; overflow: hidden;}
.sub #table table th,
.sub #table table td {padding: 1rem;}
.sub #table table th {background: var(--pointcolor); color: #fff; border-right: 1px solid rgba(255,255,255,0.5);}
.sub #table table th:last-child {border-right: none;}
.sub #table table td {border-right: 1px solid rgba(131,131,131,.5); border-bottom: 1px solid rgba(131,131,131,.5); background: #f8f8f8;}
.sub #table table td:last-child {border-right: none;}
.sub #table table tr:last-child td {border-bottom: none;}

.sub #table table .price > div {display: flex; align-items: center; justify-content: flex-start; gap: 2rem; max-width: 16.25rem; width: 95%; margin: auto;}
.sub #table table .default {position: relative;}
.sub #table table .default:after {position: absolute; left: calc(50% + 1px); width: calc(100% + 1.5rem); top: calc(50% + 1px); transform: translate(-50%, -50%); background: var(--dark-gray); content: ""; height: 1px;}
.sub #table table .default:before {position: absolute; right: -.9rem; top:calc(50% - .2rem); transform: translateY(-50%) rotate(45deg); height: 1px; width: .75rem; background: var(--dark-gray); content: "";} 
.sub #table table .free {width: fit-content; padding: .5rem 1.5rem; border-radius: 50%; background: var(--pointcolor); color: #fff; transform: rotate(-10deg);}

@media(max-width:768px) {
    .sub #table .tableWrap.font-26 {font-size: 1.5rem;}
    .sub #table .tableWrap .font-32 {font-size: 1.75rem;}
    .sub #table .tableWrap .free.font-32 {font-size: 1.5rem;}
    .sub #table .tableWrap .font-40 {font-size: 2rem;}
    .sub #table table .price > div {max-width: 13.25rem; gap: 1.5rem;}
}

@media(max-width:500px) {
    .sub #table table .price > div {flex-direction: column; gap: .25rem;}
    .sub #table table .default.ml-40 {margin-left: 0;}
}

@keyframes twinkle  {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}