* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.highlight {
  color: #f3d573;
}


section {overflow: hidden;}

.contents {
  margin: 0 12%;
}

ul, ol, li {list-style: none;}

:root{
  --color-yellow:#f3e7a9;
  --color-yellow2:#ffe08b;
  --color-red:#be0000;
  --color-brown:#412210;
  --color-lightbrown:#653b22;
}

html,
body {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
}

.yellow2 {color: var(--color-yellow2);}
.bold {font-weight: 700;}

p, span, li, a, button, li {font-family: 'Pretendard';}

.pc {display: block;}
.m {display: none !important;}

/* Mobile */
@media (max-width: 768px) {
  .pc {display: none !important;}
  .m {display: block !important; width: 100%;}
  
  img {width: 100%;}

  .contents {margin: 0 5%;}

}


/* 팝업레이어 */
#hd_pop {
	z-index:999;
	position:absolute;
	top: 120px !important;
	margin:0 auto;
	height:0;
	cursor: move;
}

#hd_pop h2 {
	position:absolute;
	font-size:0;
	line-height:0;
	overflow:hidden;
}

.hd_pops {
	position:absolute;
	background:#fff;
	font-family: 'Pretendard';
}


.hd_pops img{max-width:100%}
.hd_pops_footer {
	background:#1b1b1b;
	color:#fff;
	text-align:right;
	font-size: 14px;
}
.hd_pops_footer:after {
	display:block;
	visibility:hidden;
	clear:both;
	content:"";
}

.hd_pops_footer button {
	margin-right:5px;
	padding:5px 10px;
	border:0;
	background:#1b1b1b;
	color:#fff;
}

.hd_pops_footer button:hover {color:#eee;}

.hd_pops_footer .hd_pops_reject {
	background:#1b1b1b;
	text-align:left; 
	margin-left:10px;
	padding: 10px 0;
}

.hd_pops_footer .hd_pops_close{
	background:#33353E;
	margin:0px;
	font-size: 14px;
	float: right;
	padding: 10px 20px;
}

@media (max-width: 991.98px) {

	/* 팝업레이어 모바일 */
	#hd_pop {
		z-index:1000;
		position:relative;
		margin:0 auto;
		width:100%;
		height:0px;
	}
	
	#hd_pop h2 {
		position:absolute;
		font-size:0;
		text-indent:-9999em;
		line-height:0;
		overflow:hidden;
	}
	
	.hd_pops {
		position:absolute;
		top: 100px;
		left: 50% !important;
		transform: translateX(-50%);
		background:#fff;
		width: 95%;
	}
	

	.hd_pops iframe {
		width: 100%;
		height: 350px;
	}	
	

	.hd_pops_con { 
		width:100% !important;
		height: 100% !important;
	}
	
	.hd_pops_con p { 
		margin: 0; 
		padding: 0;
		font-size: 0;
	}
	
	.hd_pops img{max-width:100%;}
	
	.hd_pops_footer {
		margin: 0;
		padding: 0;
	}
	
	.hd_pops_footer button {
		margin-right:5px;
		padding:5px 10px;
		border:0;
		background:#1b1b1b;
		color:#fff;
	}
	
	.hd_pops_footer button:hover {color:#eee}
	
}


/*=================================================================
mfp CSS
==================================================================*/

.privacy-check { margin-right: 10px;}


.white_pop {
    position: relative;
    background: #fff;
    padding: 40px;
    width: auto;
    width: 50%;
    margin: 20px auto;
    transition: 1s all;
    font-family: "Pretendard";
    text-align: justify;
}

.white_pop h2 {
    font-weight: 600;
    margin-bottom: 30px;
}

@media (max-width: 1020px) {
    .white_pop {
        width: 90%;
        padding: 20px;
    }
}

.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    transition: all 0.4s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}


/*--------------------------------------------
헤더
----------------------------------------------*/

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9000; /* intro보다 낮게 */
  background: #000000;
  background: linear-gradient(-180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}

.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100% - 40px, 1440px);
  height: 100px;
  margin: 0 auto;
}


/* Logo */
.header-logo {  width: 150px;}
.header-logo img {width: 100%;}

/* PC Navigation */
.header-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 40px;
}

.header-nav a {
  font-family: 'Pretendard';
  color: #fff;
  font-size: 1.2em;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.header-nav a:hover {
  opacity: 0.55;
}

/* PC Phone */
.header-phone {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
}

/* Hamburger */
.header-menu-button {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.header-menu-button span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 6px auto;
  background: #fff;
  border-radius: 999px;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 8998; /* header보다 살짝 낮고, intro보다 낮게 */
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* Mobile Side Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; /* header와 비슷하지만 intro보다 낮게 */
  width: 100%;
  height: 100vh;
  padding: 24px;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 16px 0 40px rgba(0, 0, 0, 0.18);
}


.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 48px;
}

.mobile-menu-logo {
  width: 150px;
}

.mobile-menu-close {
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--color-brown);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu-nav a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--color-brown);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.04em;
  transition: 0.2s;

}

.mobile-menu-nav a:hover {
  color: var(--color-red);
  transition: 0.2s;
}

.mobile-menu-nav a:last-child {border: 0;}

.mobile-menu-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin-top: 36px;
  border-radius: 999px;
  background: var(--color-red);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}

/* Menu Open State */
body.menu-open {
  overflow: hidden;
}

body.menu-open .mobile-menu {
  transform: translateX(0);
}

body.menu-open .mobile-menu-overlay {
  opacity: 1;
  visibility: visible;
}

/* Mobile */
@media (max-width: 768px) {
  .header-inner {
    padding: 0 5%;
    grid-template-columns: 42px 1fr 42px;
    width: 100%;
    height: 64px;
  }

  .header-menu-button {
    display: block;
    justify-self: start;
  }

  .header-logo {
    justify-self: center;
    width: 120px;
  }

  .header-nav,
  .header-phone {
    display: none;
  }

}



/*--------------------------------------------
메인페이지
----------------------------------------------*/

.main_hero {
  height: 1250px;
  text-align: center;
  position: relative;
  background-color: #000;
  overflow: hidden;
}

.main_hero .title {
  position: absolute;
  top: 13%;
  z-index: 99;
  left: 50%;
  transform: translateX(-50%) !important;
}

.main_hero .title img {
  width: auto;
}

.main_over {
  position:absolute;
  left: 0;
  bottom:-10px;
  z-index: 99;
}

.main_right, .main_left {position: absolute; top: 0; z-index: 1;}
.main_right {right: 0;}
.main_left {left: 0;}

.yellow {color: var(--color-yellow);}


.top-marquee {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 99;
  height: 54px;
  overflow: hidden;
  background:#653b22;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.top-marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeRight 18s linear infinite;
}

.top-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.top-marquee-group span {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

/* 왼쪽에서 오른쪽으로 흐름 */
@keyframes marqueeRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}



/* Mobile */
@media (max-width: 768px) {

  .top-marquee {
    height: 44px;
  }

  .top-marquee-track {
    animation-duration: 25s;
  }

  .top-marquee-group span {
    padding: 0 15px;
    font-size: 18px;
  }

  .top-marquee-group span::after {
    margin-left: 15px;
  }

  .main_hero {
    height: 650px;
  }

  .main_hero .title {
    position: absolute;
    top: 15%;
    width: 100%;
    padding: 0 5%;
    left: 50%;
    transform: translateX(-50%) !important;
  }

  .main_hero .title img {
    width: 100%;
  }


  .main_right img, .main_left img {
    width: 100%;
  }

}



/*=================================================================
SEC01 :: 검증된 브랜드 해목정
=================================================================*/
#sec01 {
  clear: both;
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: center;
  padding: 200px 0;
  background: url("../img/brand_bg_1.jpg") center / cover no-repeat;
}

.brand_over {
  position: absolute;
  top: 0;
  right: 0;
}

.brand_txt h2 {
  font-size: 0;
  text-align: left;
  padding-bottom: 60px;
}

.brand_txt p {
  font-family: "Noto Serif KR", serif;
  font-optical-sizing: auto;
  font-weight:500;
  color: #fff;
  text-align: left;
  padding-bottom: 30px;
  font-size: 1.5em;
}

.brand_txt p span {font-family: "Noto Serif KR", serif;}
/*============================================================
SEC01 :: 모바일 반응형
============================================================*/

@media (max-width: 768px) {

  #sec01 {
    padding: 100px 0 90px;
    background-position: center center;
    background-size: cover;
  }


  /* 우측 오버 이미지 */
  .brand_over {
    top: 0;
    right: -30%;
    width: 70%;
  }

  .brand_over img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.5;
  }


  /* 텍스트 영역 */
  .brand_txt {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 7%;
    box-sizing: border-box;
  }


  /* 타이틀 이미지 영역 */
  .brand_txt h2 {
    padding-bottom: 40px;
    text-align: left;
  }

  .brand_txt h2 img {
    display: block;
    width: 100%;
    max-width: 450px;
    height: auto;
  }


  /* 본문 */
  .brand_txt p {
    padding-bottom: 22px;

    font-family: "Noto Serif KR", serif;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 1.8;

    text-align: left;
    word-break: keep-all;
  }

  .brand_txt p span {
    font-family: "Noto Serif KR", serif;
  }

}


/*============================================================
작은 모바일
============================================================*/

@media (max-width: 480px) {

  #sec01 {
    padding: 80px 0 70px;
  }


  /* 우측 장식 이미지 */
  .barnd_over {
    right: -30%;
    width: 85%;
    opacity: 0.55;
  }


  .brand_txt {
    padding: 0 6%;
  }


  .brand_txt h2 {
    padding-bottom: 32px;
  }

  .brand_txt h2 img {
    max-width: 100%;
  }


  .brand_txt p {
    padding-bottom: 18px;

    font-size: 0.95em;
    line-height: 1.75;
    letter-spacing: -0.04em;
  }

}



/*=================================================================
SEC02 :: 흔한 메뉴로 경쟁하지 않습니다
==================================================================*/
#sec02 {
  position: relative;
  width: 100%;
  height: 1050px;
  min-height: 800px;
  overflow: hidden;
  color: #fff;
  font-family: 'Arita buri';
  background:
    url("../img/brand_bg_2.jpg")
    no-repeat center center / cover;
}

/*------------------------------------------------------------
좌 / 우 이미지 영역
------------------------------------------------------------*/

.brand-side {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;

  width: 360px;

  overflow: hidden;
}

.brand-side-left {
  left: 55px;
}

.brand-side-right {
  right: 55px;
}


/* 실제 움직이는 영역 */
.brand-side-track { 
  display: flex; 
  flex-direction: column; 
  width: 100%; 
} 

/* 왼쪽은 위로 */ 
.brand-side-left .brand-side-track { animation: brandScrollUp 22s linear infinite; } 
/* 오른쪽은 아래로 */ 
.brand-side-right .brand-side-track { animation: brandScrollDown 25s linear infinite; }
/* 왼쪽 : 위 방향 */
 @keyframes brandScrollUp { 
  0% { transform: translate3d(0, 0, 0); } 
  100% { transform: translate3d(0, -50%, 0);} 
}
  
/* 오른쪽 : 아래 방향 */
@keyframes brandScrollDown { 
  0% { transform: translate3d(0, -50%, 0); } 
  100% { transform: translate3d(0, 0, 0); }
}

/* 3장 한 세트 */
.brand-side-set {
  flex-shrink: 0;

  display: flex;
  flex-direction: column;
  gap: 28px;

  width: 100%;

  padding-bottom: 28px;
}


/* 개별 이미지 */
.brand-side-img {
  position: relative;

  width: 100%;
  aspect-ratio: 1 / 1;

  overflow: hidden;

}

.brand-side-img img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}




/*------------------------------------------------------------
중앙 영역
------------------------------------------------------------*/

.brand-sales-content {
  position: relative;
  z-index: 5;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: calc(100% - 850px);
  max-width: 900px;

  margin: 0 auto;
  padding-top: 170px;

  text-align: center;
}


/*------------------------------------------------------------
서브 타이틀
------------------------------------------------------------*/

.brand-sales-subtitle {
  margin: 0 0 35px;
  font-family: 'Arita buri';
  font-size: 40px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  letter-spacing: -0.05em;
}

/*------------------------------------------------------------
메인 타이틀
------------------------------------------------------------*/

.brand-sales-title {
  margin: 0;
  font-family: 'Arita buri';
  font-size: 70px;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
  letter-spacing: -0.06em;
  word-break: keep-all;
}

.brand-sales-title strong {
  font-family: 'Arita buri';
  color: #f5d27b;
  font-weight: 700;
}


/*------------------------------------------------------------
하단 데이터
------------------------------------------------------------*/

.brand-sales-data {
  display: flex;
  align-items: stretch;
  justify-content: center;

  width: 100%;

  margin: 100px 0;
}


/* 각각의 정보 */
.brand-data-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-width: 0;
}

.brand-data-item p {
  margin: 0 0 18px;

  font-family: 'Arita buri';
  font-size: clamp(18px, 1.4vw, 25px);
  font-weight: 500;

  color: #fff;

  letter-spacing: -0.04em;
}


/* 가운데 세로선 */
.brand-data-line {
  flex: 0 0 1px;

  width: 1px;
  min-height: 140px;

  margin: 0 50px;

  background: rgba(255, 255, 255, 0.55);
}


/* 숫자 */
.brand-data-value {
  display: flex;
  align-items: flex-end;
  justify-content: center;

  white-space: nowrap;

  color: #f7d579;
}

.brand-data-value strong {
  font-family: 'Arita buri';
  font-size: clamp(60px, 5.5vw, 100px);
  font-weight: 600;
  line-height: 0.95;

  color: #f7d579;

  letter-spacing: -0.07em;
}

.brand-data-value span {
  margin: 0 0 8px 5px;

  font-family: 'Arita buri';
  font-size: clamp(28px, 2.2vw, 42px);
  font-weight: 600;

  color: #fff;
}


/* 월 최고 매출액 */
.brand-data-sales {
  align-items: flex-end;
}

.brand-data-sales strong {
  font-size: clamp(54px, 4.7vw, 90px);
}

.brand-data-sales .small-unit {
  margin:
    0
    8px
    8px
    3px;

  font-size: clamp(22px, 1.8vw, 35px);

  color: #fff;
}

.brand-btm h2 {
  font-weight: 500;
  font-size: 35px;
}


