/* visual sub 공통 start */
.sub_visual{
    width:100%;
    min-width:1400px;
    position: relative;
    overflow: hidden;
}
.sub_visual::before{
    position: absolute;
    content: '';
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, .4);
    z-index: 1;
}
.sub_visual > img{
    width:100%;
    object-fit: cover;
    height:450px;
    transition: all 3s ease-in-out;
    transform:scale(1.2);
}
.sub_visual > img.zoom{transform:scale(1);}
.sub_visual .sub_typo{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:100%;
    z-index: 99;
}
.sub_visual .sub_typo > span.up{opacity:1; transform:translate(0,0);}
.sub_visual .sub_typo span{
    color:#fff;
    display:block;
    opacity:0;
    transform:translate(0,100%);
    transition:all 1s ease-in-out;
}
.sub_visual .sub_typo span:first-child{
    font-size:42px;
    transition-delay:0s;
}
.sub_visual .sub_typo span:nth-child(2){
    font-size:18px;
    transition-delay:0.5s;
}
/* visual sub 공통 end */


.contents_detail{padding:30px 0;}
/* sub 타이틀 공통 */

/* image_show_wrap 공통 */
section .image_show_wrap,
section .image_show_wrap2{
    position: relative;
    top: 0px;
    left: 0%;
    width: 100%;
}
section .image_show_wrap{overflow: hidden; animation-duration: 1.4s;}
section .image_show_wrap2{animation-duration: 1.4s;}

