.sub {margin-top: 100px; overflow: hidden;}
.sub .light-gray-color {color: #cccccc;}
.visible-mo {display: none;}
.visible-pc {display: none;}
.hidden-mo {display: block;}

@font-face {
  font-family: 'Kanginhan';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/naverfont_07@1.0/Kanginhan.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 소개 */
.sub #about h3 span {font-family: 'Kanginhan';}
.sub #about .txtbox.harf {width: 50%; float: right;}
.sub #about .imgbox img {border-radius: 1.125rem;}

@media(max-width:1440px) {
  .sub #about .txtbox {padding-left: 0;}
  .sub #about .imgbox {padding-right: 3rem;}
}

@media(max-width:1024px) {
  .sub #about .txtbox.harf {width: 60%;}
}

@media(max-width:768px) {
  .sub #about .img-wrap.flex {flex-direction: column; gap: 1.5rem;}
  .sub #about .img-wrap.flex img {width: 100%; padding-right: 0;}
  .sub #about .txtbox.harf {width: 100%;}

  .sub #about .cont_wrap.flex {flex-direction: column; gap: 2.8125rem;}
  .sub #about .tit.width50,
  .sub #about .imgbox.width50 {width: 100%; padding-right: 0;}
  .sub #about .txtbox.width50 {width: 100%; padding-left: 0;}
}


@media(max-width:580px) {
  .sub #about .tit p br {display: none !important;}
  .sub #about.company .txtbox p br {display: none !important;}
}

@media(max-width:400px) {
  .sub #about.business .txtbox p br {display: none !important;}
}

@media(max-width:460px) {
  .hidden-mo {display: none;}
}

.sub #intro .imgbox img {border-radius: 0.625rem; width: 100%;}
.sub #intro .swiper-pagination {position: initial;}
.sub #intro .swiper-pagination > div {width: fit-content; height: auto; background: transparent; border-radius: 0; padding: 0.8rem 2rem; transition: 0.3s; margin: 1rem;}
.sub #intro .swiper-pagination > div.swiper-pagination-bullet-active {background: var(--pointcolor); color: #fff; border-radius: 100px;}

.sub #intro ul li img {width: 2.75rem; display: inline-block;}

.sub #intro .btnbox {gap: 1rem;}

/* .sub #intro .swiper-slide .txtbox {transition: 0.3s; transition-delay: 2s;}
.sub #intro .swiper-slide-prev .txtbox {order: -1; opacity: 0;} */


@media(max-width:1550px) {
  .sub #intro .txtbox {padding-left: 3.5rem;}
}

@media(max-width: 1240px) {
  .sub #intro .cont_wrap {width: 90%; margin: 5rem auto;}
}

@media(max-width:768px) {
  .sub #intro .font-26 {font-size: 2.5rem;}
  .sub #intro .font-18 {font-size: 1.5625rem;}
  .sub #intro .txtbox {padding-left: 0;}
}

@media(max-width:500px) {
  .sub #intro .swiper-pagination.font-18 {font-size: 1.35rem;}
}

@media(max-width:390px) {
  .sub #intro .tit br.mo {display: none !important;}
  .sub #intro .txtbox p br {display: none;}
}

/* 스페셜 */
.sub #special li {padding: 3.5rem 0; gap: 1.5rem; border-top: 1px solid #e9e9e9;}
.sub #special li:last-child {border-bottom: 1px solid #e9e9e9;}
.sub #special .num {font-size: 14px; color: var(--pointcolor); font-weight: 600;margin-top: 5px;}

@media(max-width:1240px) {
  .sub #special .num {padding-right: 4.5rem;}
}

@media(max-width:768px) {
  .sub #special li.flex {flex-direction: column; gap: 2rem;}
  .sub #special .txtbox {width: 100%;}
  .sub #special .imgbox {width: 100%; order: -1;}
  .sub #special .num {padding-right: 3.5rem;}
}

@media(max-width:420px) {
  .sub #special .tit br {display: none !important;}
}

@media(max-width:380px) {
  .sub #special .txtbox p br {display: none !important;}
}

/* 포인트 */
.sub #banner.franchise {padding: 60px 0;}
.sub #banner .bg-wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sub #banner .bg-wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center top; background-size: cover; transform: translateZ(0); will-change: transform;}

.sub #banner.franchise .imgbox img {width: 40.5rem;}

@media(max-width:990px) {
  .sub #banner .flex-between {flex-direction: column;}
  .sub #banner.sauceManufacturing .flex-between {gap: 3.5rem;}
  .sub #banner.meatProcessing .flex-between {gap: 3.5rem;}
  .sub #banner .box {width: 100%; text-align: center;}
  .sub #banner img {margin: auto;}
}

.sub #point.intro .flexbox {gap: 2rem;}
.sub #point.intro .imgbox {position: relative;}
.sub #point.intro a {position: relative; z-index: 1; width: 20rem;}

@media(max-width:768px) {
  .sub #point.intro a {width: 24rem;}
}

@media(max-width:500px) {
  .sub #point.intro .flexbox {flex-direction: column;}
}

/* MOU */
.sub #MOU .cont_wrap {border-radius: 1.25rem; overflow: hidden; background: #f8f8f8;}
.sub #MOU .txtbox {display: flex; flex-direction: column; justify-content: space-between; padding: 4rem 6.25rem 3.5rem;}
.sub #MOU .sub-tit {gap: 1.5rem;}
.sub #MOU img.SH {width: 8.6875rem;}
.sub #MOU img.BNK {width: 12.6875rem;}
.sub #MOU p.ex {color: #848484; font-size: 15px;}

@media(max-width: 1240px) {
  .sub #MOU img.SH {width: 8rem;}
  .sub #MOU img.X {width: 1rem;}
  .sub #MOU img.BNK {width: 10rem;}
}

@media(max-width:990px) {
  .sub #MOU .cont_wrap > .flex {flex-direction: column;}
  .sub #MOU .box {width: 100%;}
  .sub #MOU .txtbox {padding: 4rem;}
  .sub #MOU .box > div {margin-top: 10rem;}
  .sub #MOU img.SH {width: 8.6875rem;}
  .sub #MOU img.X {width: 1.25rem;}
  .sub #MOU img.BNK {width: 12rem;}
}

@media(max-width:768px) {
  .sub #MOU h4.font-26 {font-size: 2.375rem;}
}

@media(max-width:390px) {
  .sub #MOU .sub-tit {flex-direction: column;}
  .sub #MOU .txtbox p br {display: none !important;}
}

/* progress */
.sub #progress {background: linear-gradient(to bottom, rgba(225,231,238,0.5) 50%, #fff 100%);}
.sub #progress .flexList { --x-gap: 3rem;}
.sub #progress.sauceManufacturing .flexList { --x-gap: 2.5rem;}
.sub #progress.meatProcessing .flexList { --x-gap: 6rem;}
.sub #progress.meatProcessing .flexList.descbox {padding: 2.5rem 1.5rem 0;}
.sub #progress .itembox {padding: 1rem; background: linear-gradient(to right, #434343 30%, var(--pointcolor) 70%); color: #fff; border-radius: 100px; position: relative; z-index: 1;}
.sub #progress .itembox .box {position: relative;}
.sub #progress .itembox .box:after {position: absolute; right: -3rem; top: 50%; transform: translateY(-50%); content: url("/img/sub/business/arrow.png"); width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); line-height: 3.8rem;}
.sub #progress.meatProcessing .itembox .box:after {right: -5rem;}
.sub #progress .itembox .box:last-child:after  {display: none;}
.sub #progress .descbox {margin: 0 1rem;}
.sub #progress .descbox .box {background: #fff; padding: 2rem 1rem; border-radius: 1.125rem; border: 2px solid; position: relative;}
.sub #progress .descbox .box:nth-child(1) {border-color: #434343;}
.sub #progress .descbox .box:nth-child(2) {border-color: #434343;}
.sub #progress .descbox .box:nth-child(3) {border-color: #2c3b52;}
.sub #progress .descbox .box:nth-child(4) {border-color: #183560;}
.sub #progress .descbox .box:nth-child(5) {border-color: #103265;}
.sub #progress .descbox .box:nth-child(6) {border-color: #103265;}
.sub #progress .descbox .box:after {position: absolute; left: 50%; transform: translateX(-50%); top: -3rem; height: 3rem; width: 4px; border-left: 4px dotted #434343; content: ""; }
.sub #progress .descbox img {width: 3.625rem;}
.sub #progress.meatProcessing .descbox img {width: 3.75rem;}
.sub #progress .descbox .line {width: 50%; height: 1px; background: #eeeeee; margin: 1.5rem auto;}
.sub #progress.sauceManufacturing .descbox .box:last-child img {width: 4.875rem;}
.sub #progress.meatProcessing .descbox .box:last-child img {width: 4.875rem;}

@media(max-width:1440px) {
  .sub #progress.meatProcessing .flexList.descbox { --x-gap: 5rem;}
}

@media(max-width:1240px) {
  .sub #progress .cont_wrap {overflow-x: auto; padding-bottom: 3.5rem;}
  .sub #progress .cont_wrap .cont {width: 1200px;}
  .sub #progress ::-webkit-scrollbar {height: 5px;}
  .sub #progress .itembox .box:after {line-height: 4.2rem;}
}

@media(max-width:1024px) {
  .sub #progress .itembox .box:after {line-height: 4.5rem;}
}

@media(max-width:768px) {
  .sub #progress .itembox .box:after {transform: translateY(-50%) scale(0.8); width: 5rem; height: 5rem; line-height: 5.8rem; right: -5rem;}
  .sub #progress.sauceManufacturing .itembox .box:after {right: -3.5rem;}
  .sub #progress .descbox .box:after {border-left: 3px dotted;  top: -3.5rem; height: 3.5rem;}
  .sub #progress .descbox img {width: 4.5rem;}
  .sub #progress.sauceManufacturing .descbox .box:last-child img {width: 5.5rem;}
}


/* 공통 _ scrolltrigger */
.sub #common {background-size: cover; background-position: center; position: relative;}
.sub #common.company {background-image: url("/img/sub/company/common_bg.jpg");}
.sub #common.business {background-image: url("/img/sub/business/common_bg.jpg");}

.sub #common .flexList {--x-gap: 3.5rem; }
.sub #common .box {cursor: pointer; color: #fff; position: relative; height: fit-content;}

/* sh컴퍼니 */
.sub #common.company:after {position: absolute; right: 0; top: 0; width: 60%; height: 100%; background: rgba(30,39,60,0.5); backdrop-filter: blur(20px); content: "";}
.sub #common.company .flexList {--y-gap:12rem;}
.sub #common.company .box:nth-child(1) {margin-top: -5%;}
.sub #common.company .box:nth-child(2) {margin-top: 25%;}
.sub #common.company .box:nth-child(3) {margin-top: -30%;}

.sub #common.company .tit p {opacity: 0.5 !important;}
.sub #common.company .imgbox {aspect-ratio: 4 / 5;}

/* 사업안내 */
.sub #common.business .flexList {--y-gap: 4.5rem;}
.sub #common.business .box:nth-child(1) {margin-top: 15%;}
.sub #common.business .box:nth-child(4) {margin-top: -15%;}
.sub #common.business .imgbox {aspect-ratio: 2 / 3}

.sub #common.business .txtbox {position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;}

/* 공통 */
.sub #common .contbox {position: relative; z-index: 3;}
.sub #common .imgbox {overflow: hidden; border-radius: 1.875rem;}
.sub #common .imgbox img {width: 100%; height: 100%; transition: 0.5s;}
.sub #common .txtbox span {transform: rotate(-45deg); display: inline-block; transition: 0.3s;}
.sub #common .box:hover .imgbox img {transform: scale(1.1);}
.sub #common .box:hover .txtbox span {transform: rotate(0);}

.sub #common .box .arrow {position: absolute; right: 2rem; bottom: 2rem; transform: rotate(-45deg); aspect-ratio: 1 / 1; width: 3.125rem; height: 3.125rem; background-color: #f3f3f3; border-radius: 50%; line-height: 1; transition: 0.3s; color: var(--pointcolor);}
.sub #common .box:hover .arrow {transform: rotate(0);}

@media(max-width:990px) {
  .sub #common:after {display: none;}
  .sub #common .cont_wrap.flex {flex-direction: column; gap: 5rem;}
  .sub #common .tit,
  .sub #common .contbox {width: 100%;}
  .sub #common .contbox .flexList {padding-left: 0;}

  .sub #common.company .box:nth-child(1) {margin-top: 0%;}
  .sub #common.company .box:nth-child(2) {margin-top: 15%;}
  .sub #common.company .box:nth-child(3) {margin-top: -15%;}
}

@media(max-width:768px) {
  .sub #common.company .flexList {--y-gap: 3.5rem ;}
  .sub #common.business .flexList {--y-gap: 3.5rem ;}
  .sub #common .box {margin-top: 0 !important;}
}

/* 기업 설명 box */
.sub #desc .box {background: #f9fafc; aspect-ratio: 5 / 3; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem; border-radius: 0.625rem;}
.sub #desc .box .imgbox {display: flex; align-items: flex-end; justify-content: flex-end;}
.sub #desc .box .imgbox img {width: 5.375rem;}

/* 파트너사 */
.sub #partner .box {aspect-ratio: 4 / 2; background: #f6f6f6; border: 1px solid #e6e6e6; position: relative; transition: 0.3s;}
.sub #partner .box:hover {background: #fff; border-color: var(--pointcolor); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);}
.sub #partner .box img {filter: grayscale(1); opacity: 0.6; transition: 0.3s; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.sub #partner .box:hover img {filter: none; opacity: 1;}

@media(max-width:990px) {
  .sub #partner .box img {transform: translate(-50%, -50%) scale(0.8);}
}

@media(max-width:580px) {
  .sub #partner .box img {transform: translate(-50%, -50%) scale(0.6);}
}

@media(max-width:480px) {
  .sub #partner .box  {aspect-ratio: 3 / 2;}
}

@media(max-width:360px) {
  .sub #partner .flexList  {--count: 1;}
  .sub #partner .box  {aspect-ratio: 4 / 2;}
}

/* 오시는길 */
.wrap_controllers {display: none;}
.root_daum_roughmap .cont .section.lst {display: none;}
.root_daum_roughmap .cont {display: none;}

.sub #location .cont {padding: 7.5rem 0; border-bottom: 1px solid #e9e9e9;}
.sub #location .cont:first-child {padding-top: 0;}
.sub #location .cont:last-child {padding-bottom: 0; border-bottom: none;}
.sub #location .mapbox > div {width: 100%; border-radius: 0.625rem;}
.sub #location .mapbox > div > div {height: 30rem;}
.sub #location .btn_wrap {gap: 1.5rem;}
.sub #location .btn_wrap a {width: 15.5rem; border-radius: 0.625rem; padding: 1.25rem;}
.sub #location .btn_wrap a.naver {background: #00bf18; color: #fff;}
.sub #location .btn_wrap a.kakao {background: #fae100;}

.sub #location .btn_wrap a .arrow {transition: 0.3s;}
.sub #location .btn_wrap a:hover .arrow {transform: rotate(-45deg);}


@media(max-width:990px) {
  .sub #location .cont {flex-direction: column; gap: 3.5rem; padding: 4.5rem 0;}
  .sub #location .box {width: 100%; padding-left: 0;}
  .sub #location .btn_wrap a {width: 50%;}
}

@media(max-width:360px) {
  .sub #location .btn_wrap {flex-direction: column;}
  .sub #location .btn_wrap a {width: 100%;}
}

/* 비전 */
.sub #vision .txt p {opacity: 0.5;}
.sub #vision .box {overflow: hidden; aspect-ratio: 1 / 1; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 1.25rem;}
.sub #vision .box:nth-child(1) {background-image: url("/img/sub/company/vision_bg01.jpg");}
.sub #vision .box:nth-child(2) {background-image: url("/img/sub/company/vision_bg02.jpg");}
.sub #vision .box.aos-animate {animation: circleBg 2s ease-in-out; opacity: 1;}
.sub #vision .box .txt {position: absolute; left: 3rem; right: 3rem; bottom: 3rem;}


.sub #core {background: linear-gradient(to bottom, rgba(225,231,238,0.5) 80%, #fff 100%);}
.sub #core .cont:after {position: absolute; left: -100%; top: 50%; transform: translateY(-50%); width: 350%; height: 1px; background: rgba(16, 50, 101, 0.3); content: "";}
.sub #core .box {width: 18rem; height: 18rem; background: #fff; border-radius: 50%; box-shadow: 5px 5px 20px rgba(16, 50, 101, 0.1);}
.sub #core .box:nth-child(1) {z-index: 3;;}
.sub #core .box:nth-child(2) {margin-left: -2rem; z-index: 2;}
.sub #core .box:nth-child(3) {margin-left: -2rem; z-index: 1;}
.sub #core .box.box02 {background-image: url("/img/sub/company/core_bg.png"); background-size: cover; box-shadow: none; position: relative; margin-left: 0;}
.sub #core .box.box02:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20rem; height: 20rem; background: rgba(16, 50, 101, 0.1); content: ""; border-radius: 50%;}
.sub #core .box.box02:before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22rem; height: 22rem; background: rgba(16, 50, 101, 0.05); content: ""; border-radius: 50%;}
.sub #core .box.box02 img {filter: brightness(0) invert(1);}
.sub #core .box p {color: #a5acbc;}
.sub #core .arrow {opacity: 0.3; width: 10%;}
.sub #core .arrow img {margin: auto;}

@media(max-width:1240px) {
  .sub #core .box {width: 16rem; height: 16rem;}
  .sub #core .box.box02:after {width: 18rem; height: 18rem;}
  .sub #core .box.box02:before {width: 20rem; height: 20rem;}
  .sub #core .box img {transform: scale(0.6);}
}

@media(max-width:990px) {
  .sub #core .cont_wrap {flex-direction: column; gap: 5rem;}
  .sub #core .box {width: 18rem; height: 18rem;}
  .sub #core .box.box02:after {width: 20rem; height: 20rem;}
  .sub #core .box.box02:before {width: 22rem; height: 22rem;}
  .sub #core .arrow {transform:  rotate(90deg); display: flex; align-items: center; justify-content: center;}
}

@media(max-width:768px) {
  .sub #core .font-14 {font-size: 1.25rem;}
  .sub #core .cont {flex-wrap: wrap; justify-content: center; width: 80%;}
  .sub #core .cont:after {display: none;}
  .sub #core .cont_wrap {gap: 3.5rem;}
  .sub #core .box:nth-child(3) {margin-top: -3rem; margin-left: 0;}
  .sub #core .box {width: 20rem; height: 20rem;}
  .sub #core .box.box02:after {width: 22rem; height: 22rem;}
  .sub #core .box.box02:before {width: 24rem; height: 24rem;}
  .sub #core .box.box02 {margin-top: 1rem;}
}

@media(max-width:580px) {
  .sub #core .cont {width: 90%;}
}

@media(max-width:500px) {
  .sub #core .cont {flex-direction: column; gap: 1.5rem; width: 100%;}
  .sub #core .box {margin-left: 0 !important; margin-top: 0 !important;}
  .sub #core .box.box02 {margin-top: 1rem !important;}

  .sub #core .cont .box {width: 100%; border-radius: 1.25rem;}
  .sub #core .cont .box img {transform: scale(0.8);}
}


/* 조직도 */
.sub #chart .sc01 {position: relative;}
.sub #chart .sc01:after {position: absolute; left: 50%; bottom: -6.25rem; height: 4.125rem; width: 1px; background: rgba(0, 0, 0, 0.2); content: "";  transform: translateX(calc(-50% + 0.5px))}

.sub #chart .ceo {width: 13.5rem; height: 13.5rem; background: #fff; border-radius: 50%; border: 2px dotted #939dab; margin: auto; position: relative;}
.sub #chart .ceo:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 15.5rem; height: 15.5rem; border-radius: 50%; background: rgba(16, 50, 101, 0.1); content: ""; z-index: -1;}
.sub #chart .ceo::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 17.5rem; height: 17.5rem; border-radius: 50%; background: rgba(16, 50, 101, 0.05); content: ""; z-index: -2;}

.sub #chart .list {margin-top: 1rem; padding: 1.25rem; background: #f7f7f7; border-radius: 0.625rem; position: relative;}
.sub #chart .list:after {position: absolute; left: 50%; top: -2rem; height: 2rem; border-left: 1px dashed rgba(0, 0, 0, 0.2); content: ""; width: 1px; z-index: -1; transform: translateX(calc(-50% + 0.5px))}

.sub #chart .item:before {position: absolute; left: 50%; transform: translateX(calc(-50% + 0.5px)); top: -0.3rem; width: 0.625rem; height: 0.625rem; background: #fff; border: 2px solid #000; border-radius: 50%; content: ""; z-index: 1;}


/* 두번째줄 */
.sub #chart .sc02 {position: relative;}
.sub #chart .sc02:after {position: absolute; left: 8.5rem; top: 0; width: calc(var(--layoutwidth) - 17rem); height: 1px;  background: rgba(0, 0, 0, 0.2); content: ""; }

.sub #chart .sc02 .item {width: 17rem; padding: 1.5rem; border-radius: 0.625rem; position: relative;}
.sub #chart .sc02 .item.item01 {background: #106558;}
.sub #chart .sc02 .item.item02 {background: var(--pointcolor);}
.sub #chart .sc02 .item.item03 {background: #81403e;}

.sub #chart .sc02 .item.item01:before {border-color: #106558;}
.sub #chart .sc02 .item.item02:before {border-color: var(--pointcolor);}
.sub #chart .sc02 .item.item03:before {border-color: #81403e;}

.sub #chart .sc02 .item:after {position: absolute; left: 50%; top: -6.25rem; height: 6.25rem; width: 1px; background: rgba(0, 0, 0, 0.2); content: "";  transform: translateX(calc(-50% + 0.5px)); z-index: -1;}

.sub #chart .sc02 .list {width: 17rem;}

/* 세번째줄 */
.sub #chart .sc03 .item {padding: 1.25rem; border-radius: 0.625rem; background: #38547e; position: relative;}
.sub #chart .sc03 .item:after {position: absolute; left: 50%; top: -2rem; transform: translateX(calc(-50% + 0.5px)); border-left: 1px dashed rgba(0, 0, 0, 0.2); content: ""; width: 1px; height: 2rem; z-index: -1;}
.sub #chart .sc03 .item:before {border-color: #38547e;}


.sub #chart .sc03 {position: relative;}
.sub #chart .sc03:after {position: absolute; left: 50%; transform: translateX(calc(-50% + 0.5px)); top: -2rem; width: calc(calc(var(--layoutwidth) - calc(calc(100% / var(--count) - (var(--x-gap) * (var(--count) - 1)) / var(--count)) / 2 ) - 7.4rem)); height: 1px;  background: rgba(0, 0, 0, 0.2); content: "";  z-index: -1;}
.sub #chart .sc03::before {position: absolute; left: 50%; top: -27.5rem; transform: translateX(calc(-50% + 0.5px)); border-left: 1px dashed rgba(0, 0, 0, 0.2); content: ""; width: 1px; height: 25.625rem; z-index: -1;}

@media(max-width:1580px) {
  .sub #chart .sc02:after {width: calc(100% - 17rem);}
  .sub #chart .sc03:after {width: calc(calc(90% - calc(calc(100% / var(--count) - (var(--x-gap) * (var(--count) - 1)) / var(--count)) / 2 ) + 2.25rem) );}
}

@media(max-width:768px) {
  .sub #chart .sc02:after {display: none;}
  .sub #chart .sc02:before {display: none;}
  .sub #chart .sc03:after {display: none;}
  .sub #chart .sc03:before {display: none;}
}

@media(max-width:768px) {
  .sub #chart .container {overflow: hidden;}
  .sub #chart .sc01 {margin-bottom: 0;}
  .sub #chart .sc01:after {height: 77.5rem; left: 1.75rem; top: 0; z-index: -1; display: block; transform: none;}
  @supports (-webkit-touch-callout: none) {
    .sub #chart .sc01:after {height: 76.8rem;}
  }
  .sub #chart .ceo {width: 100%; height: fit-content; border-radius: 0.625rem; padding: 1.5rem;}
  .sub #chart .ceo:after {display: none;}
  .sub #chart .ceo::before {display: none;}

  .sub #chart .item:before {left: -0.3rem; transform: none; top: 50%; transform: translateY(calc(-50% + 0.5px));}

  .sub #chart .sc02 {flex-direction: column; gap: 6.25rem; padding-bottom: 1.5rem; padding-top: 5.5rem; padding-left: 3.5rem;}
  .sub #chart .sc02 .cont {margin: auto; width: 100%;}
  .sub #chart .sc02 .cont:nth-child(2) {order: 4; position: relative;}
  .sub #chart .sc02 .cont:nth-child(2):after {position: absolute; left: 1.75rem; top: 0; width: 1px; height: 93rem; background: rgba(0, 0, 0, 0.2); content: ""; z-index: -1;}
  @supports (-webkit-touch-callout: none) {
    .sub #chart .sc02 .cont:nth-child(2):after {height: 92rem;}
  }
  .sub #chart .sc02 .item {width: 100%;}
  .sub #chart .sc02 .item:after {left: -1.75rem; width: 1.75rem; height: 1px; top: 50%; transform: translateY(calc(-50% + 0.5px));}
  .sub #chart .sc02 .list {width: 100%;}

  .sub #chart .sc03 {padding-left: 7rem;}
  .sub #chart .sc03 .item {width: 100%;}
  .sub #chart .sc03 .item:after {left: -1.8rem; width: 1.8rem; height: 1px; border-left: none; border-top: 1px dashed rgba(0, 0, 0, 0.2); top: 50%; transform: translateY(calc(-50% + 0.5px));}
  .sub #chart .sc03 .list {width: 100%;}
}



@media(max-width:400px) {
  .sub #chart .tit p br {display: none;}
}

.sub #box .box {background: #f9f9f9; border-radius: 0.625rem; padding: 3rem 1rem;}
.sub #box .box > div {gap: 1.5rem;}
.sub #box .box img {width: 3.25rem;}

@media(max-width:360px) {
  .sub #box .flexList {--count: 1;}
}

.sub #list .flexList {--x-gap: 3rem; --y-gap: 3rem;}
.sub #list.meatProcessing .flexList {--x-gap: 2rem; --y-gap: 3rem;}
.sub #list .box {border: 1px solid #e9e9e9; border-radius: 1.25rem; overflow: hidden;}
.sub #list .box img {border-bottom: 1px solid #e9e9e9;}
.sub #list .box .txtbox {padding: 2rem;}

@media(max-width:550px) {
  .sub #list .txtbox br {display: none !important;}
}

@media(max-width:500px) {
  .sub #list .txtbox br {display: block !important;}
}

@media(max-width:360px) {
  .sub #list .tit br {display: none !important;}
}