@media (max-width: 1600px) {

  #sec02 {
    height: 880px;
  }

  .brand-side {
    width: 290px;
  }

  .brand-side-left {
    left: 35px;
  }

  .brand-side-right {
    right: 35px;
  }

  .brand-sales-content {
    width: calc(100% - 700px);
    padding-top: 140px;
  }

  .brand-sales-data {
    margin-top: 100px;
  }

}


@media (max-width: 1200px) {

  #sec02 {
    height: 800px;
    min-height: 0;
  }

  .brand-side {
    width: 220px;
  }

  .brand-side-left {
    left: 20px;
  }

  .brand-side-right {
    right: 20px;
  }

  .brand-side-set {
    gap: 18px;
    padding-bottom: 18px;
  }

  .brand-side-img {
    border-radius: 16px;
  }

  .brand-sales-content {
    width: calc(100% - 530px);
    max-width: 660px;

    padding-top: 115px;
  }

  .brand-sales-logo {
    margin-bottom: 40px;
  }

  .brand-sales-logo img {
    max-width: 155px;
  }

  .brand-sales-data {
    margin-top: 85px;
  }

  .brand-data-line {
    margin: 0 30px;
  }

}


@media (max-width: 768px) {

  #sec02 {
    height: 580px;
    min-height: 580px;
  }


  /*------------------------------------------
  중앙
  ------------------------------------------*/

  .brand-sales-content {
    z-index: 5;

    width: 100%;
    max-width: none;

    padding:
      85px
      30px
      0;
  }
  /* 서브문구 */
  .brand-sales-subtitle {
    margin-bottom: 20px;

    font-size: 20px;
  }

  .brand-btm h2 {
    font-size: 20px;
  }

  /* 메인카피 */
  .brand-sales-title {
    font-size: 40px;
    line-height: 1.42;
  }


  /*------------------------------------------
  매출정보
  ------------------------------------------*/

  .brand-sales-data {
    margin: 50px 0;
  }

  .brand-data-item p {
    margin-bottom: 14px;

    font-size: 15px;
  }

  .brand-data-line {
    min-height: 90px;

    margin: 0 18px;
  }

  .brand-data-value strong {
    font-size: 50px;
  }

  .brand-data-value span {
    margin-bottom: 5px;

    font-size: 23px;
  }


  /* 월매출 */
  .brand-data-sales strong {
    font-size: 39px;
  }

  .brand-data-sales .small-unit {
    margin:
      0
      3px
      5px
      2px;

    font-size: 16px;
  }
  .brand-side-track {
    display: none;
  }



}



/*=================================================================
SEC04 :: 월평균 매출 2억 1천
=================================================================*/

#sec04 {
  position: relative;
  overflow: hidden;
}


/* 상단 비디오 영역 */
.sales-hero {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.sales-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sales-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.68);
}


.sales-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 10%;
}

.sales-line {
  width: 1px;
  height: 250px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateY(-50%);
  background: #fff;
}

.sales-red-text {
  margin: 0 0 22px;
  color: var(--color-red);
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.05em;
}

.sales-title {
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.15;
  letter-spacing: -0.06em;
   font-family: 'Arita buri' !important;
  font-weight: 700;

}

.sales-title span {
  color: #f3de91;
    font-family: 'Arita buri' !important;
  font-weight: 700;

}

.sales-count-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 6px;
}

.sales-count {
  color: #fff;
  font-size: clamp(64px, 8.4vw, 135px);
  line-height: 1;
  letter-spacing: -0.5px;
  font-family: 'Arita buri' !important;
  font-weight: 700;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.sales-won {
  align-self: flex-end;
  margin-bottom: 18px;
  color: #fff;
  font-family: 'Arita buri' !important;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 50px);
}

.laurel {
  width: clamp(54px, 7vw, 110px);
  height: auto;
  opacity: 0.95;
}

.sales-note {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(14px, 1.5vw, 20px);
  letter-spacing: -0.04em;
}
  




.high_middle {
  padding: 70px 10%;
}

.notice {
  text-align: center;
  font-size: 1.2em;
  color: #fff;
}


/* 모바일 */
@media (max-width: 768px) {
  /* 하단 안내 문구 */
  .notice {
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.04em;
    word-break: keep-all;
  }

  /* 상단 비디오 영역 */
  .sales-hero {
    padding: 50px 0;
  }

  .sales-hero-content {
    width:100%;
    margin: 0 5%;
  }

  .sales-count-wrap {
    gap: 10px;
    padding: 0 5%;
    width: 100%;
  }

  .sales-title {font-size: 2.2em;}

  .sales-count {
    color: #fff;
    font-size: 3em;
    line-height: 1;
    letter-spacing: -0.5px;
    font-family: 'Arita buri' !important;
    font-weight: 700;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }

  .sales-won { font-size: 2em;}

  .laurel {
    width: auto;
    height: 80px;
    opacity: 1;
  }

  .sales-note {
    font-size: 0.8em;
  }

}

/*--------------------------------------------
지점별 최고매출 - 전표 무한 Swiper
----------------------------------------------*/

#top_high_wrap {
  width: 100%;
}

.high_bill {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 80px !important;
  overflow: hidden;
}



/* 일정한 속도로 계속 흐르게 */
.high_bill .swiper-wrapper {
  align-items: center;
}

/* 전표 하나 */
.high_bill .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  box-sizing: border-box;
}

/* 전표 이미지 */
.high_bill .swiper-slide img {
  display: block;
  width: 100%;
  max-width: 270px;
  height: auto;
  margin: 0 auto;
}


/*============================================
Tablet
============================================*/
@media (max-width: 1024px) {

  .high_bill {
    padding: 0 15px 60px;
  }

  .high_bill .swiper-slide img {
    max-width: 220px;
  }

}


/*============================================
Mobile
============================================*/
@media (max-width: 768px) {

  .high_bill {
    width: 100%;
    max-width: none;
    padding: 0 0 40px;
    overflow: hidden;
  }

  .high_bill .swiper-wrapper {
    align-items: center;
  }

  .high_bill .swiper-slide {
    height: auto;
  }

  .high_bill .swiper-slide img {
    width: 100%;
    max-width: none;
    height: auto;
  }

}

/*============================================
Small Mobile
============================================*/
@media (max-width: 480px) {

  .high_bill {
    padding-bottom: 30px !important;
  }

  .high_middle {
  padding: 40px 10% ;
}

}


/*=================================================================*
* SEC05 :: 대형 / 소형 매장 마진율
*=================================================================*/

#sec05 {
  clear: both;
  position: relative;

  width: 100%;

  padding: 150px 20px 110px;

  overflow: hidden;

  text-align: center;

  background: url("../img/sec05_bg.jpg") center / cover no-repeat;
}


#sec05 *,
#sec05 *::before,
#sec05 *::after {
  box-sizing: border-box;
}


/*=================================================================*
* 돈 장식
*=================================================================*/

#sec05 .money_1,
#sec05 .money_2 {
  position: absolute;

  top: 10%;

  z-index: 99;
}


#sec05 .money_1 {
  left: 0;
}


#sec05 .money_2 {
  right: 0;
}


#sec05 .money_1 img,
#sec05 .money_2 img {
  display: block;

  max-width: 100%;
  height: auto;
}


/*=================================================================*
* 전체 콘텐츠
*=================================================================*/

#sec05 .contents {
  position: relative;

  z-index: 10;

  width: 100%;
  max-width: 1280px;

  margin: 0 auto;
}


/*=================================================================*
* 타이틀
*=================================================================*/

#sec05 .title {
  width: 100%;

  margin: 0 auto 80px;

  text-align: center;
}


#sec05 .title img {
  display: block;

  width: auto;
  height: auto;

  margin: 0 auto;
}


/* 모바일 타이틀 */
#sec05 .m {
  display: none;
}


/*=================================================================*
* 대형 / 소형 영역 목록
*=================================================================*/

#sec05 .margin-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 100px;
}


/*=================================================================*
* 대형 / 소형 SWIPER 영역
*=================================================================*/

#sec05 .margin-slider {
  position: relative;

  width: 100%;

  /*
    상단 고정 프레임 공간
  */
  padding-top: clamp(50px, 4.5vw, 65px);
}


/*=================================================================*
* 상단 프레임
* frame_01 / frame_02 고정
*=================================================================*/

#sec05 .margin-frame-fixed {
  position: absolute;

  z-index: 30;

  top: 20px;
  left: 50%;

  width: min(47%, 450px);

  transform: translateX(-50%);

  pointer-events: none;
}


#sec05 .margin-frame-fixed img {
  display: block;

  width: 100%;
  height: auto;
}


/*=================================================================*
* SWIPER
*=================================================================*/

#sec05 .large-margin-swiper,
#sec05 .small-margin-swiper {
  position: relative;

  width: 100%;

  /*
    좌우 슬라이드는 가리되
    현재 슬라이드의 높이는 아래에서 auto 처리
  */
  overflow: hidden;
}


/*
중요
Swiper JS에서 autoHeight로 높이가 잘못 잡혀도
CSS 기준으로 실제 콘텐츠 높이를 사용
*/
#sec05 .large-margin-swiper .swiper-wrapper,
#sec05 .small-margin-swiper .swiper-wrapper {
  align-items: flex-start;

  height: auto !important;
}


#sec05 .large-margin-swiper .swiper-slide,
#sec05 .small-margin-swiper .swiper-slide {
  position: relative;

  width: 100%;

  height: auto !important;

  padding: 0;
}


/*=================================================================*
* 흰색 마진 박스
*=================================================================*/

#sec05 .margin-box {
  position: relative;

  width: 100%;

  /*
    ★ 중요
    height:100% 사용하지 않음
    차트 높이만큼 박스가 자연스럽게 늘어남
  */
  height: auto !important;

  min-height: 0;

  padding:
    clamp(65px, 5vw, 78px)
    60px
    36px;

  overflow: visible;

  border-radius: 14px;

  background-color: #fff;
}


/*=================================================================*
* 내부
* 왼쪽 손익표 + 오른쪽 차트
*=================================================================*/

#sec05 .margin-inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(380px, 0.92fr);

  align-items: center;

  gap: clamp(45px, 5vw, 70px);

  width: 100%;

  height: auto;

  overflow: visible;
}


/*=================================================================*
* 왼쪽 손익표
*=================================================================*/

#sec05 .margin-info {
  min-width: 0;

  width: 100%;

  text-align: left;
}


#sec05 .profit-table {
  width: 100%;
}


/*--------------------------------------------
일반 행
----------------------------------------------*/

#sec05 .profit-row {
  display: grid;

  grid-template-columns:
    135px
    minmax(160px, 1fr)
    90px;

  align-items: center;

  min-height: 50px;

  border-bottom: 1px solid #bbb;

  color: #222;

  font-size: 18px;

  line-height: 1.2;
}


#sec05 .profit-name {
  font-weight: 600;
}


#sec05 .profit-value {
  padding-right: 12px;

  text-align: center;
}


#sec05 .profit-percent {
  font-weight: 500;

  text-align: center;
}


/*=================================================================*
* 총 매출액
*=================================================================*/

#sec05 .sales-row {
  min-height: 62px;

  border-bottom: 2px solid #222;
}


#sec05 .sales-row .profit-name {
  align-self: end;

  padding-bottom: 12px;

  font-size: 18px;
  font-weight: 700;
}


#sec05 .profit-price {
  grid-column: 2 / 4;

  display: flex;

  align-items: baseline;
  justify-content: flex-end;

  gap: 7px;

  padding-bottom: 7px;

  white-space: nowrap;
}


#sec05 .profit-price strong {
  color: var(--color-red);

  font-family: "Arita buri" !important;

  font-size: clamp(38px, 3vw, 49px);
  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.04em;
}


#sec05 .profit-price span {
  color: #222;

  font-size: 20px;
  font-weight: 600;
}


/*=================================================================*
* 총 순이익
*=================================================================*/

#sec05 .profit-row.total-row {
  grid-template-columns:
    110px
    minmax(180px, 1fr)
    95px;

  min-height: 58px;

  margin-top: 0;

  padding: 0 15px;

  border-bottom: 0;

  color: #fff;

  background-color: var(--color-red);
}


#sec05 .total-row .profit-name {
  color: #f9e7a7;

  font-size: 20px;
  font-weight: 800;
}


#sec05 .total-row .profit-value {
  padding-right: 5px;

  color: #fff3b6;

  font-family: "Arita buri" !important;

  font-size: clamp(24px, 2vw, 31px);
  font-weight: 700;

  letter-spacing: -0.045em;

  text-align: center;
}


#sec05 .total-row .profit-percent {
  color: #fff3b6;

  font-family: "Arita buri" !important;

  font-size: 21px;
  font-weight: 700;

  text-align: center;
}


/*=================================================================*
* 안내문
*=================================================================*/

#sec05 .margin-notice {
  margin-top: 20px;

  color: #666;

  font-size: 14px;
  font-weight: 400;

  line-height: 1.45;

  letter-spacing: -0.035em;
}


#sec05 .margin-notice p {
  margin: 0;
}


/*=================================================================*
* 차트
*=================================================================*/

#sec05 .margin-chart {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  min-width: 0;

  width: 100%;

  height: auto;

  overflow: visible;
}


#sec05 .chart-wrap {
  position: relative;

  width: min(100%, 410px);

  margin: 0 auto;

  overflow: visible;
}


/* 원형 차트 */
#sec05 .chart-base {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: auto;
}


/* 높은 마진율 이미지 */
#sec05 .chart-margin {
  position: absolute;

  z-index: 2;

  top: -2%;
  right: -25px;

  width: 54%;
  height: auto;

  pointer-events: none;

  transform-origin: center center;
}


/*=================================================================*
* 다음 화살표
*=================================================================*/

#sec05 .margin-next {
  position: absolute;

  z-index: 40;

  top: 53%;
  right: -30px;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 64px;
  height: 64px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  color: #fff;

  background-color: var(--color-brown);

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}


#sec05 .margin-next span {
  display: block;

  margin-top: -6px;

  font-family: Arial, sans-serif;

  font-size: 52px;
  font-weight: 300;

  line-height: 1;
}


#sec05 .margin-next:hover {
  background-color: var(--color-red);

  transform:
    translateY(-50%)
    scale(1.08);
}


#sec05 .margin-next:active {
  transform:
    translateY(-50%)
    scale(0.94);
}


/*=================================================================*
* TABLET
*=================================================================*/

