@charset "utf-8";
/* 공통 */
.sub-mg { margin-bottom: 160px; }
.subtxt { font-size: var(--font-size18); line-height: 1.77em; }

/* 회사소개 */
.it-tit { text-align: center; position: relative; font-size: var(--font-size40); font-weight: 700; color: #222; line-height: 1.4em; margin-bottom: 90px; }
.it-tit.clr { color: #6f3b2a; }
.it-sec1 { background: url(../images/sub/sub1-1-bg.jpg) center no-repeat; background-size: cover; color: #fff; }
.it-sec1 h2 { font-size: var(--font-size48); font-weight: 700; line-height: 1.4em; }
.it-sec1 h4 { font-size: var(--font-size28); font-weight: 600; line-height: 1.5em; margin: 70px 0;}
.it-sec1 p { font-size: var(--font-size20); font-weight: 400; line-height: 1.7em; }
.it-sec2 { padding-top: 100px; }
.it-sec2 .inner { max-width: 980px; margin: auto; }
.it-circle { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 80px; }
.it-circle .col { width: 300px; height: 300px; border-radius: 100%; background: #efefef; padding-top: 72px; text-align: center; color: var(--color-primary);}
.it-circle .col .tit { margin-top: 37px; font-size: var(--font-size36); font-weight: 700; line-height: 1em; margin-bottom: 25px; }
.it-circle .col .txt { color: #623f3f; font-size: var(--font-size20); font-weight: 600; line-height: 1.2em; }
.it-list li { margin-bottom: 30px; display: flex; font-size: var(--font-size18); }
.it-list li:last-child { margin-bottom: 0; }
.it-list li .tt { width: 180px; font-weight: 600; color: #623f3f; }
.it-list li .txt { flex: 1 1 auto; min-width:0; width: 1%;}

/* BI */
.bi-sec1 { text-align: center; }
.bi-sec1 .txt { max-width: 700px; margin: auto; text-align: left; margin-top: 75px; }
.bi-sec1 .txt p { margin-bottom: 30px; font-size: var(--font-size18); line-height: 1.77em; }
.bi-sec1 .txt p:last-child { margin-bottom: 0; }
.bi-fx {display: flex; justify-content: center; align-items: center;}
.bi-fx p { padding-left: 80px; }

/* 연혁 */
.hst-wrap h5 { text-align: center; margin-bottom: 100px; line-height: 1em; font-size: var(--font-size24); font-weight: 600; color: #222; }
.hst { position: relative; display: flex; }
.hst::before { content: ""; position: absolute; left: 50%; top: 15px; transform: translateX(-50%); width: 1px; height:98.3%; background: #ddd; z-index: -1; }
.hst .img-wrap { width: 50%; padding-right: 20px; padding-top: 70px; text-align: center; }
.hst .img-wrap img { margin-bottom: 340px; border-radius: 16px; }
.hst .img-wrap img:last-child { margin-bottom: 0; }
.hst .info { width: 50%; }
.hst .info .group { position: relative; padding-left: 50px; margin-bottom: 130px; }
.hst .info .group::before { content: ""; position: absolute; left: -8px; width: 16px; height: 16px; border-radius: 16px; top: 15px; background: #999; }
.hst .info .group:last-child { margin-bottom: 0; }
.hst .info .group .year { font-size: var(--font-size40); font-weight: 700; line-height: 1.2em; color: var(--color-primary); margin-bottom: 28px; }
.hst .info .group ul li { display: flex; margin-bottom: 18px; }
.hst .info .group ul li:last-child { margin-bottom: 0; }
.hst .info .group ul li .month { width: 80px; font-size: var(--font-size20); font-weight: 600; line-height: 1.2em; color: #222; padding-top: 4px;}
.hst .info .group ul li .txt { flex: 1 1 auto; min-width:0; width: 1%; font-size: var(--font-size18); font-weight: 400; line-height: 1.77em; }
.hst .info .group.first { margin-bottom: 530px; }
.hst .info .group.first::before { background: var(--color-primary);}

/* 오시는 길 */
.map-wrap { padding: 80px; border-radius: 24px; border: 1px solid #ddd; text-align: center; }
.map-wrap .it-tit { margin-bottom: 35px; position: relative; }
.map-wrap .it-tit::before { content: ""; display: block; width: 40px; height: 4px; background: #6f3b2a; margin: 0 auto 30px;}
.map-wrap h4 { font-size: var(--font-size24); font-weight: 500; line-height: 1.5em; margin-bottom: 45px; }
.map-wrap .lct .group { display: flex; justify-content: center; font-size: var(--font-size18); position: relative; }
.map-wrap .lct .group .tit { padding-right: 20px; padding-left: 14px; position: relative; font-weight: 600; }
.map-wrap .lct .group .tit::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 6px; background: #ffe200; }
.map-wrap .lct .fx { display: flex; justify-content: center; gap: 34px; margin: 20px 0 50px; }
.map-wrap .lct .group.af::after { content: ""; position: absolute; right: -16px; width: 1px; height: 12px; background: #ddd; top: 6px; }
.map-wrap .map { border-radius: 16px; overflow: hidden; }
.map-wrap .roughmap_maker_label {border:0; border-radius:10px;}
.map-wrap .roughmap_maker_label:after {display:none;}
.map-wrap .roughmap_maker_label .roughmap_lebel_text {display:flex; justify-content:center; width:172px; height:68px; background:url("../images/sub/label.png") no-repeat 50% 50% /contain; line-height:0 !important; font-size:0 !important;}
.map-wrap .roughmap_lebel_text:after {margin-top:35px; content:""; display:block; width:80px; height:87px; background:url("../images/sub/pin.png") no-repeat 50% 50% / contain;}

/* 메뉴 */
.menu-tab { display: flex; flex-wrap: wrap; margin-bottom: 100px; background: #f4efe4; }
.menu-tab li { width: calc(100%/4);}
.menu-tab li a { display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--font-size18); line-height: 1.2em; font-weight: 600; padding: 28px 10px;}
.menu-tab li.active a,
.menu-tab li a:hover { background: var(--color-primary); color: #fff; }
.menu-list { display: flex; flex-wrap: wrap; gap: 65px 12px; padding-bottom: 40px; }
.menu-list .col { text-align: center; width: calc(100%/4 - 9px);}
.menu-list .col a { display: block; position: relative; padding-bottom: 25px; }
/* .menu-list .col a::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 32px; border: 3px solid #8B5E3C; opacity: 0; transition: .3s;} */
.menu-list .col .thumb { border-radius: 32px; position: relative; padding-bottom: 120%; display: block; overflow: hidden;}
.menu-list .col .thumb>img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.menu-list .col .view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 32px; transition: .3s; display: flex; align-items: center; justify-content: center; opacity: 0; }
.menu-list .col .view div { width: 120px; height: 120px; border-radius: 100%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.menu-list .col .view img { height: 24px; }
.menu-list .col .view span { font-weight: 600; line-height: 1.2em; display: block; margin-top: 15px; }
.menu-list .col:hover .view { opacity: 1; }
.menu-list .col a:hover::after { opacity: 1; }
.menu-list .col .tit { font-size: var(--font-size24); font-weight: 600; line-height: 1.3em; color: #222; margin: 37px 0 15px; }
.menu-list .col .en-tit { font-size: var(--font-size18); font-weight: 400; color: #676767; }
.menu-swiper { margin-bottom: 100px; position: relative; }
.menu-swiper a { display: block; }
.menu-swiper .thumb { padding-bottom: 56.25%; position: relative; display: block; overflow: hidden;}
.menu-swiper .thumb img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; border-radius: 16px; max-width: 100%; max-height: 100%;}
.menu-photo { display: flex; gap: 60px 10px; flex-wrap: wrap; text-align: center; }
.menu-photo .col { width: calc(100%/5 - 8px);}
.menu-photo .col .thumb { border-radius: 16px; position: relative; padding-bottom: 120%; display: block; overflow: hidden;}
.menu-photo .col .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.menu-photo .col .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 2px solid var(--color-primary); border-radius: 16px; display: none; }

.menu-photo .col .tit { margin: 37px 0 15px; font-size: var(--font-size24); font-weight: 600; line-height: 1.3em; color: #222;  }
.menu-photo .col .en-tit { font-size: var(--font-size18); font-weight: 400; color: #676767; }
/* .menu-photo .col.active .thumb::after { opacity: 1; display: block; } */
.menu-photo .col.active .tit { color: var(--color-primary); }
.menu-photo .col:hover .thumb::after { display: block; border-color: #8B5E3C; border-width: 3px;}
.menu-photo .col:hover .tit { color: var(--color-primary); }


/* 창업비용 */
.cost { text-align: center; }
.cost-tbl-wrap { overflow: auto; margin-top: 100px; }
.cost-tbl { width: 100%; border-collapse: collapse; border-top: 1px solid #AC9999;}
.cost-tbl tr { border-bottom: 1px solid #AC9999;}
.cost-tbl tr.bd { border: none;}
.cost-tbl tr.bg { background: #f5dc2e; }
.cost-tbl tr th { border-right: 1px solid #AC9999; padding: 25px 10px; line-height: 1.2em; color: #222; font-size: var(--font-size18); font-weight: 600; background: #f5dc2e; }
.cost-tbl tr th:last-child { border-right: none; }
.cost-tbl tr td { border-right: 1px solid #AC9999; padding: 25px 10px; font-size: var(--font-size18); font-weight: 400; line-height: 1.77em; }
.cost-tbl tr td:last-child { border: none; }
.cost-tbl tr td.left { text-align: left; padding-left: 30px; }
.cost-tbl tr td .txt p { position: relative; padding-left: 12px;}
.cost-tbl tr td .txt p::before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 4px; left: 0; top: 14px; background: #ac9999; }
.cost-tbl tr td.clr { font-weight: 500; color: #6f3b2a; }
.cost-tbl tr td.clr span { display: inline-block; position: relative; }
.cost-tbl tr td.clr span::before { content: ""; position: absolute; left: 0; width: 100%; height: 2px; top: 0; bottom: 0; margin: auto; background: #d42424; }
.cost-tbl tr td.total { background: #f5dc2e; padding: 25px 30px;}
.cost-tbl tr td .fx { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.cost-tbl tr td .fx .fw { font-weight: 600; color: #222; }
.cost-tbl tr td .fx .total { font-weight: 700; color: #6f3b2a; font-size: var(--font-size28);}
.cost-tbl tr td .fx .vat { font-weight: 600; color: #999; }
.cost-span { margin-top: 25px; text-align: left; }
.cost-span p { font-weight: 500; }

/* 창업문의 */
.required-txt { text-align: right; font-size: var(--font-size18); color: var(--color-primary); font-weight: 500; line-height: 1.3em; margin-bottom: 25px; }
.required-txt span { display: inline-block; width: 8px; height: 8px; border-radius: 8px; display: inline-block; background: #d42424; position: relative; top: -2px; margin-right: 8px; }
.inq-wrap { background: #fff; padding: 80px; border-radius: 24px; }
.inq-wrap .form dl { display: flex; align-items: center; margin-bottom: 40px; }
.inq-wrap .form dl dt { width: 220px; font-size: var(--font-size18); font-weight: 600; color: #222; }
.inq-wrap .form dl dt .required { display: inline-block; width: 8px; height: 8px; border-radius: 8px; display: inline-block; background: #d42424; position: relative; top: -3px; margin-left: 8px; }
.inq-wrap .form dl dd { flex: 1 1 auto; min-width:0; width: 1%; }
.inq-wrap .form dl .input { height: 48px; border-radius: 8px; padding: 6px 12px; }
.inq-wrap .form dl .tel-fx { display: flex; gap: 8px; align-items: center;}
.inq-wrap .form dl .tel-fx.flex .input { flex: 1; }
.inq-wrap .tel-msg ul { margin-top: 12px; }
.inq-wrap .tel-msg2 ul { margin-top: 12px; }
.inq-wrap .item-fx { display: flex; flex-wrap: wrap; gap: 10px 40px;}

/* 가맹절차 */
.gd-wrap { display: flex; flex-wrap: wrap; gap: 15px; }
.gd-wrap .col { width: calc(100%/3 - 10px); border-radius: 24px; padding: 56px 48px; background: #f8f6f5; text-align: center; }
.gd-wrap .col .num { width: 40px; height: 40px; border-radius: 40px; display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1.5em; font-size: var(--font-size24); font-weight: 600; background: var(--color-primary); margin: auto; }
.gd-wrap .col .tit { margin: 28px 0 46px; font-size: var(--font-size32); font-weight: 600; line-height: 1.4em; color: var(--color-primary); }
.gd-wrap .col .txt { margin-top: 46px; }
.gd-wrap .col .txt p { position: relative; padding-left: 12px; font-size: var(--font-size18); line-height: 1.77em; text-align: left; }
.gd-wrap .col .txt p::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 4px; background: var(--color-primary); top: 13px; }
.gd-wrap .col.bg { background: var(--color-primary);}
.gd-wrap .col.bg .num { background: #fff; color: var(--color-primary); }
.gd-wrap .col.bg .logo { margin: 95px 0;}
.gd-wrap .col.bg .tit2 { color: #fff; font-size: var(--font-size24); line-height: 1.58em; font-weight: 600; }
.gd-wrap.fx { gap: 16px; }
.gd-wrap.fx .col { width: calc(100%/2 - 8px);}
.gd-wrap.fx .col .num { background: #fff; color: var(--color-primary);} 
.gd-wrap.fx .col .en-tit { display: block; font-size: var(--font-size20); font-weight: 500; }

/* 공지사항 */
.noti-list { border-top: 2px solid #686868;}
.noti-list li { border-bottom: 1px solid #ddd;}
.noti-list li a { display: flex; padding: 40px; position: relative; align-items: center; }
.noti-list li .num { width: 56px; height: 56px; border-radius: 56px; display: flex; align-items: center; justify-content: center; margin-right: 40px; color: var(--color-primary); font-weight: 700; line-height: 1em; }
.noti-list li .num.label { background: var(--color-primary); color: #fff; }
.noti-list li .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 40px; }
.noti-list li .info .tit { line-height: 1.2em; font-size: var(--font-size20); font-weight: 600; color: #222; margin-bottom: 10px; overflow:hidden; text-overflow:ellipsis;  white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; transition: .2s;}
.noti-list li .info .tit img {vertical-align:middle; margin:-.2em 4px 0;}
.noti-list li .info .etc { display: flex; flex-wrap: wrap; gap: 7px 20px;}
.noti-list li .info .etc span { font-size: 14px; font-weight: 300; color: #505050; line-height: 1.3em; }
.noti-list li a::after { content: "→"; position: absolute; right: 40px; top: 50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); font-size: 30px; font-weight: 700; color: #777; line-height: 1em; transition: .2s;}
.noti-list li a:hover { background: #F5F3F3;}
.noti-list li a:hover .info .tit { color: var(--color-primary);}
.noti-list li a:hover::after { color: var(--color-primary);}