section .show_img01{animation-name: show_img01;}
@keyframes show_img01{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img02{animation-name: show_img02;}
@keyframes show_img02{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img03{animation-name: show_img03;}
@keyframes show_img03{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img04{animation-name: show_img04;}
@keyframes show_img04{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img05{animation-name: show_img05;}
@keyframes show_img05{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
section .show_img06{animation-name: show_img06;}
@keyframes show_img06{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
/* image_show_wrap 공통 */


/* image 확대 공통 */
.clip-animation {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    animation: clipExpand 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
}
    @keyframes clipExpand {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}
/* image 확대 공통 */
/* ------------------------------------------- sub -------------------------------------------------------- */
/* sub01_01 */
.sub01_01 .story_intro_section { padding: 120px 0; background-color: #fff; }
.sub01_01 .story_split_layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}
.sub01_01 .story_split_layout .txt_area { width: 45%; }
.sub01_01 .story_split_layout .sub_title {
    display: block;
    color: #8CC63F;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}
.sub01_01 .story_split_layout .main_title {
    font-size: 40px;
    line-height: 1.4;
    margin-bottom: 30px;
    color: #000;
}
.sub01_01 .story_split_layout .desc {
    font-size: 17px;
    color: #555;
    line-height: 1.8;
}

.sub01_01 .story_split_layout .img_area {
    width: 55%;
    border-radius: 20px 0 20px 0; /* 모서리 포인트를 주어 쌈빡하게! */
    overflow: hidden;
    box-shadow: -15px 15px 0px #f2f2f2; /* 감각적인 입체감 */
}
.sub01_01 .story_split_layout .img_area img {
    width: 100%;
    display: block;
    object-fit: cover;
}


.sub01_01 .story_philosophy_section { padding: 120px 0; background-color: #f8f9fa; }
.sub01_01 .story_philosophy_section .sec_title_wrap.center {
    text-align: center;
    margin-bottom: 70px;
}
.sub01_01 .story_philosophy_section .sub_title { color: #FF8000; display: block; margin-bottom: 15px; font-weight: 600;}
.sub01_01 .story_philosophy_section .main_title { font-size: 36px; color: #000; }

.sub01_01 .philosophy_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.sub01_01 .philosophy_grid .phil_box {
    background: #fff;
    padding: 50px 40px;
    border-radius: 15px;
    border: 1px solid #eaeaea;
    text-align: center;
    transition: all 0.3s ease;
}
.sub01_01 .philosophy_grid .phil_box:hover {
    border-color: #8CC63F;
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}
.sub01_01 .philosophy_grid .icon_box {
    width: 80px;
    height: 80px;
    background-color: #f4f9ed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 40px;
    color: #8CC63F;
}
.sub01_01 .philosophy_grid .phil_box h4 {
    font-size: 24px;
    color: #000;
    margin-bottom: 15px;
}
.sub01_01 .philosophy_grid .phil_box p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
}


.sub01_01 .story_vision_section {
    background: url('../img/sub/sub01/img2.jpg') no-repeat center/cover;
    background-attachment: fixed;
}
.sub01_01 .vision_overlay {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 150px 0;
    text-align: center;
    color: #fff;
}
.sub01_01 .vision_overlay .vision_title {
    font-size: 46px;
    font-family: 'Sweet', sans-serif;
    margin-bottom: 30px;
    color: #FF8000;
}
.sub01_01 .vision_overlay .vision_desc {
    font-size: 20px;
    line-height: 1.7;
    color: #ddd;
    margin-bottom: 40px;
}
.sub01_01 .vision_overlay .signature {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
}




.sub01_01 .story_video{
    padding:120px 0;
}
.sub01_01 .story_video .sub_title { color: #FF8000; display: block; margin-bottom: 15px; font-weight: 600; text-align: center;}
.sub01_01 .story_video .main_title { font-size: 36px; color: #000; text-align: center;}

.sub01_01 .story_video ul{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap:20px;
    margin-top:30px;
}
.sub01_01 .story_video ul li{width:33.333%}
.sub01_01 .story_video ul li .video{
    position: relative;
    overflow: hidden;
    width:100%;
    height:0;
    padding-top:56.25%;
}
.sub01_01 .story_video ul li .video iframe{
    position: absolute;
    top:-60px;
    left:0;
    width:100%;
    height:calc(100% + 120px);
    pointer-events: none;
}
/* sub01_01 */






/* sub02_01 */
.sub02_01 .menu_detail_section { padding: 120px 0; background-color: #fff; }
.sub02_01 .menu_detail_section .sec_title_wrap.center { text-align: center; margin-bottom: 80px; }
.sub02_01 .menu_detail_section .sub_title { display: block; color: #8CC63F; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub02_01 .menu_detail_section .main_title { font-size: 40px; color: #000; }

.sub02_01 .zigzag_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 100px;
}
.sub02_01 .zigzag_item:last-child { margin-bottom: 0; }

.sub02_01 .zigzag_item.reverse {flex-direction: row-reverse;}
.sub02_01 .zigzag_item .img_area {
    width: 50%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.sub02_01 .zigzag_item .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.sub02_01 .zigzag_item:hover .img_area img {
    transform: scale(1.05);
}

.sub02_01 .zigzag_item .txt_area {
    width: 45%;
}
.sub02_01 .zigzag_item .best_badge {
    display: inline-block;
    background-color: #FF8000;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 30px;
    margin-bottom: 20px;
}
.sub02_01 .zigzag_item h4 {
    font-size: 36px;
    color: #000;
    margin-bottom: 15px;
}
.sub02_01 .zigzag_item .sub_txt {
    font-size: 20px;
    color: #333;
    font-weight: 600;
    margin-bottom: 25px;
}
.sub02_01 .zigzag_item .desc {
    font-size: 17px;
    color: #666;
    line-height: 1.8;
}


.sub02_01 .menu_side_section {
    padding: 120px 0;
    background-color: #f8f9fa;
    margin-bottom:-30px;
}
.sub02_01 .menu_side_section .sec_title_wrap.center { text-align: center; margin-bottom: 60px; }
.sub02_01 .menu_side_section .sub_title { display: block; color: #FF8000; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub02_01 .menu_side_section .main_title { font-size: 36px; color: #000; }

.sub02_01 .side_menu_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.sub02_01 .side_item {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #eaeaea;
    transition: transform 0.3s, box-shadow 0.3s;
}
.sub02_01 .side_item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.06);
    border-color: #FF8000;
}
.sub02_01 .side_item .img_area {
    width: 100%;
    height: 260px;
    overflow: hidden;
}
.sub02_01 .side_item .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.sub02_01 .side_item:hover .img_area img {
    transform: scale(1.08);
}
.sub02_01 .side_item .txt_area {
    padding: 30px;
    text-align: center;
}
.sub02_01 .side_item .txt_area h4 {
    font-size: 24px;
    color: #000;
}
/* sub02_01 */






/* sub03_01 */
.sub03_01 .store_gallery_section { padding: 120px 0; background-color: #fff; }
.sub03_01 .store_gallery_section .sec_title_wrap.center { text-align: center; margin-bottom: 60px; }
.sub03_01 .store_gallery_section .sub_title { display: block; color: #8CC63F; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub03_01 .store_gallery_section .main_title { font-size: 40px; color: #000; margin-bottom: 15px; }
.sub03_01 .store_gallery_section .desc { font-size: 17px; color: #666; }

.sub03_01 .interior {
    position: relative;
    margin-top: 60px;
}

.sub03_01 .flipbook_wrap {
    width: 100%;
    text-align: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    user-select: none;
    -webkit-user-select: none;
}
.sub03_01 .book-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

.sub03_01 .book-frame {
    position: relative;
    width: min(1200px, 100%);
    aspect-ratio: 1.4 / 1;
    perspective: 3500px;
    overflow: visible;
    cursor: grab;
}

.sub03_01 .book-frame:active {
    cursor: grabbing;
}

/* 페이지 공통 스타일 */
.sub03_01 .book-pages {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.sub03_01 .book-page {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--page-bg);
    border-radius: 4px;
    box-shadow: 5px 15px 40px rgba(0,0,0,0.18);
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    clip-path: inset(0 0 0 0);
    will-change: clip-path, transform;
}

/* 이미지 클래스 */
.sub03_01 .book-page.p1 { background-image: url('../img/sub/sub03/img1.jpg'); }
.sub03_01 .book-page.p2 { background-image: url('../img/sub/sub03/img2.jpg'); }
.sub03_01 .book-page.p3 { background-image: url('../img/sub/sub03/img3.jpg'); }
.sub03_01 .book-page.p4 { background-image: url('../img/sub/sub03/img4.jpg'); }
.sub03_01 .book-page.p5 { background-image: url('../img/sub/sub03/img5.jpg'); }
.sub03_01 .book-page.p6 { background-image: url('../img/sub/sub03/img6.jpg'); }
.sub03_01 .book-page.p7 { background-image: url('../img/sub/sub03/img7.jpg'); }

.sub03_01 .book-page.is-active {
    visibility: visible;
    opacity: 1;
    z-index: 2;
}

.sub03_01 .page-back {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c3a683 0%, #e5d5c0 100%);
    box-shadow: -10px 0 30px rgba(0,0,0,0.25);
    transform-origin: right center;
    transform: translateX(100%) rotateY(-180deg);
    z-index: 5;
    will-change: transform;
}

.sub03_01 .page-shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 45%, rgba(0,0,0,0.15) 50%, transparent 55%);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
}


.sub03_01 .book-nav {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: #f7941d;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    z-index: 20;
}

.sub03_01 .book-nav::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

.sub03_01 .book-nav.prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.sub03_01 .book-nav.next::after { transform: translate(-70%, -50%) rotate(45deg); }

.sub03_01 .book-nav.prev:hover {
    background: #8cc63e;
    transform: scale(1.1) translateX(10px);
}
.sub03_01 .book-nav.next:hover {
    background: #8cc63e;
    transform: scale(1.1) translateX(-10px);
}


.sub03_01 .thumb-wrap {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.sub03_01 .thumb {
    width: 100px;
    aspect-ratio: 1.4 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.4;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.sub03_01 .thumb.is-active, .thumb:hover {
    filter: grayscale(0%);
    opacity: 1;
    border-color: var(--book-point);
    transform: translateY(-5px);
}

/* 모달 스타일 */
.sub03_01 .image-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

.sub03_01 .image-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.sub03_01 .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.sub03_01 .modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sub03_01 .image-modal.is-open .modal-content {
    transform: scale(1);
}

.sub03_01 .modal-content img {
    max-width: 100%;
    max-height: 75vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.sub03_01 .modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: 2px solid #fff;
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
}

/* 반응형 */
@media (max-width: 1024px) {
    .sub03_01 .book-frame { width: 90%; }
    .sub03_01 .thumb { width: 80px; }
}

@media (max-width: 768px) {
    .sub03_01 { padding: 80px 0; }
    .sub03_01 .book-wrap { flex-direction: column-reverse; gap: 20px; }
    .sub03_01 .book-nav { display: none; }
    .sub03_01 .book-frame { aspect-ratio: 1 / 1.1; }
    .sub03_01 .thumb-wrap { display: none; } /* 모바일은 썸네일 숨김(선택사항) */
}


.sub03_01 .store{
    padding:120px 0;
    background-color: #f8f9fa;
}
.sub03_01 .store ul{
    display: flex;
    flex-wrap: nowrap;
    align-items: top;
    justify-content: space-between;
    gap:40px;
}
.sub03_01 .store ul li{width:33.333%; cursor: pointer;}
.sub03_01 .store ul li .tit h3{text-align: center; margin-bottom:10px; transition: all .3s ease-in-out;}
.sub03_01 .store ul li .img{border-radius: 10px; overflow: hidden; background-color: #000;}
.sub03_01 .store ul li .img img{transition: all .3s ease-in-out;}
.sub03_01 .store ul li:hover .tit h3{color:#f7941d}
.sub03_01 .store ul li:hover .img img{transform: scale(1.1); opacity: .8;}




.sub03_01 .store_location_section {
    padding: 120px 0;
    /* background-color: #f8f9fa; */
    margin-bottom:-30px;
}
.sub03_01 .store_location_section .sec_title_wrap.center { text-align: center; margin-bottom: 60px; }
.sub03_01 .store_location_section .sub_title { display: block; color: #FF8000; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub03_01 .store_location_section .main_title { font-size: 40px; color: #000; }

.sub03_01 .location_wrap {
    display: flex;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

/* 지도 영역 */
.sub03_01 .location_wrap .map_area {
    width: 60%;
    height: 600px;
    background-color: #eaeaea; /* API 로드 전 임시 배경색 */
}
.sub03_01 .location_wrap .map_canvas {
    width: 100%;
    height: 100%;
}


/* 오시는길 */
.sub03_01 .location{width:60%;}
.sub03_01 .map_contant .location_map .map {position: relative;}
.sub03_01 .map_contant .location_map .map .cont{display: none;}

/* 투명막: 기본적으로 스크롤/줌을 막음 */
.sub03_01 .map_contant .location_map > .map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;        /* 필요하면 rgba(0,0,0,.0~.1)로 힌트 */
    pointer-events: auto;           /* 막기: 이벤트 가로막음 */
    /* 선택: 안내 배지도 원하면 아래 주석 해제
    box-shadow: inset 0 0 0 0 transparent;
    */
}

/* Ctrl 눌렀을 때 허용: before를 ‘없애는’ 대신 통과만 시킴 */
.sub03_01 .map_contant .location_map > .map.ctrl-zoom::before {
    pointer-events: none;           /* 통과 */
}

/* 기본 안내문구 */
.sub03_01 .map_contant .location_map > .map::after {
    content: "Ctrl + 스크롤로 확대 / 축소";
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 11;
    pointer-events: none;   /* 클릭 차단 안 되게 */
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Ctrl 누른 상태에서는 문구 숨김 */
.sub03_01 .map_contant .location_map > .map.ctrl-zoom::after {
    opacity: 0;
}





/* 텍스트 정보 영역 */
.sub03_01 .location_wrap .info_area {
    width: 40%;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sub03_01 .location_wrap .info_area h4 {
    font-size: 32px;
    color: #000;
    margin-bottom: 10px;
}
.sub03_01 .location_wrap .info_area .summary {
    font-size: 17px;
    color: #8CC63F;
    font-weight: 600;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
}

/* 아이콘이 포함된 리스트 스타일 */
.sub03_01 .info_list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}
.sub03_01 .info_list li:last-child { margin-bottom: 0; }

.sub03_01 .info_list i {
    font-size: 28px;
    color: #FF8000;
    margin-right: 20px;
    width: 30px;
    text-align: center;
    margin-top: 2px;
}
.sub03_01 .info_list .text_box strong {
    display: block;
    font-size: 16px;
    color: #000;
    margin-bottom: 5px;
}
.sub03_01 .info_list .text_box span {
    display: block;
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
}
/* sub03_01 */



/* sub04_01 */
/* sub04_01 - 공통 섹션 타이틀 */
.sub04_01 .sec_title_wrap.center { text-align: center; margin-bottom: 60px; }
.sub04_01 .sec_title_wrap .sub_title { display: block; color: #FF8000; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub04_01 .sec_title_wrap .main_title { font-size: 40px; color: #000; margin-bottom: 15px; }
.sub04_01 .sec_title_wrap .desc { font-size: 17px; color: #666; }

/* 1. 창업포인트 (Intro) */
.sub04_01 .franchise_intro_section { padding: 120px 0; background-color: #fff; }
.sub04_01 .fact_check_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 20px;
    padding: 80px;
    border: 1px solid #eaeaea;
}
.sub04_01 .fact_check_box .txt_part { width: 55%; }
.sub04_01 .fact_check_box .main_title { font-size: 42px; line-height: 1.4; color: #000; margin-bottom: 25px; }
.sub04_01 .fact_check_box .main_title strong { color: #8CC63F; } 
.sub04_01 .fact_check_box .desc { font-size: 18px; color: #555; line-height: 1.7; word-break: keep-all; }

.sub04_01 .fact_check_box .number_part {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.sub04_01 .fact_check_box .num_item {
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
}
.sub04_01 .fact_check_box .num_item strong {
    display: block;
    font-size: 60px;
    font-weight: 800;
    color: #FF8000;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    margin-bottom: 10px;
}
.sub04_01 .fact_check_box .num_item strong span { font-size: 30px; }
.sub04_01 .fact_check_box .num_item p { font-size: 18px; color: #333; font-weight: 600; }



/* 2. 차별화 */
.sub04_01 .franchise_diff_section { padding: 100px 0 120px; background-color: #fff; }
.sub04_01 .diff_grid {
    display: grid; 
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.sub04_01 .diff_item {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}
.sub04_01 .diff_item:hover {
    border-color: #8CC63F;
    box-shadow: 0 15px 40px rgba(140, 198, 63, 0.1);
    transform: translateY(-10px);
}
/* 카드 위쪽 컬러 라인 포인트 */
.sub04_01 .diff_item::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 30px;
    right: 30px;
    height: 3px;
    background-color: #8CC63F;
    transition: all 0.3s;
}
.sub04_01 .diff_item:hover::before { left: 0; right: 0; border-radius: 15px 15px 0 0; }

.sub04_01 .diff_item .icon_box {
    width: 70px;
    height: 70px;
    background-color: #f4f9ed;
    color: #8CC63F;
    font-size: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
}
.sub04_01 .diff_item h4 { font-size: 15px; color: #8CC63F; margin-bottom: 10px; font-weight: 700; }
.sub04_01 .diff_item strong { display: block; font-size: 22px; color: #000; margin-bottom: 15px; line-height: 1.3; word-break: keep-all; }
.sub04_01 .diff_item p { font-size: 15px; color: #666; line-height: 1.6; word-break: keep-all; }



/* 3. 창업경쟁력 (Dark Mode) */
.sub04_01 .franchise_points_section { padding: 120px 0; background-color: #111111; margin-bottom:-30px;}
.sub04_01 .franchise_points_section .sec_title_wrap .sub_title { color: #8CC63F; }

.sub04_01 .dark_point_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.sub04_01 .dark_point_card {
    background-color: #222222;
    padding: 50px 40px;
    border-radius: 15px;
    border: 1px solid #333;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.sub04_01 .dark_point_card:hover {
    transform: translateY(-10px);
    border-color: #8CC63F;
    box-shadow: 0 15px 30px rgba(140, 198, 63, 0.1);
}

.sub04_01 .dark_point_card .num {
    font-family: 'Poppins', sans-serif;
    font-size: 60px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 20px;
    right: 30px;
    transition: color 0.3s;
}
.sub04_01 .dark_point_card:hover .num { color: rgba(140, 198, 63, 0.2); }
.sub04_01 .dark_point_card h4 {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.sub04_01 .dark_point_card p {
    font-size: 16px;
    color: #aaaaaa;
    line-height: 1.7;
    position: relative;
    z-index: 2;
    word-break: keep-all;
}





/* ====================================================
   4. 가맹 절차
==================================================== */
.sub04_01 .franchise_step_section { padding: 120px 0; background-color: #fff; }

.sub04_01 .step_flow_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.sub04_01 .step_circle {
    width: 160px;
    height: 160px;
    background-color: #f8f9fa;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid #eaeaea;
    transition: all 0.3s;
}
.sub04_01 .step_circle:hover {
    border-color: #FF8000;
    box-shadow: 0 10px 20px rgba(255, 128, 0, 0.1);
}
.sub04_01 .step_circle span {
    font-family: 'Poppins', sans-serif;
    color: #FF8000;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}
.sub04_01 .step_circle strong {
    font-size: 20px;
    color: #000;
}

.sub04_01 .step_circle.highlight {
    background-color: #FF8000;
    border-color: #FF8000;
}
.sub04_01 .step_circle.highlight span,
.sub04_01 .step_circle.highlight strong {
    color: #fff;
}

.sub04_01 .step_flow_wrap .arrow {
    font-size: 30px;
    color: #ccc;
}
/* sub04_01 */



/* sub05_01 */
/* 1. 프로모션 */
.sub05_01 .opening_promo_section { padding: 80px 0 0; background-color: #fff; } 
.sub05_01 .promo_banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff9f0;
    border: 2px solid #FF8000;
    border-radius: 20px;
    padding: 60px 80px;
}
.sub05_01 .promo_banner .badge {
    display: inline-block;
    background-color: #FF8000;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 30px;
    margin-bottom: 20px;
}
.sub05_01 .promo_banner h3 { font-size: 38px; color: #000; margin-bottom: 15px; }
.sub05_01 .promo_banner h3 strong { color: #FF8000; font-weight: 800; }
.sub05_01 .promo_banner p { font-size: 18px; color: #555; }
.sub05_01 .promo_banner .icon_box { font-size: 100px; color: #FF8000; opacity: 0.8; }

/* 2. 창업 비용 */
.sub05_01 .opening_cost_section { padding: 120px 0; background-color: #fff; }
.sub05_01 .opening_cost_section .sec_title_wrap.center { text-align: center; margin-bottom: 60px; }
.sub05_01 .opening_cost_section .sub_title { display: block; color: #8CC63F; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub05_01 .opening_cost_section .main_title { font-size: 40px; color: #000; margin-bottom: 15px; }
.sub05_01 .opening_cost_section .desc { font-size: 17px; color: #666; }

.sub05_01 .cost_table_wrap { max-width: 1000px; margin: 0 auto; background-color: #f8f9fa; border-radius: 20px; border: 1px solid #eaeaea; overflow: hidden; }
.sub05_01 .cost_list li { display: flex; align-items: center; padding: 25px 40px; border-bottom: 1px solid #eaeaea; transition: background-color 0.3s; }
.sub05_01 .cost_list li:hover { background-color: #fff; }
.sub05_01 .cost_list li:last-child { border-bottom: none; }
.sub05_01 .cost_list .cate { width: 25%; font-size: 20px; font-weight: 700; color: #000; }
.sub05_01 .cost_list .price { width: 25%; font-size: 22px; font-weight: 700; color: #333; font-family: 'Poppins', sans-serif; }
.sub05_01 .cost_list .price del { font-size: 16px; color: #aaa; margin-right: 10px; font-weight: 400; }
.sub05_01 .cost_list .price .point { color: #FF8000; font-size: 24px; }
.sub05_01 .cost_list .note { width: 50%; font-size: 16px; color: #666; text-align: right; }

/* 3. 마진 차트 */
.sub05_01 .opening_margin_section { padding: 120px 0; background-color: #f8f9fa; }
.sub05_01 .opening_margin_section .sec_title_wrap.center { text-align: center; margin-bottom: 70px; }
.sub05_01 .opening_margin_section .sub_title { display: block; color: #FF8000; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub05_01 .opening_margin_section .main_title { font-size: 40px; line-height: 1.4; color: #000; margin-bottom: 15px; }

.sub05_01 .margin_chart_wrap { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; background: #fff; padding: 60px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
.sub05_01 .chart_left { width: 35%; display: flex; justify-content: center; }
.sub05_01 .circle_text { width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #8CC63F, #6fa12e); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 15px 30px rgba(140, 198, 63, 0.4); }
.sub05_01 .circle_text span { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
.sub05_01 .circle_text strong { font-size: 60px; font-weight: 800; font-family: 'Poppins', sans-serif; line-height: 1; }
.sub05_01 .circle_text strong span { font-size: 30px; }
.sub05_01 .chart_right { width: 55%; }
.sub05_01 .bar_item { display: flex; align-items: center; margin-bottom: 25px; }
.sub05_01 .bar_item:last-child { margin-bottom: 0; }
.sub05_01 .bar_item .label { width: 140px; font-size: 16px; font-weight: 600; color: #333; }
.sub05_01 .bar_item .bar_bg { flex-grow: 1; height: 12px; background-color: #eaeaea; border-radius: 10px; margin: 0 20px; overflow: hidden; }
.sub05_01 .bar_item .bar_fill { height: 100%; background-color: #ccc; border-radius: 10px; }
.sub05_01 .bar_item .percent { width: 50px; font-size: 18px; font-weight: 700; color: #555; font-family: 'Poppins', sans-serif; text-align: right; }
.sub05_01 .bar_item.highlight .label { color: #FF8000; font-size: 18px; }
.sub05_01 .bar_item.highlight .bar_fill { background-color: #FF8000; }
.sub05_01 .bar_item.highlight .percent { color: #FF8000; font-size: 24px; }

/* 4. 실전교육 시스템 */
.sub05_01 .opening_training_section { padding: 120px 0; background-color: #fff; }
.sub05_01 .opening_training_section .sec_title_wrap.center { text-align: center; margin-bottom: 60px; }
.sub05_01 .opening_training_section .sub_title { display: block; color: #8CC63F; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub05_01 .opening_training_section .main_title { font-size: 40px; line-height: 1.4; color: #000; margin-bottom: 15px; }
.sub05_01 .opening_training_section .desc { font-size: 17px; color: #666; }

.sub05_01 .training_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.sub05_01 .training_card { background-color: #f8f9fa; border: 1px solid #eaeaea; border-radius: 15px; padding: 40px 30px; transition: all 0.3s; }
.sub05_01 .training_card:hover { border-color: #8CC63F; background-color: #fff; box-shadow: 0 15px 30px rgba(140, 198, 63, 0.1); transform: translateY(-10px); }
.sub05_01 .training_card .icon { width: 80px; height: 80px; margin: 0 auto 25px; background-color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 40px; color: #8CC63F; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.3s; }
.sub05_01 .training_card:hover .icon { background-color: #8CC63F; color: #fff; }
.sub05_01 .training_card .step { text-align: center; font-size: 22px; font-weight: 700; color: #000; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed #ccc; }
.sub05_01 .training_card ul { text-align: left; }
.sub05_01 .training_card ul li { font-size: 15px; color: #555; margin-bottom: 10px; line-height: 1.4; position: relative; padding-left: 12px; word-break: keep-all; }
.sub05_01 .training_card ul li:before { content: '-'; position: absolute; left: 0; top: 0; color: #8CC63F; font-weight: bold; }
.sub05_01 .training_card ul li:last-child { margin-bottom: 0; }

/* 5. 가맹 절차 (디자인 전면 개편 - 지그재그 타임라인) */
.sub05_01 .opening_process_section { padding: 120px 0; background-color: #f8f9fa; margin-bottom:-30px;}
.sub05_01 .opening_process_section .sec_title_wrap.center { text-align: center; margin-bottom: 80px; }
.sub05_01 .opening_process_section .sub_title { display: block; color: #FF8000; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub05_01 .opening_process_section .main_title { font-size: 40px; color: #000; margin-bottom: 15px; }

.sub05_01 .timeline_process_wrap {
    position: relative;
    margin: 0 auto;
    padding: 30px 0;
}
/* 타임라인 가로 중앙 선 */
.sub05_01 .timeline_line {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    height: 4px;
    background-color: #eaeaea;
    transform: translateY(-50%);
    z-index: 1;
}

.sub05_01 .process_row {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
.sub05_01 .bottom_row { margin-top: 40px; }

.sub05_01 .process_box {
    width: 23%;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.sub05_01 .process_box:hover {
    transform: translateY(-5px);
    border-color: #8CC63F;
    box-shadow: 0 15px 30px rgba(140, 198, 63, 0.1);
}

/* 박스와 중앙 선을 이어주는 점 */
.sub05_01 .process_box::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 4px solid #eaeaea;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s;
}
.sub05_01 .process_box:hover::after { border-color: #8CC63F; background-color: #8CC63F; }

/* 위쪽 행 점 위치 */
.sub05_01 .process_box.top { margin-bottom: 40px; }
.sub05_01 .process_box.top::after { bottom: -52px; }

/* 아래쪽 행 점 위치 및 순서 맞추기용 여백 */
.sub05_01 .process_box.bottom { margin-top: 40px; }
.sub05_01 .process_box.bottom::after { top: -52px; }
.sub05_01 .bottom_row { padding-left: 7%; padding-right: 7%; } 

/* 텍스트 스타일 */
.sub05_01 .step_num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #e0e0e0;
    margin-bottom: 10px;
    transition: color 0.3s;
}
.sub05_01 .process_box:hover .step_num { color: #8CC63F; }

.sub05_01 .process_box strong {
    display: block;
    font-size: 18px;
    color: #000;
    margin-bottom: 15px;
    word-break: keep-all;
}
.sub05_01 .process_box p {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    word-break: keep-all;
}

/* 마지막 강조 박스 */
.sub05_01 .process_box.point {
    background-color: #FF8000;
    border-color: #FF8000;
}
.sub05_01 .process_box.point .step_num { color: rgba(255,255,255,0.4); }
.sub05_01 .process_box.point strong,
.sub05_01 .process_box.point p { color: #fff; }
.sub05_01 .process_box.point::after { border-color: #FF8000; }
/* sub05_01 */






/* sub06_01 */
.sub06_01 .consult_benefit_section { padding: 120px 0; background-color: #fff; }
.sub06_01 .consult_benefit_section .sec_title_wrap.center { text-align: center; margin-bottom: 60px; }
.sub06_01 .consult_benefit_section .sub_title { display: block; color: #FF8000; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub06_01 .consult_benefit_section .main_title { font-size: 40px; color: #000; margin-bottom: 15px; }
.sub06_01 .consult_benefit_section .desc { font-size: 17px; color: #666; }

.sub06_01 .benefit_grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto 40px;
}
.sub06_01 .benefit_card {
    flex: 1;
    background-color: #f8f9fa;
    border: 2px solid #eaeaea;
    border-radius: 15px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s;
}
.sub06_01 .benefit_card:hover {
    border-color: #FF8000;
    box-shadow: 0 15px 30px rgba(255, 128, 0, 0.1);
    transform: translateY(-10px);
    background-color: #fff;
}
.sub06_01 .benefit_card .icon {
    width: 70px;
    height: 70px;
    background-color: #fff;
    color: #FF8000;
    font-size: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s;
}
.sub06_01 .benefit_card:hover .icon {
    background-color: #FF8000;
    color: #fff;
}
.sub06_01 .benefit_card h4 { font-size: 20px; color: #000; margin-bottom: 15px; font-weight: 700; }
.sub06_01 .benefit_card p { font-size: 15px; color: #666; line-height: 1.5; word-break: keep-all; }

.sub06_01 .benefit_notice {
    text-align: center;
    font-size: 16px;
    color: #666;
    background-color: #fff9f0;
    padding: 15px 30px;
    border-radius: 30px;
    display: inline-block;
    border: 1px solid rgba(255,128,0,0.2);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.sub06_01 .benefit_notice strong { color: #FF8000; }



/* 2. 기존 상담 폼 섹션 유지 및 간격 조정 */
.sub06_01 .consult_page_section { padding: 120px 0; background-color: #f8f9fa; margin-bottom:-30px;}
.sub06_01 .consult_page_section .sec_title_wrap.center { text-align: center; margin-bottom: 60px; }
.sub06_01 .consult_page_section .sub_title { display: block; color: #8CC63F; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.sub06_01 .consult_page_section .main_title { font-size: 40px; color: #000; margin-bottom: 15px; }
.sub06_01 .consult_page_section .desc { font-size: 17px; color: #666; }

.sub06_01 .consult_form_wrap {
    display: flex;
    margin: 0 auto;
    gap:40px;
    justify-content: space-between;
}

.sub06_01 .consult_form_wrap .info_side {
    width: 45%;
    background-color: #435b43;
    color: #fff;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
}
.sub06_01 .consult_form_wrap .info_side .img{
    width:200px;
    margin-bottom:50px;
}
.sub06_01 .consult_form_wrap .info_side h4 {
    font-size: 32px;
    line-height: 1.4;
    margin-bottom: 20px;
    color: #fff;
}
.sub06_01 .consult_form_wrap .info_side .info_desc {
    font-size: 16px;
    color: #dcdcdc;
    line-height: 1.8;
    margin-bottom: 50px;
}

.sub06_01 .contact_detail .item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}
.sub06_01 .contact_detail .item:last-child { margin-bottom: 0; }
.sub06_01 .contact_detail .item i {
    font-size: 48px;
    color: #fff;
    margin-right: 20px;
}
.sub06_01 .contact_detail .item span {
    display: block;
    font-size: 15px;
    color: #bbb;
    margin-bottom: 5px;
}
.sub06_01 .contact_detail .item strong {
    display: block;
    font-size: 28px;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    line-height: 1;
    margin-bottom: 5px;
}
.sub06_01 .contact_detail .item p { font-size: 14px; color: #999; }




/* 창업 상담 폼 영역 */
.sub06_01 .consult_form_wrap .form_side{width:55%;}
.sub06_01 .consult_form_wrap .form_side .board .AWbbs_input_table .textarea{display: none;}
.sub06_01 .consult_form_wrap .form_side .board{
    transition: all .5s ease-in-out;
    opacity: 0;
    transform: translateX(50%);
    position: relative;
    overflow: hidden;
}
.sub06_01 .consult_form_wrap.active .board{
    opacity: 1;
    transform: translateX(0);
}
.sub06_01 .consult_form_wrap .form_side .board .consult_cont{
    margin:0;
    border:0;
    padding:20px;
    border-radius: 20px;
    position: relative;
}
.sub06_01 .consult_form_wrap .form_side .board .consult_cont::before{
    content: '';
    position: absolute;
    inset: 0;
    width:100%;
    height:100%;
    /* background: url(../img/sub/sub06/form_bg.jpg); */
    background-color: #f7941d;
    border-radius: 20px;
    opacity: .1;
    z-index: -1;
}

.sub06_01 .consult_form_wrap .form_side .board .consult_cont table tr{border:0;}
.sub06_01 .consult_form_wrap .form_side .board .consult_cont table tr input{width:100%;}
.sub06_01 .consult_form_wrap .form_side .board .consult_cont table th{
    font-size:14px;
    color:#1d090a;
    width:20%;
    font-weight: 400;
}
.sub06_01 .consult_form_wrap .form_side .board .consult_cont table td{color:#fff;}
.sub06_01 .consult_form_wrap .form_side .board .AWbbs_input_table{
    border: 0 !important;
    padding: 0 !important;
}

.sub06_01 .consult_form_wrap .form_side .board .only_chk{color:#fff; font-weight: 300;}
.sub06_01 .consult_form_wrap .form_side .board .only_chk.font input[type=checkbox] + label{line-height:1.5!important; color:#1d090a;}
.sub06_01 .consult_form_wrap .form_side .board .AWbbs_input_table .top10{position: relative; margin: 0 !important;}
.sub06_01 .consult_form_wrap .form_side .board .AWbbs_input_table .top10 .personal{
    position: absolute;
    top:22px;
    right:0;
    display: block;
    font-size:16px;
    color:#1d090a;
    font-weight: 400;
    transition: all .3s ease-in-out;
}
.sub06_01 .consult_form_wrap .form_side .board .only_chk.font input[type=checkbox]:checked + label::before{background-color: #fff!important;}
.sub06_01 .consult_form_wrap .form_side .board .AWbbs_input_table .top10 .personal:hover{color:#a4293d;}

.sub06_01 .consult_form_wrap .form_side .board .AW-mem-btn button{
    width:100%;
    background-color: #435b43;
    color:#fff;
    transition: all .3s ease-in-out;
    border-radius: 10px;
}
.sub06_01 .consult_form_wrap .form_side .board .AW-mem-btn button:hover{
    background-color: #f7941d;
    color:#fff;
}
/* sub06_01 */
/* ------------------------------------------- sub -------------------------------------------------------- */