@media screen and (max-width: 1100px) {

  #sec05 {
    padding:
      120px
      35px
      90px;
  }


  #sec05 .contents {
    max-width: 940px;
  }


  /*--------------------------------------------
  타이틀
  ----------------------------------------------*/

  #sec05 .title {
    margin-bottom: 95px;
  }


  #sec05 .title img {
    width: min(90%, 760px);
  }


  /*--------------------------------------------
  돈
  ----------------------------------------------*/

  #sec05 .money_1,
  #sec05 .money_2 {
    top: 12%;
  }


  #sec05 .money_1 img,
  #sec05 .money_2 img {
    width: 160px;
  }


  /*--------------------------------------------
  Slider
  ----------------------------------------------*/

  #sec05 .margin-slider {
    padding-top: 55px;
  }


  #sec05 .margin-frame-fixed {
    width: min(52%, 400px);
  }


  /*--------------------------------------------
  박스
  ----------------------------------------------*/

  #sec05 .margin-box {
    padding:
      65px
      35px
      32px;
  }


  /*--------------------------------------------
  내부
  ----------------------------------------------*/

  #sec05 .margin-inner {
    grid-template-columns:
      minmax(0, 1fr)
      330px;

    gap: 35px;
  }


  /*--------------------------------------------
  표
  ----------------------------------------------*/

  #sec05 .profit-row {
    grid-template-columns:
      105px
      minmax(140px, 1fr)
      65px;

    min-height: 47px;

    font-size: 15px;
  }


  #sec05 .sales-row {
    min-height: 58px;
  }


  #sec05 .sales-row .profit-name {
    padding-bottom: 10px;

    font-size: 15px;
  }


  #sec05 .profit-price strong {
    font-size: 34px;
  }


  #sec05 .profit-price span {
    font-size: 15px;
  }


  /*--------------------------------------------
  총순이익
  ----------------------------------------------*/

  #sec05 .profit-row.total-row {
    grid-template-columns:
      90px
      minmax(150px, 1fr)
      68px;

    min-height: 54px;

    padding: 0 10px;
  }


  #sec05 .total-row .profit-name {
    font-size: 16px;
  }


  #sec05 .total-row .profit-value {
    font-size: 21px;
  }


  #sec05 .total-row .profit-percent {
    font-size: 17px;
  }


  /*--------------------------------------------
  차트
  ----------------------------------------------*/

  #sec05 .chart-wrap {
    width: min(100%, 330px);
  }


  #sec05 .chart-margin {
    right: 0;

    width: 54%;
  }


  /*--------------------------------------------
  화살표
  ----------------------------------------------*/

  #sec05 .margin-next {
    right: -20px;

    width: 56px;
    height: 56px;
  }


  #sec05 .margin-next span {
    font-size: 45px;
  }

}


/*=================================================================*
* MOBILE
*=================================================================*/

@media screen and (max-width: 768px) {

  #sec05 {
    padding:
      85px
      14px
      70px;

    background-position: center top;
  }


  /*================================================================
  PC / MOBILE 타이틀
  ================================================================*/

  #sec05 .pc {
    display: none !important;
  }


  #sec05 .m {
    display: block !important;
  }


  #sec05 .contents {
    width: 100%;
    max-width: none;
  }


  #sec05 .title {
    width: 100%;

    margin:
      0 auto
      75px;
  }


  #sec05 .title img {
    width: min(92%, 480px);
  }


  /*================================================================
  돈 장식
  ================================================================*/

  #sec05 .money_1,
  #sec05 .money_2 {
    top: 16%;

    opacity: 0.8;
  }


  #sec05 .money_1 {
    left: -20px;
  }


  #sec05 .money_2 {
    right: -20px;
  }


  #sec05 .money_1 img,
  #sec05 .money_2 img {
    width: 100px;
  }


  /*================================================================
  대형 / 소형 사이 간격
  ================================================================*/

  #sec05 .margin-list {
    gap: 90px;
  }


  /*================================================================
  Slider
  ================================================================*/

  #sec05 .margin-slider {
    padding-top: 48px;
  }


  #sec05 .margin-frame-fixed {
    width: min(84%, 350px);
  }


  /*
    ★ 핵심
    Swiper가 모바일 높이를 잘못 고정하지 못하게 처리
  */
  #sec05 .large-margin-swiper,
  #sec05 .small-margin-swiper {
    width: 100%;

    height: auto !important;
  }


  #sec05 .large-margin-swiper .swiper-wrapper,
  #sec05 .small-margin-swiper .swiper-wrapper {
    height: auto !important;

    align-items: flex-start;
  }


  #sec05 .large-margin-swiper .swiper-slide,
  #sec05 .small-margin-swiper .swiper-slide {
    height: auto !important;

    overflow: visible;
  }


  /*================================================================
  흰색 박스
  ================================================================*/

  #sec05 .margin-box {
    width: 100%;

    height: auto !important;

    min-height: 0 !important;

    padding:
      58px
      18px
      34px;

    overflow: visible;

    border-radius: 12px;
  }


  /*================================================================
  표 → 차트 세로 배치
  ================================================================*/

  #sec05 .margin-inner {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    width: 100%;

    height: auto !important;

    gap: 30px;

    overflow: visible;
  }


  #sec05 .margin-info {
    width: 100%;

    flex: none;
  }


  /*================================================================
  일반 손익 행
  ================================================================*/

  #sec05 .profit-row {
    grid-template-columns:
      88px
      minmax(0, 1fr)
      58px;

    min-height: 43px;

    font-size: 13px;

    letter-spacing: -0.04em;
  }


  #sec05 .profit-name,
  #sec05 .profit-value,
  #sec05 .profit-percent {
    white-space: nowrap;
  }


  #sec05 .profit-value {
    padding-right: 4px;
  }


  /*================================================================
  총 매출
  ================================================================*/

  #sec05 .sales-row {
    min-height: 60px;
  }


  #sec05 .sales-row .profit-name {
    padding-bottom: 10px;

    font-size: 13px;
  }


  #sec05 .profit-price {
    gap: 4px;

    padding-bottom: 8px;
  }


  #sec05 .profit-price strong {
    font-size: clamp(27px, 8vw, 38px);

    letter-spacing: -0.055em;
  }


  #sec05 .profit-price span {
    font-size: 12px;
  }


  /*================================================================
  총 순이익
  ================================================================*/

  #sec05 .profit-row.total-row {
    grid-template-columns:
      76px
      minmax(0, 1fr)
      62px;

    min-height: 52px;

    padding: 0 8px;
  }


  #sec05 .total-row .profit-name {
    font-size: 14px;
  }


  #sec05 .total-row .profit-value {
    padding: 0;

    font-size: clamp(18px, 5vw, 24px);

    white-space: nowrap;
  }


  #sec05 .total-row .profit-percent {
    font-size: 14px;

    white-space: nowrap;
  }


  /*================================================================
  안내문
  ================================================================*/

  #sec05 .margin-notice {
    margin-top: 15px;
    margin-bottom: 0;

    font-size: 11px;

    line-height: 1.5;

    letter-spacing: -0.045em;
  }


  #sec05 .margin-notice p {
    word-break: keep-all;
  }


  /*================================================================
  모바일 차트
  ★ 잘림 방지 핵심 부분
  ================================================================*/

  #sec05 .margin-chart {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: none;

    width: 100%;
    height: auto !important;

    /*
      heartbeat 확대까지 고려한 내부 공간
    */
    padding:
      18px
      32px
      24px;

    margin: 0;

    overflow: visible;
  }


  #sec05 .chart-wrap {
    position: relative;

    /*
      너무 크게 잡으면 swiper 좌우 경계에 닿기 때문에
      모바일에서는 한 단계 축소
    */
    width: min(76vw, 310px);

    max-width: 310px;

    margin: 0 auto;

    overflow: visible;
  }


  #sec05 .chart-base {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;
  }


  #sec05 .chart-margin {
    position: absolute;

    z-index: 2;

    /*
      모바일에서는 음수 위치 사용 금지
    */
    top: 0;
    right: 0;

    width: 50%;
    height: auto;

    pointer-events: none;

    transform-origin: center center;
  }


  /*================================================================
  화살표
  ================================================================*/

  #sec05 .margin-next {
    top: 47%;
    right: 3px;

    width: 46px;
    height: 46px;

    box-shadow:
      0 3px 8px
      rgba(0, 0, 0, 0.15);
  }


  #sec05 .margin-next span {
    margin-top: -4px;

    font-size: 38px;
  }


  #sec05 .margin-next:hover {
    background-color: var(--color-brown);

    transform: translateY(-50%);
  }


  #sec05 .margin-next:active {
    background-color: var(--color-red);

    transform:
      translateY(-50%)
      scale(0.92);
  }

}


/*=================================================================*
* SMALL MOBILE
*=================================================================*/

@media screen and (max-width: 420px) {

  #sec05 {
    padding:
      70px
      9px
      60px;
  }


  /*================================================================
  타이틀
  ================================================================*/

  #sec05 .title {
    margin-bottom: 35px;
  }


  #sec05 .title img {
    width: 80%;
  }


  /*================================================================
  돈
  ================================================================*/

  #sec05 .money_1 img,
  #sec05 .money_2 img {
    width: 80px;
  }


  #sec05 .money_1 {
    left: -25px;
  }


  #sec05 .money_2 {
    right: -25px;
  }


  /*================================================================
  Slider
  ================================================================*/

  #sec05 .margin-list {
    gap: 30px;
  }


  #sec05 .margin-slider {
    padding-top: 42px;
  }


  #sec05 .margin-frame-fixed {
    width: 90%;
  }


  /*================================================================
  흰 박스
  ================================================================*/

  #sec05 .margin-box {
    height: auto !important;

    min-height: 0 !important;

    padding:
      53px
      11px
      30px;

    border-radius: 10px;
  }


  /*================================================================
  내부
  ================================================================*/

  #sec05 .margin-inner {
    gap: 25px;

    height: auto !important;
  }


  /*================================================================
  표
  ================================================================*/

  #sec05 .profit-row {
    grid-template-columns:
      78px
      minmax(0, 1fr)
      50px;

    min-height: 40px;

    font-size: 11.5px;
  }


  /*================================================================
  총 매출
  ================================================================*/

  #sec05 .sales-row {
    min-height: 55px;
  }


  #sec05 .sales-row .profit-name {
    font-size: 11.5px;
  }


  #sec05 .profit-price strong {
    font-size: clamp(25px, 7.7vw, 30px);
  }


  #sec05 .profit-price span {
    font-size: 10px;
  }


  /*================================================================
  총 순이익
  ================================================================*/

  #sec05 .profit-row.total-row {
    grid-template-columns:
      66px
      minmax(0, 1fr)
      53px;

    min-height: 48px;

    padding: 0 5px;
  }


  #sec05 .total-row .profit-name {
    font-size: 12px;
  }


  #sec05 .total-row .profit-value {
    font-size: clamp(16px, 4.5vw, 19px);
  }


  #sec05 .total-row .profit-percent {
    font-size: 12px;
  }


  /*================================================================
  안내문
  ================================================================*/

  #sec05 .margin-notice {
    font-size: 10px;

    line-height: 1.55;
  }


  /*================================================================
  작은 모바일 차트
  ================================================================*/

  #sec05 .margin-chart {
    height: auto !important;

    padding:
      15px
      24px
      22px;

    overflow: visible;
  }


  #sec05 .chart-wrap {
    width: min(74vw, 270px);

    max-width: 270px;

    margin: 0 auto;

    overflow: visible;
  }


  #sec05 .chart-base {
    display: block;

    width: 100%;
    height: auto;
  }


  #sec05 .chart-margin {
    top: 0;
    right: 0;

    width: 50%;
  }


  /*================================================================
  화살표
  ================================================================*/

  #sec05 .margin-next {
    top: 45%;
    right: 2px;

    width: 40px;
    height: 40px;
  }


  #sec05 .margin-next span {
    font-size: 33px;
  }

}

/*============================================================
객단가 분석
============================================================*/

#atv-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 110px 0;
  background:url("../img/atv_bg.jpg")center center / cover no-repeat;
  color: #fff;
}


/* 전체 컨텐츠 */
#atv-section .atv-inner {
  position: relative;
  z-index: 2;
  width: min(90%, 1440px);
  margin: 0 auto;

  text-align: center;
}



.atv-title {
  width: 100%;
  margin: 0 auto 100px;
}

.atv-title img {
  display: block;

  width: min(100%, 650px);
  height: auto;

  margin: 0 auto;
}


/*============================================================
카드 + 스탬프 전체 영역
============================================================*/

.atv-slide-area {
  position: relative;
  width: 100%;
  max-width: 1110px;
  margin: 0 auto;
}


/*============================================================
PC 카드
============================================================*/

.atv-card-wrap {
  position: relative;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 58px;

  width: 100%;
  margin: 0 auto;
}

.atv-card {
  position: relative;
  width: 100%;
}

.atv-card img {
  display: block;
  width: 100%;
  height: auto;
}


/*============================================================
스탬프
카드와 별개로 중앙 고정
============================================================*/

.atv-stamp {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 20;

  width: min(48%, 500px);

  transform: translate(-50%, -50%);

  /* 스와이프 동작 방해하지 않도록 */
  pointer-events: none;
}

.atv-stamp img {
  display: block;
  width: 100%;
  height: auto;
}



/*============================================================
하단 설명
============================================================*/

.atv-desc {
  margin-top: 100px;
}

.atv-desc p {
  margin: 0;

  font-size: clamp(21px, 1.7vw, 30px);
  font-weight: 500;

  line-height: 1.4;

  letter-spacing: -0.5px;

  color: #fff;

  word-break: keep-all;
}

.atv-desc strong {
  color: var(--color-yellow2);

  font-weight: 700;
}


/*============================================================
1200px 이하
============================================================*/

@media (max-width: 1200px) {

  #atv-section {
    padding: 90px 0;
  }

  #atv-section .atv-inner {
    width: 92%;
  }


  .atv-title {
    margin-bottom: 65px;
  }


  .atv-card-wrap {
    gap: 35px;
  }


  .atv-stamp {
    width: 46%;
  }


  .atv-desc {
    margin-top: 70px;
  }

}


/*============================================================
태블릿
============================================================*/

@media (max-width: 900px) {

  #atv-section {
    padding: 80px 0;
  }


  .atv-title {
    margin-bottom: 55px;
  }


  .atv-card-wrap {
    gap: 22px;
  }


  .atv-stamp {
    width: 50%;

    top: 45%;
  }


  .atv-desc {
    margin-top: 60px;
  }

  .atv-desc p {
    font-size: 20px;
  }

}

/*============================================================
모바일
============================================================*/

@media (max-width: 768px) {
  .atv-title img {
    width:85%;
    height: auto;
  }

  .atv-slide-area {
    position: relative;

    width: 100%;
    max-width: none;

    overflow: visible;
  }


  /*------------------------------------------
  실제 좌우로 움직이는 부분
  ------------------------------------------*/

  .atv-card-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    max-width: none;

    gap: 14px;

    margin: 0;
    padding: 0 11%;

    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .atv-card-wrap::-webkit-scrollbar {
    display: none;
  }


  /*------------------------------------------
  카드
  가운데 1장 + 좌우 일부 노출
  ------------------------------------------*/

  .atv-card {
    flex: 0 0 78%;

    width: 78%;

    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .atv-card img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
  }


  /*------------------------------------------
  스탬프

  atv-card-wrap 밖에 있기 때문에
  카드가 움직여도 항상 중앙 유지
  ------------------------------------------*/

  .atv-stamp {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 20;

    width: 75%;
    max-width: 330px;

    transform: translate(-50%, -50%);

    pointer-events: none;
  }

  /*------------------------------------------
  하단 설명
  ------------------------------------------*/

  .atv-desc {
    margin-top: 50px;
    padding: 0 7%;
  }

  .atv-desc p {
    margin: 0;

    font-size: 18px;
    line-height: 1.75;
    letter-spacing: -0.045em;

    word-break: keep-all;
  }

}




/*=================================================================
SEC06 :: 업종변경 최적화 브랜드
=================================================================*/

#sec06 {
  position: relative;
  clear: both;
  padding: 100px 0;
  background: url("../img/beige_bg.jpg") no-repeat center top / cover;
  overflow: hidden;
  text-align: center;
}

#sec06 .contents {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
}


/*------------------------------------------------------------
상단 타이틀
------------------------------------------------------------*/

.sec06-title img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}


/*------------------------------------------------------------
중간 강조 문구
------------------------------------------------------------*/

.sec06-copy {
  padding: 70px 0;
}

.sec06-copy img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}


/*------------------------------------------------------------
업종변경 매장사진
------------------------------------------------------------*/

.sec06_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 1400px;
  max-width: calc(100% - 40px);

  margin: 0 auto;
  padding: 20px 0;
}

.sec06_wrap > div {
  position: relative;
}

.sec06_wrap > div:not(.arrow) {
  flex: 0 1 auto;
}

.sec06_wrap > div:not(.arrow) img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* 화살표 */
.sec06_wrap .arrow {
  position: relative;
  z-index: -1;

  flex: 0 0 auto;

  margin-left: -150px;
}

.sec06_wrap .arrow img {
  display: block;
  width: auto;
  height: auto;
}


/*=================================================================
모바일
=================================================================*/

@media (max-width: 768px) {

  #sec06 {
    padding: 70px 0 80px;
    background-position: center top;
  }

  #sec06 .contents {
    width: 100%;
    margin: 0 auto;
    padding: 0 5%;
    box-sizing: border-box;
  }


  /*----------------------------------------------------------
  상단 타이틀
  ----------------------------------------------------------*/

  .sec06-title {
    width: 100%;
  }

  .sec06-title img {
    width: 90%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
  }


  /*----------------------------------------------------------
  중간 강조문구
  ----------------------------------------------------------*/

  .sec06-copy {
    margin: 0;
    padding: 45px 0 40px;
  }

  .sec06-copy img {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
  }


  /*----------------------------------------------------------
  업종변경 이미지

  PC
  [기존매장] → [변경매장]

  모바일
  [기존매장]
       ↓
  [변경매장]
  ----------------------------------------------------------*/

  .sec06_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 500px;

    margin: 0 auto;
    padding: 20px 0 45px;
  }


  /* 매장 이미지 */
  .sec06_wrap > div:not(.arrow) {
    width: 100%;
  }

  .sec06_wrap > div:not(.arrow) img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }


  /* 화살표 */
  .sec06_wrap .arrow {
    z-index: -1;

    width: auto;
    margin: -20px auto 50px;
  }

  .sec06_wrap .arrow img {
    display: block;
    max-width: none;
    height: auto;
    width: 200px;
    margin: 0 auto;
    transform: rotate(90deg);
  }


  /* 두 번째 줄 마지막 여백 제거 */
  .sec06_wrap:last-child {
    padding-bottom: 0;
  }

}



/*=================================================================
SEC07 :: 점주 인터뷰
=================================================================*/

#sec07 {
  clear: both;
  background: url(../img/sec07_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 150px 0 ;
  position: relative;
  text-align: center;
  overflow: visible !important;
}


.over_zzim,
.over_smoke {
  position: absolute;
  right: 0;
}

.over_zzim {
  top: -200px;
  z-index: 90;
}

.over_smoke {
  z-index: 99;
  top: -600px;
  width: 500px;
  overflow: hidden;
}



.interview_wrap {
  position: relative;
  width: 100%;
  padding-top: 150px !important;
  overflow: hidden;
}

/* swiper wrapper */
.interview_wrap .swiper-wrapper {
  align-items: stretch;
}

/* 카드 */
.interview {
  height: auto;
  text-align: center;
  box-sizing: border-box;
}

.interview img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.interview span {
  background: var(--color-red);
  border-radius: 50px;
  font-size: 0.7em;
  color: #fff;
  padding: 5px 20px;
  margin-right: 15px;
}

.interview h2 {
  font-size: 1.5em;
  padding: 20px 0;
  line-height: 1.35;
  word-break: keep-all;
}

.interview p {
  color: #333;
  font-size: 1.1em;
  line-height: 1.5;
  padding-bottom: 30px;
  word-break: keep-all;
}

.interview a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red);
  text-decoration: none;
  padding: 10px 30px;
  border-radius: 100px;
  border: none;
  color: #fff;
  font-size: 1.3em;
  cursor: pointer;
  font-family: 'sandoll-kwangya', sans-serif;
}



/*--------------------------------------------
점주 인터뷰 팝업
----------------------------------------------*/

.interview_pop {
  width: min(920px, 92vw);
  max-height: 86vh;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fffaf2;
  font-family: "Pretendard", sans-serif;
  text-align: left;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

/* 상단 헤더 */
.interview-pop-head {
  position: relative;
  padding: 44px 50px 38px;
  background:
    linear-gradient(135deg, rgba(65, 34, 16, 0.94), rgba(105, 46, 24, 0.94)),
    url("../img/beige_bg.jpg") no-repeat center / cover;
  color: #fff;
  text-align: center;
}

.interview-pop-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -25px;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: #d7b45f;
  transform: translateX(-50%);
}

.interview-pop-head p {
  margin: 0 0 14px;
  color: #ffe8a3;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.interview-pop-head h2 {
  margin: 0;
  color: #fff;
  font-size: 2.5em;
  font-family: 'Arita buri' !important;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.06em;
  word-break: keep-all;
}


/* 본문 스크롤 영역 */
.interview-pop-body {
  max-height: calc(86vh - 170px);
  padding: 48px 54px 54px;
  overflow-y: auto;
  background:
    radial-gradient(circle at top left, rgba(215, 180, 95, 0.16), transparent 32%),
    #fffaf2;
}

/* 스크롤바 */
.interview-pop-body::-webkit-scrollbar {
  width: 8px;
}

.interview-pop-body::-webkit-scrollbar-track {
  background: #eadfce;
}

.interview-pop-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #7b4a2d;
}

/* Q/A 박스 */
.qa-box {
  position: relative;
  padding: 30px 32px 32px;
  margin-bottom: 24px;
  border: 1px solid rgba(89, 51, 30, 0.16);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(85, 46, 22, 0.08);
}

.qa-box:last-child {
  margin-bottom: 0;
}

.qa-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  width: 5px;
  height: 42px;
  border-radius: 0 999px 999px 0;
  background: #c71818;
}

/* 질문 */
.qa-box h3 {
  margin: 0 0 18px;
  padding-left: 4px;
  color: #412210;
  font-family: 'sandoll-kwangya', sans-serif;
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.04em;
  word-break: break-all
}

/* 답변 */
.qa-box p {
  margin: 0;
  color: #3d3029;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.5;
  text-align: justify;
  letter-spacing: -0.035em;
  word-break:break-all;
}

/* 팝업 닫기 버튼 커스텀 */
.interview_pop .mfp-close {
  color: #fff !important;
  opacity: 1;
  font-size: 42px;
  top: 8px;
  right: 12px;
}

/* 모바일 */
@media (max-width: 768px) {
  .interview_pop {
    width: 92vw;
    max-height: 84vh;
    border-radius: 18px;
  }

  .interview-pop-head {
    padding: 36px 24px 30px;
  }

  .interview-pop-head p {
    margin-bottom: 10px;
    font-size: 15px;
  }

  .interview-pop-head h2 {
    font-size: 25px;
  }

  .interview-pop-body {
    max-height: calc(84vh - 145px);
    padding: 34px 20px 34px;
  }

  .qa-box {
    padding: 24px 20px 24px;
    margin-bottom: 18px;
    border-radius: 16px;
  }

  .qa-box::before {
    top: 24px;
    height: 34px;
  }

  .qa-box h3 {
    margin-bottom: 14px;
    font-size: 22px;
    line-height: 1.35;
  }

  .qa-box p {
    font-size: 15px;
    line-height: 1.75;
  }
}

/* 작은 모바일 */
@media (max-width: 480px) {
  .interview-pop-head {
    padding: 32px 20px 28px;
  }

  .interview-pop-head h2 {
    font-size: 22px;
  }

  .qa-box h3 {
    font-size: 20px;
  }

  .qa-box p {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  #sec07 {
    padding: 100px 0 60px 0;
  }

  .interview_wrap {
    padding-top: 50px !important;
    overflow: hidden;
  }

  .interview {
    width: 100%;
    padding: 20px 0;
  }

  .interview img {
    max-width: 86%;
  }

  .interview h2 {
    font-size: 1.35em;
    line-height: 1;
    padding: 18px 10px;
  }

  .interview h2 span {
    display: block;
    margin: 0 auto 20px auto;
    width: 100px;
  }

  .interview p {
    font-size: 0.95em;
    padding: 0 16px 26px;
  }

  .interview p br {
    display: none;
  }

  .interview a {
    font-size: 1.1em;
    padding: 10px 26px;
  }

}



/*=================================================================
SEC08 :: 3분 조리시간
=================================================================*/

#sec08 {
  clear: both;
  background: url(../img/hanji_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px ;
  position: relative;
  overflow: hidden;
}

.card {
  display: flex;
  justify-content: space-between;
  z-index: 99;
  padding: 100px 0;
}

.masked-video {
  position: absolute;
  top: -150px;
  right: 50px;
  width: 900px;
  z-index: 1;
  aspect-ratio: 1 / 1;
}

.masked-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;

  -webkit-mask-image: url("../img/mask.png");
  mask-image: url("../img/mask.png");

  -webkit-mask-size: contain;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;
}



/* 모바일 */
@media (max-width: 768px) {

  #sec08 {
    padding-top: 150px ;
    padding-bottom: 60px;
  }

  #sec08 .contents .title {
    position: relative;
    z-index: 999;
    width: 80%;
    padding: 20px 0 40px 0;
  }


  .card {
    display:none;
  }

  .masked-video {
    top: -100px;
    right: -80px;
    width: 300px;
    z-index: 1;
  }


}

/*--------------------------------------------
Vimeo 조리 영상 영역
----------------------------------------------*/

.cook_wrap {
  position: relative;
  clear: both;
  width: 100%;
  padding: 0 30px 150px;
  box-sizing: border-box;
}

.cook_wrap .c_title {
  padding-bottom: 100px;
  text-align: center;
}

.cook_wrap .c_title img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}


/* 영상 2개 전체 영역 */
.cook-video-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;

  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}


/* 개별 영상과 텍스트 */
.cook-video-item {
  width: 100%;
  min-width: 0;
}


/* 16:9 영상 영역 */
.cook-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 5px solid var(--color-lightbrown);
  overflow: hidden;
  background: #000;
}


/* Vimeo iframe */
.cook-screen iframe {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  border: 0;
}


/* 영상 하단 제목 */
.cook-video-text {
  margin-top: 25px;
  text-align: center;
  font-family: 'Arita buri' !important;
  font-weight: 800;
  font-size: 35px;
  line-height: 1.4;
  color:var(--color-brown);
}

.cook-video-text span {
  font-family: 'Arita buri' !important;
  font-weight: 800;
  color: var(--color-red);
}


/*태블릿*/

@media screen and (max-width: 1024px) {

  .cook_wrap {
    padding-right: 25px;
    padding-bottom: 100px;
    padding-left: 25px;
  }

  .cook_wrap .c_title {
    padding: 30px 0 40px 0;
  }

  .cook_wrap .c_title img {
    width: 75%;
    margin: 0 auto; 
    text-align: center;
  }

  .cook-video-list {
    gap: 25px;
  }

  .cook-video-text {
    margin-top: 20px;
    font-size: 22px;
  }

}


/*모바일*/

@media screen and (max-width: 768px) {

  .cook_wrap {
    padding-right: 20px;
    padding-bottom: 60px;
    padding-left: 20px;
  }

  .cook_wrap .title {
    width: 100%;
    padding-bottom: 30px;
  }

  .cook_wrap .title img {
    width: 100%;
  }

  /* 모바일에서는 영상 위아래 배치 */
  .cook-video-list {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .cook-video-text {
    margin-top: 15px;
    font-size: 25px;
  }

}




/*=================================================================
SEC09 :: 간편한 원팩수산물&소스
=================================================================*/
#sec09 {
  clear: both;
  position: relative;
  overflow: hidden;
  padding: 100px 0 110px;

  background-image: url("../img/sec09_bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  text-align: center;
}

/* 콘텐츠 전체 폭 */
#sec09 .contents {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}


/* 이미지 공통 */
#sec09 img {
  display: block;
  height: auto;
}

/*--------------------------------------------
상단 타이틀
----------------------------------------------*/
#sec09 .sec09-title01 {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

#sec09 .sec09-title01 img {
  width: 100%;
}

/*--------------------------------------------
빠른 3분 조리 / 인건비 DOWN
좌우 이미지 수평 정렬
----------------------------------------------*/
#sec09 .sec09-benefit-wrap {
  display: flex;
  align-items: center; /* 기존 flex-start에서 변경 */
  justify-content: center;

  width: 100%;
  max-width: 1080px;
  margin: 70px auto 0;

  gap: clamp(35px, 6vw, 90px);
}

#sec09 .sec09-benefit {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sec09 .sec09-benefit img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}


/*--------------------------------------------
해산물 공정 이미지
PC: 3개씩 2줄
----------------------------------------------*/
#sec09 .sec09-process {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  width: calc(100% - 40px);
  max-width: 1440px;
  margin: 75px auto 0;

  gap: 18px;
  position: relative;
}

#sec09 .sec09-process-item {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#sec09 .sec09-process-item img {
  display: block;
  width: 100%;
  height: auto;
}


/* HACCP 위치 기준 */
#sec09 .haccp-mark {
  position: absolute;
  z-index: 10;
  display: block;
  pointer-events: none;
}

/* HACCP 이미지 */
#sec09 .haccp-mark .haccp {
  display: block;
  width: 100%;
  height: auto;
}

#sec09 .haccp-mark-pc {
  top: 7%;
  right: 5%;

  width: clamp(100px, 10vw, 155px);
}

/* 모바일용은 PC에서 숨김 */
#sec09 .haccp-mark-m {
  display: none;
}


/*--------------------------------------------
모바일
2개씩 3줄
----------------------------------------------*/
@media screen and (max-width: 768px) {


  #sec09 .sec09-title01 img {
    width: 90%;
    margin: 0 auto;
  }  
  #sec09 .sec09-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;
    max-width: none;
    margin-top: 45px;

    gap: 10px;
  }

}


/* 작은 모바일 */
@media screen and (max-width: 420px) {

  #sec09 .sec09-process {
    margin-top: 36px;
    gap: 7px;
  }

}

/*--------------------------------------------
하단 설명 타이틀
----------------------------------------------*/
#sec09 .sec09-title02 {
  width: 100%;
  max-width: 760px;
  margin: 60px auto 0;
}

#sec09 .sec09-title02 img {
  width: 100%;
}


/*--------------------------------------------
태블릿 반응형
----------------------------------------------*/
@media screen and (max-width: 1024px) {

  #sec09 .haccp-mark-pc {
    top: 6%;
    right: 5%;

    width: clamp(90px, 12vw, 125px);
  }

  #sec09 {
    padding: 80px 0 90px;
  }

  #sec09 .contents {
    width: calc(100% - 50px);
  }

  #sec09 .sec09-title01 {
    max-width: 850px;
  }

  #sec09 .sec09-benefit-wrap {
    max-width: 820px;
    margin-top: 55px;
    gap: 35px;
  }

  #sec09 .sec09-title02 {
    max-width: 680px;
    margin-top: 50px;
  }


  #sec09 .sec09-title02 img {
    width: 90%;
    margin: 0 auto;
  }

}


/*--------------------------------------------
모바일 반응형
----------------------------------------------*/
@media screen and (max-width: 768px) {
  /* PC 3번 HACCP 숨김 */
  #sec09 .haccp-mark-pc {
    display: none;
  }

  /* 모바일 2번 HACCP 노출 */
  #sec09 .haccp-mark-m {
    top: 6%;
    right: 5%;

    display: block;

    width: clamp(75px, 22vw, 115px);
  }
  
  #sec09 {
    padding: 55px 0 65px;
    background-position: center top;
  }

  #sec09 .contents {
    width: calc(100% - 30px);
  }

  /* 상단 타이틀 */
  #sec09 .sec09-title01 {
    width: 100%;
    max-width: 560px;
  }

  #sec09 .sec09-left img,
  #sec09 .sec09-right img {
    top: 0;
  }
  

  /* 좌우 콘텐츠를 세로로 배치 */
  #sec09 .sec09-benefit-wrap {
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 440px;
    margin-top: 40px;

    gap: 28px;
  }

  #sec09 .sec09-benefit {
    flex: none;
    width: 100%;
  }

  /* 하단 문구 */
  #sec09 .sec09-title02 {
    width: 100%;
    max-width: 560px;
    margin-top: 40px;
  }

}


/*--------------------------------------------
작은 모바일
----------------------------------------------*/
@media screen and (max-width: 420px) {
  #sec09 .haccp-mark-m {
    top: 5%;
    right: 4%;

    width: clamp(65px, 21vw, 90px);
  }
  #sec09 {
    padding: 45px 0 55px;
  }

  #sec09 .contents {
    width: calc(100% - 24px);
  }

  #sec09 .sec09-benefit-wrap {
    margin-top: 32px;
    gap: 22px;
  }

  #sec09 .sec09-title02 {
    margin-top: 34px;
  }

}





/*=================================================================
SEC10 :: 창업경쟁력
=================================================================*/
#sec10 {
  clear: both;
  background: url(../img/beige_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0 ;
  position: relative;
  overflow: hidden;
}

.overlay {
  position: absolute;
  right: -200px;
  top: -200px;
}

#sec10 .title {
  padding-bottom: 80px;
  margin-left: 12%;
}

#sec10 .title img {
  display: block;
  padding-bottom: 50px;
}

.sec10-swiper {
  width: 100%;
  z-index: 5;
  overflow: hidden;
  margin-left: 12%;
}


.sec10-swiper .swiper-wrapper {
  align-items: stretch;
}

.sec10-swiper .swiper-slide p {
  padding-top: 20px;
  color: var(--color-brown);
  font-size: 1.1em;
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
}



/* PC에서는 3개 카드가 한 화면에 보이게 */
@media (min-width: 1025px) {
  .sec10-swiper .swiper-slide {
    padding: 38px 30px 44px;
  }
}


/* 태블릿 */
@media (max-width: 1024px) {
  .sec10-swiper {
    padding: 36px 20px 66px;
  }
}

/* 모바일 */
@media (max-width: 768px) {
  #sec10 {
    padding: 80px 0 50px 0 ;
  }

  .overlay {
    right: -180px;
    top: -220px;
  }

  .overlay img {width: 70%;}

  #sec10 .title {
    margin:0 10%;
    padding-top: 180px;
    padding-bottom: 0;
  }

  #sec10 .title img {
    display: block;
    padding-bottom: 30px;
  }

  .sec10-swiper {
    margin: 0 !important;
  }

  .sec10-swiper .swiper-slide {
    padding: 0 5%;
    border-radius: 22px;
  }

  .sec10-swiper .swiper-slide img {
    max-width: 100%;
    margin-bottom:0;
  }
  .sec10-swiper .swiper-slide h2 {
    font-size: 1.8em;
    line-height: 1.5;
    padding: 20px 0;
  }

  .sec10-swiper .swiper-slide p br {
    display: none;
  }
}





/*--------------------------------------------
9:16 Vimeo
----------------------------------------------*/
.video-box {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;

  overflow: hidden;

  border: 5px solid #000;
  border-radius: 18px;

  background: #000;
}


/* iframe */
.video-box iframe {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  border: 0;
}



/*=================================================================
SEC12 :: 1차부터 2차까지 커버
=================================================================*/
.sec12_wrap {
  position: relative;
  display: flex;
  width: 100vw;
  max-width: 1920px;
  height: 100vh;
  max-height: 900px;
  margin: 0 auto;
  background-color: #000;
  overflow: hidden;
}
/* 가운데 상단 PNG 이미지 배지 */
.center-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 100%;
  max-width: 400px; /* 이미지 원본 크기에 맞게 조절 가능 */
  pointer-events: none; /* 마우스 이벤트 방해 방지 */
}

/* 좌우 공통 섹션 스타일 */
.section {
  flex: 0 0 50%;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
}

/* 왼쪽 영역 배경 */
.left-section {
  background-image: url('../img/sec12_bg_left.jpg');
}

/* 오른쪽 영역 배경 */
.right-section {
  background-image: url('../img/sec12_bg_right.jpg');
}

/* 텍스트 컨테이너 */
.text-box {
  position: absolute;
  bottom: 12%;
  left: 10%;
  width: 80%;
  color: #fff;
  background: rgba(0, 0, 0,0.6);
  padding: 30px;
  border-radius: 15px;
  border: 2px solid var(--color-lightbrown);
}

/* 텍스트 타이포그래피 */
.text-box img {
  width:auto;
  height: 80px;
}


.text-box p {
  padding-top: 20px;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.4;
  color: #ddd;
}


@media (max-width: 768px) {
  .sec12_wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: hidden;
  }

  /* 가운데 상단 배지 */
  .center-badge {
    top: 0;
    width: 78%;
    max-width: 300px;
    z-index: 20;
  }

  /* 좌우 섹션을 상하 섹션으로 변경 */
  .section {
    flex: none;
    width: 100%;
    height: 520px;
    min-height: 520px;
    opacity: 1;
    background-size: cover;
    background-position: center center;
  }


  .left-section {
    background-position: center center;
  }

  .right-section {
    background-position: center center;
  }

  /* 텍스트 */
  .text-box {
    position: absolute;
    left: 50%;
    bottom: 35px;
    z-index: 2;
    width: calc(100% - 36px);
    transform: translateX(-50%) !important;
    text-align:left;
    color: #fff;
  }

  .text-box img {
    height: 60px;
  }

  .text-box p {
    font-size: 15px;
    line-height: 1.6;
    color: #f1f1f1;
    word-break: keep-all;
  }
}




/*=================================================================
SEC13 :: 2층매장 구월점
=================================================================*/
#sec13 {
  clear: both;
  background: url(../img/sec13_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0 ;
  position: relative;
  text-align: center;
}

#sec13 .title img {margin: 0 auto;}
/*--------------------------------------------
구월점 매장 무한 슬라이드
----------------------------------------------*/
.guwol-marquee {
  padding-top: 70px;
  --gap: 24px;

  position: relative;

  width:100%;
  margin: 0 auto;

  overflow: hidden;
}


/* 실제로 계속 움직이는 영역 */
.guwol-track {
  display: flex;

  width: max-content;

  animation: guwol-marquee 35s linear infinite;

  will-change: transform;
}


/* 동일 이미지 한 세트 */
.guwol-group {
  display: flex;
  flex-shrink: 0;

  gap: var(--gap);

  /*
    첫 세트 마지막 이미지와
    두 번째 세트 첫 이미지 사이 간격
  */
  padding-right: var(--gap);
}


/* 개별 이미지 */
.guwol-item {
  flex: 0 0 var(--slide-width);
  width: var(--slide-width);

  overflow: hidden;
}


/* 이미지 */
.guwol-item img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;
}


/*--------------------------------------------
무한 이동
----------------------------------------------*/
@keyframes guwol-marquee {

  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }

}


/*--------------------------------------------
태블릿 - 약 2개
----------------------------------------------*/
@media screen and (max-width: 1024px) {

  .guwol-marquee {
    --gap: 18px;

    --slide-width: calc(
      (calc(100vw - 50px) - var(--gap)) / 2
    );

  }

  .guwol-track {
    animation-duration: 32s;
  }

}


/*--------------------------------------------
모바일 - 약 1.3개 노출
----------------------------------------------*/
@media screen and (max-width: 767px) {

  .guwol-marquee {
    padding-top: 50px;
    --gap: 14px;

    /*
      화면에 1개 + 다음 이미지 일부가 보이는 크기
    */
    --slide-width: calc(
      (100vw - 30px) / 1.3
    );

  }

  .guwol-track {
    animation-duration: 27s;
  }

}


/*--------------------------------------------
작은 모바일
----------------------------------------------*/
@media screen and (max-width: 420px) {

  .guwol-marquee {
    --gap: 10px;
    padding-top: 50px;

    --slide-width: calc(
      (100vw - 24px) / 1.25
    );

  }

  .guwol-track {
    animation-duration: 25s;
  }

}


/* 모바일 반응형 (768px 이하 화면) */
@media screen and (max-width: 768px) {
  #sec13 {
    padding: 60px 0 ;
  }

  #sec13 .title{padding: 0 10%;}

}





/*=================================================================
SEC14 :: 리뷰
=================================================================*/
#sec14 {
  clear: both;
  background: url(../img/sec14_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
  position: relative;
  text-align: center;
}

#sec14 .title {
  width: 100%; 
  padding: 0 10%;
  text-align: center; 
  margin: 0 auto;
}
  #sec14 .title img {
    width: auto;
    margin: 0 auto;
  }

.qtd_review {
  padding: 100px 5% 30px 5%;
}

.review_over {
  position: absolute;
  z-index: 2;
}

.review_over.over_1 {
  top: 55%;
  right: 5%;
}

.review_over.over_2 {
  bottom: 40px;
  left: 5%;
}

.review_over.over_3 {
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}


.review-swiper {
  width: 100%;
  margin: 0 auto;
  padding: 100px 0 !important;
  overflow: hidden;
}

.review-swiper .swiper-wrapper {
  align-items: center;
  transition-timing-function: linear !important;
}

.review-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}




.review-swiper .swiper-slide img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  user-select: none;
  pointer-events: none;
}


/* 모바일 */
@media (max-width: 768px) {
  #sec14 {
    padding-top: 80px;
  }

  .qtd_review {
    padding: 50px 5% 30px 5%;
  }

  #sec14 .title {padding:0 5%; text-align: center; margin: 0 auto;}
  #sec14 .title img {width: 100%}


  .review_over.over_1 {
    top: 50%;
    z-index: 3;
  }

  .review_over.over_1 img,
  .review_over.over_2 img {width: 200px;}

  .review_over.over_2 {
    bottom: 10px;
    z-index: 3;
  }

  .review_over.over_3 {
    z-index: 2;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
  }


  .review-swiper {
    padding: 30px 0 50px 0 !important;
  }

  .review-swiper .swiper-slide img {
    max-width: 200px;
  }
}
/*--------------------------------------------
모바일
----------------------------------------------*/
@media screen and (max-width: 768px) {

  .video-box {
    border-width: 4px;
    border-radius: 15px;
  }

}


/*--------------------------------------------
작은 모바일
----------------------------------------------*/
@media screen and (max-width: 400px) {

  .video-box {
    border-width: 3px;
    border-radius: 12px;
  }


}


/*============================================================
하단 방송출연 부분
============================================================*/

.sbs_wrap {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0 10%;
  padding-top: 100px;
}


/* 좌 / 우 영역 */
.sbs_left,
.sbs_right {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 20px;
}

.sbs_left {
  margin-right: 10%;
}


/* 이미지 */
.sbs_left > img,
.sbs_right > img {
  display: block;
  width: 150px;
  height: auto;
  flex-shrink: 0;
}


/* 텍스트 영역 */
.sbs_txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* 타이틀 */
.sbs_txt h2 {
  display: inline-block;

  width: fit-content;
  max-width: 100%;

  margin: 0;

  padding: 6px 12px;

  color: var(--color-yellow2);
  background-color: rgba(0, 0, 0, 0.5);

  border: 1px solid var(--color-yellow2);

  font-size: 1.7em;
  font-family: 'Arita buri' !important;

  text-align: left;

  white-space: nowrap;
}


/* 설명 */
.sbs_txt p {
  margin: 0;
  padding-top: 15px;

  font-size: 1.6em;
  line-height: 1.4;

  color: #fff;

  text-align: left;
  word-break: keep-all;
}


/*============================================================
태블릿
============================================================*/

@media (max-width: 1024px) {

  .sbs_wrap {
    margin: 0 5%;
    gap: 50px;
  }

  .sbs_left {
    margin-right: 0;
  }

  .sbs_left > img,
  .sbs_right > img {
    width: 110px;
  }

  .sbs_txt h2 {
    font-size: 1.25em;
  }

  .sbs_txt p {
    font-size: 1.2em;
  }

}


/*============================================================
모바일
============================================================*/
@media (max-width: 768px) {

  .sbs_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    margin: 0;
    padding: 70px 6% 0;

    box-sizing: border-box;
    gap: 50px;
  }


  /* 각 영역 세로 정렬 */
  .sbs_left,
  .sbs_right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin: 0;

    gap: 20px;

    text-align: center;
  }


  /* 이미지 위쪽 */
  .sbs_left > img,
  .sbs_right > img {
    display: block;

    width: 95px;
    height: auto;

    margin: 0 auto;
  }


  /* 텍스트 영역 */
  .sbs_txt {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    text-align: center;
  }


  /* 타이틀 */
  .sbs_txt h2 {
    display: inline-block;

    width: fit-content;

    margin: 0 auto;
    padding: 5px 10px;

    font-size: 1.4em;

    text-align: center;
    white-space: nowrap;
  }


  /* 설명 */
  .sbs_txt p {
    margin: 0;
    padding-top: 12px;

    font-size: 1.2em;
    line-height: 1.65;

    text-align: center;
    word-break: keep-all;
  }

}




/*=================================================================
SEC15 :: 메뉴소개
=================================================================*/
#sec15 {
  clear: both;
  background: url(../img/beige_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0 ;
  position: relative;
  text-align: center;
}

#sec15 .title img {
  margin: 0 auto;
  max-width: 950px;
}
/* 카테고리 디자인 */

.menu {
  margin: 0 12%;
  padding-top: 100px;
}

.tabs {
	padding-top:50px;
}

.tab { display:none;}

.tab.active {display:block;}

.menu_cate {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.cate {
  width: 100%;
  font-family: 'sandoll-kwangya', sans-serif;
	height: 65px;
	cursor: pointer;
  font-size:1.5em;
  display:inline-block;
  color:var(--color-lightbrown);
	background:#fff;
  border: 2px solid var(--color-lightbrown);
	transition: 0.2s;
}

.cate:last-child {margin-right: 0;}

.cate.active {
	background: var(--color-lightbrown);
  color: #fff;
}

.cate.active:hover {
	background: var(--color-lightbrown);
	transition: 0.2s;
  color: #fff;
}

.cate:hover {
	background: var(--color-lightbrown);
	transition: 0.2s;
  color: #fff;
}

.menu_slider {
	display: flex;
	justify-content: center;
	width: 100%;
	position: relative;
	margin-bottom: 0;
}

.menu_title {
  font-family: 'sandoll-kwangya', sans-serif;
  color: var(--color-lightbrown);
  display: block;
  font-size: 2em;
  padding-top: 15px;
}

.menu_slider img {margin: 0 auto}

.menu_list {
  display: flex;
  width: 100%;
  gap: 35px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.menu_list li {
  width: 31%;
  padding-bottom: 50px;
}


.menu_list_lunch {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: start;
}

.menu_list_lunch li {
  width: 25%;
  padding-bottom: 50px;
}

/*
@media ()
*/

/* 모바일 */
@media (max-width: 768px) {
  #sec15 {
    padding: 80px 5% 60px 5%;
  }

  /* 카테고리 디자인 */
  .menu {
    margin: 0;
    padding-top: 50px;
  }

  .menu_cate {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }

  .cate {
    width: 50%;
    height: 50px;
    font-size:1.3em;
    border: 1px solid var(--color-lightbrown);
  }

  .menu_slider {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    margin-bottom: 0;
  }

  .menu_title {
    font-size: 1.2em;
    padding-bottom: 15px;
  }

  .menu_list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
    justify-content:space-between;
  }
  
  .menu_list li {
    width: 48%;
    padding-bottom: 0;
  }

    
  .menu_list_lunch {
    gap: 10px;
    justify-content: space-between;
  }


  .menu_list_lunch li {
    width: 48%;
    padding-bottom: 0;
  }
}





/*=================================================================
SEC16 :: 인테리어
=================================================================*/

#sec16 {
  clear: both;
  background: url(../img/sec16_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 150px 0 ;
  position: relative;
  text-align: center;
}

/* 슬라이더 전체 */
.interior-slider {
  position: relative;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding-top: 100px;
}


/* 큰 이미지 */
.interior-main-swiper {
  width: 100%;
  overflow: hidden;
  background: #eee;
}

.interior-main-swiper .swiper-slide {
  overflow: hidden;
}

.interior-main-swiper .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 좌우 버튼 */
.interior-button-prev,
.interior-button-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transform: translateY(-50%);
}

.interior-button-prev {
  left: 18px;
}

.interior-button-next {
  right: 18px;
}

.interior-button-prev::before,
.interior-button-next::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

.interior-button-prev::before {
  left: 18px;
  transform: translateY(-50%) rotate(-135deg);
}

.interior-button-next::before {
  right: 18px;
  transform: translateY(-50%) rotate(45deg);
}

/* 썸네일 */
.interior-thumb-swiper {
  width: 100%;
  margin-top: 14px;
  overflow: hidden;
}

.interior-thumb-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.interior-thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
}

.interior-thumb-swiper .swiper-slide-thumb-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #5b321d;
  pointer-events: none;
}

.interior-thumb-swiper .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 브러시 라벨 */
.sec16-label {
  position: absolute;
  right: -50px;
  bottom: 72px;
  z-index: 12;
  width: min(300px, 32vw);
  pointer-events: none;
  transform: rotate(-5deg);
}

.sec16-label img {
  display: block;
  width: 100%;
  height: auto;
}


/* 모바일 */
@media (max-width: 768px) {
  #sec16 {
    padding: 70px 0;
  }

  .sec12-title {
    margin-bottom: 0;
  }

  .interior-slider {
    padding-top: 50px;
  }

  .interior-main-swiper .swiper-slide img {
    aspect-ratio: 4 / 3;
  }

  .interior-button-prev,
  .interior-button-next {
    width: 38px;
    height: 38px;
  }

  .interior-button-prev {
    left: 10px;
  }

  .interior-button-next {
    right: 10px;
  }

  .interior-button-prev::before,
  .interior-button-next::before {
    width: 10px;
    height: 10px;
    border-width: 2px;
  }

  .interior-button-prev::before {
    left: 15px;
  }

  .interior-button-next::before {
    right: 15px;
  }

  .interior-thumb-swiper {
    margin-top: 10px;
  }

  .sec16-label {
    right: -50px;
    bottom: 50px;
    z-index: 12;
    width: 200px;
    }

}




/*=================================================================
SEC17 :: 2가지 창업 타입
=================================================================*/
#sec17 {
  clear: both;
  position: relative;
  width: 100%;
  padding: clamp(90px, 8vw, 140px) 24px;
  overflow: hidden;

  background-image: url("../img/beige_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#sec17 *,
#sec17 *::before,
#sec17 *::after {
  box-sizing: border-box;
}

#sec17 .two-type-container {
  width: min(100%, 1280px);
  margin: 0 auto;
}

/*--------------------------------------------
제목
----------------------------------------------*/

#sec17 .two-type-title {
  text-align: center;
  margin:0 auto;
  padding-bottom: 80px;
}

/*--------------------------------------------
타입 목록
----------------------------------------------*/
#sec17 .type-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#sec17 .type-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(370px, 0.98fr);
  width: 100%;
  min-height: 360px;
  border: 1px solid rgba(78, 43, 24, 0.7);
  background-color: rgba(255, 255, 255, 0.94);
}

/* 오른쪽 위 원형 이미지 */
#sec17 .type-badge {
  position: absolute;
  z-index: 10;
  top: -38px;
  right: -50px;
  display: block;
  width: clamp(120px, 12vw, 155px);
  height: auto;
  pointer-events: none;
}

/*--------------------------------------------
Swiper 이미지
----------------------------------------------*/
#sec17 .type-gallery {
  position: relative;
  min-width: 0;
  padding:20px;
  min-height: 360px;
  overflow: hidden;
}

#sec17 .type-swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#sec17 .type-swiper .swiper-wrapper,
#sec17 .type-swiper .swiper-slide {
  height: 100%;
}

#sec17 .type-swiper .swiper-slide {
  position: relative;
  overflow: hidden;
}

#sec17 .type-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*--------------------------------------------
설명 영역
----------------------------------------------*/
#sec17 .type-line {
  font-size: 22px;
  margin-bottom: 15px;
  font-family: 'Arita buri' !important;
  font-weight: 600;
}

#sec17 .type-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 27px 25px 19px;
  color: var(--color-brown);
}

#sec17 .type-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

#sec17 .type-name span {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 6px 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background-color: var(--color-brown);
}

#sec17 .type-name h3 {
  margin: 0;
  color: var(--color-brown);
  font-family: "sandoll-kwangya", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.06em;
}

#sec17 .type-features {
  margin: 0 0 22px;
  padding: 0 0 0 1.15em;
  color: #555;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

#sec17 .type-features li {
  padding-left: 3px;
  list-style:disc !important;
}

#sec17 .type-features small {
  display: block;
  font: inherit;
}

/*--------------------------------------------
예상 매출
----------------------------------------------*/
#sec17 .type-revenue {
  margin-top: auto;
  border: 1px solid rgba(78, 43, 24, 0.75);
}

#sec17 .revenue-title {
  margin: 0;
  padding: 10px 12px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  background-color: #050505;
}

#sec17 .revenue-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 59px;
  padding: 10px 12px;
  color: var(--color-lightbrown);
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.055em;
  text-align: center;
  background-color: #fff;
}

#sec17 .revenue-result strong {
  font-weight: 800;
  white-space: nowrap;
}

#sec17 .revenue-result span {
  display: inline-block;
  padding: 5px 7px;
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  background-color: var(--color-lightbrown);
}

/* 랜드마크형은 설명과 이미지 위치 반대 */
#sec17 .type-landmark {
  grid-template-columns: minmax(370px, 0.98fr) minmax(0, 1.22fr);
}

/*--------------------------------------------
태블릿
----------------------------------------------*/
@media screen and (max-width: 1050px) {
  #sec17 {
    padding-right: 30px;
    padding-left: 30px;
  }

  #sec17 .type-card,
  #sec17 .type-landmark {
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  }

  #sec17 .type-gallery,
  #sec17 .type-swiper .swiper-slide img {
    width: 100%;
    height: auto;
  }

  #sec17 .type-content {
    padding: 25px 20px 18px;
  }

  #sec17 .type-name {
    gap: 9px;
  }

  #sec17 .type-name span {
    min-height: 34px;
    padding: 5px 9px;
    font-size: 17px;
  }

  #sec17 .type-features {
    font-size: 15px;
  }

  #sec17 .revenue-result {
    flex-wrap: wrap;
    gap: 5px 8px;
    font-size: 17px;
  }

  #sec17 .type-badge {
    top: -30px;
    right: -20px;
    width: 125px;
  }
}

/*--------------------------------------------
모바일
----------------------------------------------*/
@media screen and (max-width: 760px) {
  #sec17 {
    padding: 72px 16px 85px;
  }


  #sec17 .type-list {
    gap: 60px;
  }

  #sec17 .type-card,
  #sec17 .type-landmark {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* 모바일에서는 두 타입 모두 이미지가 먼저 */
  #sec17 .type-landmark .type-gallery {
    order: 1;
  }

  #sec17 .type-landmark .type-content {
    order: 2;
  }

  #sec17 .type-gallery {
    width: 100%;
    min-height: 200px;
    aspect-ratio: 4 / 3;
    padding: 20px 20px 0 20px;
  }

  #sec17 .type-content {
    min-height: 330px;
    padding: 25px 20px 20px;
  }

  #sec17 .type-badge {
    top: -37px;
    right: -4px;
    width: 112px;
  }

  #sec17 .type-name {
    margin-bottom: 17px;
  }

  #sec17 .type-name span {
    min-height: 34px;
    font-size: 17px;
  }

  #sec17 .type-name h3 {
    font-size: 23px;
  }

  #sec17 .type-features {
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.48;
  }

  #sec17 .revenue-title {
    padding: 9px 10px;
    font-size: 20px;
  }

  #sec17 .revenue-result {
    min-height: 58px;
    font-size: 22px;
  }

  #sec17 .desktop-only {
    display: none;
  }
}

/*--------------------------------------------
작은 모바일
----------------------------------------------*/
@media screen and (max-width: 400px) {
  #sec17 {
    padding-right: 11px;
    padding-left: 11px;
  }

  #sec17 .type-content {
    min-height: 340px;
    padding: 23px 15px 16px;
  }

  #sec17 .type-name {
    gap: 7px;
  }

  #sec17 .type-name span {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 15px;
  }

  #sec17 .type-name h3 {
    font-size: 20px;
  }

  #sec17 .type-features {
    padding-left: 1.05em;
    font-size: 14px;
  }

  #sec17 .revenue-result {
    flex-direction: column;
    gap: 7px;
    padding: 12px 8px;
    font-size: 16px;
  }

  #sec17 .type-badge {
    top: -31px;
    width: 98px;
  }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  #sec17 .type-swiper .swiper-slide img {
    transition: none;
    transform: none;
  }
}





/*=================================================================
SEC18 :: 6가지 창업혜택
=================================================================*/
#sec18 {
  clear: both;
  background: url(../img/sec18_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 200px 0 150px ;
  position: relative;
  text-align: center;
}

.coin_over_3{
  position: absolute;
  left: 0;
  top: 5%;
}
.coin_over_4{
  right: 0;
  position: absolute;
  top: 10%;
}


.benefit_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top:150px ;
}

.benefit_wrap div {
  padding-bottom: 50px;
}

/* 모바일 반응형 (768px 이하 화면) */
@media screen and (max-width: 768px) {
  
  #sec18 {
    padding: 80px 0 60px; /* 모바일 환경에 맞춰 위아래 여백 축소 */
    overflow: hidden; /* 동전 이미지가 화면 밖으로 나가서 가로 스크롤 생기는 것 방지 */
    background-position: center;
  }

  /* 배경 동전 이미지 모바일 최적화 */
  .coin_over_3, .coin_over_4 {
    position: absolute; /* 기존 코드에 position 누락 방지 */
    width: 60px; /* 모바일 화면에 맞게 동전 크기 축소 */
  }
  .coin_over_3 {
    left: -10px;
    top: 2%;
  }
  .coin_over_4 {
    right: -10px;
    top: 5%;
  }
  .coin_over_3 img, .coin_over_4 img {
    width: 100%;
    height: auto;
  }

  /* 타이틀 이미지 크기 조절 */
  #sec15-2 .title {
    padding: 0 20px;
  }
  #sec15-2 .title img {
    max-width: 100%;
    height: auto;
  }

  /* 혜택 6가지 감싸는 영역 */
  .benefit_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 2개씩 양쪽 끝 정렬 */
    padding: 40px 0; /* 모바일 좌우 여백 부여 */
    box-sizing: border-box;
  }

  /* 혜택 아이템 개별 설정: 2개씩 3줄 */
  .benefit_wrap div {
    width: 48%; /* 한 줄에 2개씩 들어가도록 48% 설정 (남은 4%는 가운데 여백) */
    padding-bottom: 20px; /* 아래 줄과의 간격 축소 */
    box-sizing: border-box;
  }

  /* 혜택 이미지 반응형 처리 */
  .benefit_wrap div img {
    width: 100%;
    height: auto;
  }
}




/*=================================================================
SEC19 :: 대표가 직접 상담
=================================================================*/
#sec19 {
  clear: both;
  position: relative;
  padding: 150px 0;
  text-align: center;
  background: url(../img/beige_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

#sec19 .title img {margin: 0 auto;}


.order_wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 100px;
}

.order {
  background: var(--color-brown);
  color: #fff;
  width: 30%;
  padding: 60px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s;
}

.order:hover {
  background: var(--color-red);
  transition: 0.2s;
}

.order:hover > h2 {
  color: var(--color-yellow);
}

.order h2 {
  font-size: 2em;
  font-family: 'Arita buri' !important;
  font-weight: 700;
  border-bottom: 1px solid #fff;
  padding-bottom: 30px;
}

.order p {
  font-size: 1.2em;
  padding-top: 30px;
}

@media (max-width: 768px) {

  #sec19 {
    padding: 70px 0;
    background-position: center top;
  }

  #sec19 .title {
    margin-bottom: 42px;
  }

  #sec19 .title img {
    display: block;
    width: 90%;
    max-width: 420px;
    margin: 0 auto;
  }


  /*--------------------------------------------
  모바일 가로 스크롤
  ----------------------------------------------*/
  .order_wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;

    width: 100%;

    padding: 0 20px 15px;

    overflow-x: auto;
    overflow-y: hidden;

    box-sizing: border-box;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;

    -webkit-overflow-scrolling: touch;

    /* 스크롤바 숨김 */
    scrollbar-width: none;
  }

  .order_wrap::-webkit-scrollbar {
    display: none;
  }


  .order {
    /*
      한 카드가 화면의 약 82%를 차지
      → 다음 카드가 오른쪽에 살짝 보여서
        넘길 수 있다는 것을 인지 가능
    */
    flex: 0 0 82%;
    width: 82%;

    padding: 34px 24px;
    border-radius: 18px;

    box-sizing: border-box;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }


  .order h2 {
    font-size: 25px;
    line-height: 1.25;
    padding-bottom: 22px;
    word-break: keep-all;
  }

  .order p {
    padding-top: 22px;
    font-size: 16px;
    line-height: 1.5;
    word-break: keep-all;
  }

  .order p br {
    display: none;
  }

}



/*=================================================================
SEC20 :: 가맹절차
=================================================================*/
#sec20 {
  --process-column-gap: clamp(42px, 4vw, 66px);
  --process-row-gap: clamp(64px, 6vw, 82px);

  clear: both;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: clamp(60px, 7vw, 110px) 20px;
  box-sizing: border-box;
  overflow: hidden;

  background-image: url("../img/process_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#sec20 *,
#sec20 *::before,
#sec20 *::after {
  box-sizing: border-box;
}

/* 베이지색 메인 컨테이너 */
#sec20 .process-container {
  position: relative;
  width: min(100%, 1680px);
  padding:
    clamp(72px, 7vw, 105px)
    clamp(34px, 5vw, 82px)
    clamp(62px, 6vw, 90px);
  background-color: #fcfbf3;
}

/* 제목 */
#sec20 .process-title {
  margin: 0 0 clamp(72px, 7vw, 105px);
  color: var(--color-brown);
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.07em;
  text-align: center;
}

#sec20 .process-title span,
#sec20 .process-title strong {
  display: inline-block;
  font-family: 'sandoll-kwangya', sans-serif;
}

#sec20 .process-title strong {
  margin-left: 0.12em;
  color: var(--color-red);
  font-weight: inherit;
}

/* 단계 목록 */
#sec20 .process-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--process-column-gap);
  row-gap: var(--process-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 각 단계 */
#sec20 .process-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 270px;
  padding: 58px 18px 30px;
  border: 1px solid rgba(80, 43, 25, 0.65);
  color: var(--color-brown);
  text-align: center;
  background-color: transparent;
}

/* 단계 사이 화살표 */
#sec20 .process-item::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(100% + ((var(--process-column-gap) - 48px) / 2));
  width: 48px;
  height: 30px;
  background-image: url("../img/arrow_red.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  transform: translateY(-50%);
  pointer-events: none;
}

/* PC에서는 각 줄의 마지막 항목 뒤 화살표 제거 */
#sec20 .process-item:nth-child(4n)::after {
  display: none;
}

/* 번호 원형 */
#sec20 .process-number {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  font-family: 'sandoll-kwangya', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  background-color: var(--color-brown);
  transform: translate(-50%, -50%);
}

/* 아이콘 */
#sec20 .process-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-bottom: 18px;
}

#sec20 .process-icon img {
  display: block;
  width: 100%;
  max-width: 68px;
  height: 100%;
  object-fit: contain;
}

/* 단계 제목 */
#sec20 .process-item h3 {
  margin: 0 0 12px;
  color: var(--color-brown);
  font-size: clamp(21px, 1.7vw, 27px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.06em;
  font-family: 'Arita buri';
  word-break: keep-all;
}

/* 단계 설명 */
#sec20 .process-item p {
  margin: 0;
  color: rgba(80, 43, 25, 0.75);
  font-size: clamp(17px, 1.15vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

/*--------------------------------------------
태블릿 - 한 줄에 3개
----------------------------------------------*/
@media screen and (max-width: 1100px) {
  #sec20 {
    --process-column-gap: 60px;
    --process-row-gap: 72px;

    min-height: auto;
  }

  #sec20 .process-container {
    max-width: 960px;
    padding-right: 42px;
    padding-left: 42px;
  }

  #sec20 .process-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #sec20 .process-item {
    min-height: 260px;
    padding-right: 14px;
    padding-left: 14px;
  }

  /* 기존 PC 행 끝 화살표 설정 초기화 */
  #sec20 .process-item:nth-child(4n)::after {
    display: block;
  }

  /* 태블릿에서는 3번째 항목마다 화살표 제거 */
  #sec20 .process-item:nth-child(3n)::after {
    display: none;
  }

  /* 화살표는 모두 오른쪽 방향 유지 */
  #sec20 .process-item::after {
    top: 50%;
    left: calc(100% + ((var(--process-column-gap) - 48px) / 2));
    width: 48px;
    height: 30px;
    transform: translateY(-50%);
  }

  #sec20 .process-item:last-child::after {
    display: none;
  }
}

/*--------------------------------------------
모바일 - 한 줄에 2개
----------------------------------------------*/
@media screen and (max-width: 640px) {
  #sec20 {
    --process-column-gap: 42px;
    --process-row-gap: 62px;

    padding: 38px 14px;
    background-position: center top;
  }

  #sec20 .process-container {
    width: 100%;
    padding: 58px 20px 54px;
  }

  #sec20 .process-title {
    margin-bottom: 66px;
    font-size: clamp(32px, 9vw, 44px);
  }

  .process-title img {width: 75%;margin: 0 auto; text-align: center;}

  #sec20 .process-title span,
  #sec20 .process-title strong {
    display: inline-block;
  }

  #sec20 .process-title strong {
    margin-top: 0;
    margin-left: 0.12em;
  }

  #sec20 .process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #sec20 .process-item {
    min-height: 230px;
    padding: 50px 10px 24px;
  }

  /* 태블릿 행 끝 설정 초기화 */
  #sec20 .process-item:nth-child(3n)::after {
    display: block;
  }

  /* 모바일에서는 2번째 항목마다 화살표 제거 */
  #sec20 .process-item:nth-child(2n)::after {
    display: none;
  }

  /* 화살표 방향은 오른쪽으로 동일하게 유지 */
  #sec20 .process-item::after {
    top: 50%;
    left: calc(100% + ((var(--process-column-gap) - 34px) / 2));
    width: 34px;
    height: 24px;
    transform: translateY(-50%);
  }

  #sec20 .process-item:last-child::after {
    display: none;
  }

  #sec20 .process-number {
    width: 46px;
    height: 46px;
    font-size: 17px;
  }

  #sec20 .process-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
  }

  #sec20 .process-icon img {
    max-width: 56px;
  }

  #sec20 .process-item h3 {
    margin-bottom: 10px;
    font-size: clamp(18px, 4.7vw, 22px);
  }

  #sec20 .process-item p {
    font-size: clamp(12px, 3.3vw, 14px);
    line-height: 1.5;
  }
}

/*--------------------------------------------
작은 모바일 - 한 줄에 2개 유지
----------------------------------------------*/
@media screen and (max-width: 380px) {
  #sec20 {
    --process-column-gap: 30px;
    --process-row-gap: 58px;

    padding-right: 8px;
    padding-left: 8px;
  }

  #sec20 .process-container {
    padding-right: 12px;
    padding-left: 12px;
  }

  #sec20 .process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #sec20 .process-item {
    min-height: 220px;
    padding: 48px 6px 20px;
  }

  #sec20 .process-item::after {
    left: calc(100% + ((var(--process-column-gap) - 26px) / 2));
    width: 26px;
    height: 20px;
  }

  #sec20 .process-item:nth-child(2n)::after,
  #sec20 .process-item:last-child::after {
    display: none;
  }

  #sec20 .process-number {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  #sec20 .process-icon {
    width: 52px;
    height: 52px;
  }

  #sec20 .process-icon img {
    max-width: 50px;
  }

  #sec20 .process-item h3 {
    font-size: 17px;
    letter-spacing: -0.07em;
  }

  #sec20 .process-item p {
    font-size: 11px;
    letter-spacing: -0.05em;
  }
}



/*=================================================================
SEC21 :: 창업비용
=================================================================*/
#sec21 {
  clear: both;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1200px;
  padding: 90px 24px;
  box-sizing: border-box;
  overflow: hidden;

  background-image: url("../img/hanji_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 배경을 밝게 처리 */
#sec21::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.68);
  content: "";
}

#sec21 *,
#sec21 *::before,
#sec21 *::after {
  box-sizing: border-box;
}

#sec21 .price-container {
  position: relative;
  z-index: 1;
  width: min(100%, 1280px);
  margin: 0 auto;
}

/*--------------------------------------------
제목 영역
----------------------------------------------*/
#sec21 .price-heading {
  margin-bottom: clamp(54px, 5vw, 78px);
  text-align: center;
}


.price-title img {width: 50%;margin: 0 auto; text-align: center;}

#sec21 .price-title span,
#sec21 .price-title strong {
  font-family: "sandoll-kwangya", sans-serif;
  display: inline-block;
}

#sec21 .price-title strong {
  margin-left: 0.12em;
  color: var(--color-red);
  font: inherit;
  font-family: "sandoll-kwangya", sans-serif;
}

#sec21 .price-description {
  margin: 34px 0 0;
  color: var(--color-brown);
  font-size: clamp(21px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

#sec21 .price-description strong {
  font-weight: 800;
}

/*--------------------------------------------
표 영역
----------------------------------------------*/
#sec21 .price-table-area {
  position: relative;
  width: 100%;
}

#sec21 .price-unit {
  margin: 0 2px 10px 0;
  color: var(--color-brown);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
}

#sec21 .price-table-scroll {
  width: 100%;
}

#sec21 .price-table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  color: #222;
  font-size: 17px;
  background-color: rgba(255, 255, 255, 0.93);
}

#sec21 .price-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

#sec21 .price-table .col-category {
  width: 20%;
}

#sec21 .price-table .col-content {
  width: 42%;
}

#sec21 .price-table .col-price {
  width: 19%;
}

/* 표 머리 */
#sec21 .price-table thead th {
  height: 72px;
  padding: 15px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  background-color: var(--color-brown);
}

#sec21 .price-table thead th:last-child {
  border-right: 0;
}

/* 표 본문 */
#sec21 .price-table tbody th,
#sec21 .price-table tbody td {
  height: 68px;
  padding: 13px 18px;
  border-right: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
  vertical-align: middle;
}

#sec21 .price-table tbody th {
  color: #262626;
  font-weight: 700;
  text-align: center;
  background-color: rgba(245, 245, 245, 0.96);
  word-break: keep-all;
}

#sec21 .price-table tbody td:last-child,
#sec21 .price-table tbody td[colspan] {
  border-right: 0;
}

#sec21 .price-table .content-cell {
  color: #3c3c3c;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  word-break: keep-all;
}

#sec21 .price-table .number-cell,
#sec21 .price-table .shared-price {
  position: relative;
  color: #111;
  font-size: 19px;
  font-weight: 800;
  text-align: center;
}

#sec21 .price-table .point-red {
  color: var(--color-red);
  font-weight: 800;
}

#sec21 .price-table .price-notice {
  display: block;
  margin-top: 2px;
  color: var(--color-red);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

#sec21 .price-table .separate-work-row th,
#sec21 .price-table .separate-work-row td {
  height: 70px;
}

/*--------------------------------------------
가맹비 도장
----------------------------------------------*/
#sec21 .franchise-fee {
  overflow: visible;
}

#sec21 .price-value {
  display: inline-block;
}

#sec21 .stamp-wrap {
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
}

#sec21 .stamp-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

#sec21 .stamp-franchise {
  top: 50%;
  left: 50%;
  width: min(82%, 285px);
  transform: translate(-50%, -50%);
}

/*--------------------------------------------
합계
----------------------------------------------*/
#sec21 .price-table tfoot th,
#sec21 .price-table tfoot td {
  position: relative;
  height: 74px;
  padding: 14px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  background-color: var(--color-brown);
}

#sec21 .price-table tfoot th {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}

#sec21 .price-table tfoot th small {
  margin-left: 8px;
  font-size: 15px;
  font-weight: 500;
}

#sec21 .price-table tfoot td:last-child {
  border-right: 0;
}

#sec21 .total-cell {
  overflow: visible;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

#sec21 .total-value {
  display: inline-block;
}

#sec21 .stamp-total {
  top: 50%;
  left: 50%;
  width: min(94%, 205px);
  transform: translate(-50%, -50%);
}

/*--------------------------------------------
태블릿
----------------------------------------------*/
@media screen and (max-width: 1100px) {
  #sec21 {
    min-height: auto;
    padding: 90px 22px;
  }

  #sec21 .price-container {
    max-width: 980px;
  }

  #sec21 .price-heading {
    margin-bottom: 54px;
  }

  #sec21 .price-table {
    font-size: 15px;
  }

  #sec21 .price-table thead th {
    height: 64px;
    padding: 13px 12px;
    font-size: 21px;
  }

  #sec21 .price-table tbody th,
  #sec21 .price-table tbody td {
    height: 64px;
    padding: 12px 13px;
  }

  #sec21 .price-table .number-cell,
  #sec21 .price-table .shared-price {
    font-size: 17px;
  }

  #sec21 .price-table tfoot th,
  #sec21 .price-table tfoot td {
    height: 70px;
  }

  #sec21 .stamp-franchise {
    width: min(86%, 250px);
  }

  #sec21 .stamp-total {
    width: min(98%, 180px);
  }
}

/*--------------------------------------------
모바일
----------------------------------------------*/
@media screen and (max-width: 700px) {
  #sec21 {
    padding: 68px 14px;
    background-position: center;
  }

  #sec21::before {
    background-color: rgba(255, 255, 255, 0.76);
  }

  #sec21 .price-heading {
    margin-bottom: 44px;
  }

  #sec21 .price-title {
    font-size: clamp(38px, 11vw, 52px);
    line-height: 1.2;
  }

  #sec21 .price-title img {
    width: 80%;
  }

  #sec21 .price-title strong {
    margin-top: 2px;
    margin-left: 0;
  }

  #sec21 .price-description {
    margin-top: 24px;
    font-size: clamp(17px, 4.7vw, 22px);
    line-height: 1.55;
  }

  #sec21 .price-description br {
    display: none;
  }

  #sec21 .price-unit {
    margin-bottom: 8px;
    font-size: 12px;
  }

  #sec21 .price-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  #sec21 .price-table-scroll::-webkit-scrollbar {
    height: 5px;
  }

  #sec21 .price-table-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(80, 43, 25, 0.45);
  }

  #sec21 .price-table-scroll::-webkit-scrollbar-track {
    background-color: rgba(80, 43, 25, 0.08);
  }

  #sec21 .price-table {
    width: 760px;
    min-width: 760px;
    font-size: 14px;
  }

  #sec21 .price-table .col-category {
    width: 145px;
  }

  #sec21 .price-table .col-content {
    width: 325px;
  }

  #sec21 .price-table .col-price {
    width: 145px;
  }

  #sec21 .price-table thead th {
    height: 58px;
    padding: 11px 10px;
    font-size: 19px;
  }

  #sec21 .price-table tbody th,
  #sec21 .price-table tbody td {
    height: 60px;
    padding: 10px 12px;
  }

  #sec21 .price-table .price-notice {
    font-size: 11px;
  }

  #sec21 .price-table tfoot th,
  #sec21 .price-table tfoot td {
    height: 66px;
  }

  #sec21 .price-table tfoot th {
    font-size: 19px;
  }

  #sec21 .stamp-franchise {
    width: 235px;
  }

  #sec21 .stamp-total {
    width: 168px;
  }
}

/*--------------------------------------------
작은 모바일
----------------------------------------------*/
@media screen and (max-width: 380px) {
  #sec21 {
    padding-right: 10px;
    padding-left: 10px;
  }

  #sec21 .price-title {
    font-size: 38px;
  }

  #sec21 .price-description {
    font-size: 16px;
  }

  #sec21 .price-table {
    width: 720px;
    min-width: 720px;
  }

  #sec21 .price-table .col-category {
    width: 135px;
  }

  #sec21 .price-table .col-content {
    width: 305px;
  }

  #sec21 .price-table .col-price {
    width: 140px;
  }
}

/* 모션 최소화 설정 */
@media (prefers-reduced-motion: reduce) {
  #sec21 .animated.stamp {
    opacity: 1;
    animation: none;
  }
}







/*=================================================================
FOOTER CSS
==================================================================*/
#footer {
  width: 100%;
  background: #fff;
  padding: 48px 0 44px;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  color: #111;
}

#footer .footer_inner {
  width: min(1440px, calc(100% - 80px));
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* 왼쪽 영역 */
#footer .footer_left {
  flex: 1;
  min-width: 0;
}

#footer .footer_logo {
  margin: 0 0 28px;
}

#footer .footer_logo img {
  display: block;
  width: 150px;
  height: auto;
}

/* 사업자 정보 */
#footer .footer_info p {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.03em;
  color: #111;
}

#footer .footer_info span {
  margin: 0 10px;
  color: #111;
}

#footer .copyright {
  margin-top: 2px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

/* 오른쪽 영역 */
#footer .footer_right {
  width: 320px;
  flex: 0 0 auto;
  padding-top: 56px;
}

/* SNS 아이콘 */
#footer .footer_sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;

  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

#footer .footer_sns a {
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer .footer_sns img {
  display: block;
  width: 45px;
  height: 45px;
  object-fit: contain;
}

/* 하단 링크 */
#footer .footer_links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

#footer .footer_links a {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #222;
  text-decoration: none;
}

#footer .footer_links a + a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 1px;
  height: 13px;
  background: #d6d6d6;
  transform: translateY(-50%);
}

/* 반응형 */
@media (max-width: 1024px) {
  #footer {
    padding: 40px 0;
  }

  #footer .footer_inner {
    width: calc(100% - 40px);
    flex-direction: column;
    gap: 34px;
  }

  #footer .footer_right {
    width: 100%;
    padding-top: 0;
    align-items: flex-start;
  }

  #footer .footer_sns,
  #footer .footer_links {
    justify-content: flex-start;
  }

  #footer .footer_info p {
    font-size: 16px;
  }

  #footer .copyright {
    font-size: 15px;
  }
}

@media (max-width: 748px) {
  #footer {
    padding: 34px 0 36px;
  }

  #footer .footer_inner {
    width: calc(100% - 32px);
  }

  #footer .footer_logo {
    margin-bottom: 22px;
  }

  #footer .footer_logo img {
    width: 120px;
  }

  #footer .footer_info p {
    font-size: 14px;
    line-height: 1.65;
  }

  #footer .footer_info span {
    margin: 0 6px;
  }

  #footer .footer_sns {
    gap: 22px;
    margin-bottom: 20px;
  }

  #footer .footer_sns img {
    width: 24px;
    height: 24px;
  }

  #footer .footer_links {
    gap: 18px;
  }

  #footer .footer_links a {
    font-size: 14px;
  }

  #footer .footer_links a + a::before {
    left: -9px;
  }
}



/* 임시용 하단 폼 */
/* --------------------------------------------
가맹문의
--------------------------------------------- */
#contact {
  clear: both;
  background: url(../img/sec05_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 150px 0;
  position: relative;
  text-align: center;
}

#contact .title {
  padding-bottom: 150px;
}

.inquiry_wrap{
  width: 100%;
  border-radius: 20px;
  padding: 40px;
  background: #fff;
  margin: 0 auto;
}

.iqr_check > input,.iqr_check > label{
  display:block;
  float:left !important
}

.iqr_check{
  padding-left:50px;
  height:70px;
  background:#fff;
  box-sizing:border-box
}

.rel{position:relative}

.iqr_check > input{
  position:absolute;
  left:0;top:0;
  opacity:0;
  width:0;
  height:0
}

.iqr_check > label{
  margin-top:20px;
  padding-left:55px;
  height:35px;
  font-family:'Pretendard';
  line-height:35px;
  margin-left:0;
  font-size:18px;letter-spacing:-.02em;
  color:#000;
  background-repeat:no-repeat;
  background-position:left 0;
  background-image:url(../img/inquiry_check.png);
  background-size:35px 70px;
  cursor:pointer
}

.iqr_check > input:checked + label{background-position:left -35px}
.open_policy{
  position:absolute;
  top:15px;
  right:50px;
  display:block;
  width:100px;
  height:40px;
  line-height:40px;
  background-color:#412210;
  font-size:14px;
  letter-spacing:-.02em;
  color:#fff;
  text-align:center;
  text-decoration:none;
  font-family:'Pretendard';
  border:0
}

.open_policy:hover{text-decoration:none;color:#fff}

.iqr_info{
  margin:0 auto;
  border:none;
  font-family:'Pretendard';
  padding-top: 50px;
}

.inquiry_table{
  width:90%;
  margin:0 auto;
  table-layout:fixed;
  border-collapse:collapse
}

.inquiry_table th,.inquiry_table td{padding:10px 0}

.inquiry_table th{
  border-right:0;
  font-size:17px;
  letter-spacing:-.05em;
  text-align:left;
  width:20%
}

.inquiry_table td{
  color:#fff;
  vertical-align:middle;
  width:100%;
  float: left;
}

.inquiry_table th label,
.inquiry_table th span{
  font-weight:400;
  position:relative;
  font-size:20px;
  margin-bottom:0;
  color:#000
}

.inquiry_table th label.required:before{
  content:'*';
  position:absolute;
  left:-20px;top:7px;
  font-size:15px;
  color:var(--color-red);
}

.inquiry_table input[type="text"],
.inquiry_table input[type="email"],
.inquiry_table input[type="password"],
.inquiry_table select{
  width:100%;
  height:50px;
  padding:0 20px;
  border:1px solid #ddd;
  float: left;
  background:#fff;
  font-size:16px;
  line-height:35px;
  color:#000;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box
}

.inquiry_table select{
  font-size:15px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none
}

.inquiry_table select::-ms-expand{display:none}
.inquiry_table select option{color:#000}
    
input[type="radio"]{
  -webkit-appearance:radio;
  -moz-appearance:radio;
  appearance:radio
}

.inquiry_table input[type="radio"]{
  cursor:pointer;
  vertical-align:middle;
  appearance:none;
  width:150px;
  background:#fff;
  color:var(--color-lightbrown);
  height:50px;
  border:1px solid #ddd;
  position:relative;
  float: left;
}

.inquiry_table input[type="radio"]:checked{
  background:var(--color-lightbrown);
  color:#fff;
  border:1px solid var(--color-lightbrown);
}

.inquiry_table .new::after,
.inquiry_table .change::after,
.inquiry_table .shop_yes::after,
.inquiry_table .shop_no::after
 {
  font-size:17px;
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%)
}

.inquiry_table .new::after{content:'신규창업'}
.inquiry_table .change::after{content:'업종변경'}

.inquiry_table .shop_yes::after{content:'있음'}
.inquiry_table .shop_no::after{content:'없음'}


.inquiry_table .change,
.inquiry_table .shop_no {margin-left:-3px}

.inquiry_table textarea{
  overflow:auto;
  width:100%;
  height:150px;
  padding:20px;
  border:1px solid #ddd;
  background:#fff;
  font-size:16px;
  line-height:160%;
  resize:none;
  color:#000;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box
}

.b_btn01{
  display:block;
  margin:60px auto;
  font-family: 'Paperlogy-6SemiBold';
  width:250px;
  background:var(--color-lightbrown);
  border:0;
  font-size:25px;
  padding:15px 0;
  text-align:center;
  color:#fff;
  cursor:pointer;
}

.inquiry_table input:focus,
.inquiry_table textarea:focus{outline:none}
.inquiry_table textarea::placeholder,
.inquiry_table input::placeholder{color:#aeaeae}

  
/* 모바일 */
@media (max-width: 768px) {
  #contact {
    padding: 80px 0 180px 0;
  }

  #contact .title {
    padding: 0 5% 80px 5%;
  }

  .inquiry_wrap{
    width: 100%;
  }

    .iqr_check > input,.iqr_check > label{display:block;float:left}
    .iqr_check{padding-left:10px;height:55px}
    .rel{position:relative}
    .iqr_check > label{margin-top:10px;padding-left:45px;height:35px;line-height:35px;font-size:16px;background-size:35px 70px}
    .open_policy{position:absolute;top:10px;right:10px;display:block;width:80px;height:35px;line-height:35px}
    .inquiry_table th{font-size:15px;width:32%}
    .inquiry_table th label,
    .inquiry_table th span{font-size:17px}
    .inquiry_table th label.required:before{left:-15px;top:5px}
  .inquiry_table input[type="text"],
  .inquiry_table input[type="email"],
  .inquiry_table input[type="password"],
  .inquiry_table select{width:100%}
  .inquiry_table input[type="radio"]{width:50%;height:40px;margin-bottom:5px}
  .inquiry_table .new::after,
  .inquiry_table .shop_yes::after,
  .inquiry_table .shop_no::after,
  .inquiry_table .change::after{font-size:15px}
}