/*서브*/
.sub {padding: var(--gap-200) 0; }
.sub > .sub {padding: 0;}
.sub2 {padding: var(--gap-160) 0;}
.sub .inner {max-width: 1440px; margin: auto; width: 90%;}

span.br {display: block; transition: 0s;}
/* search */
.search-box {width: 320px; height: 58px; background: #F8E6C3; border-radius: 30px; display: flex; align-items: center; gap: 8px; padding: 0 var(--gap-24); box-sizing: border-box; margin-left: auto;}
.search-box .input-box {width: 100%; height: 100%;}
.search-box .input-box input {appearance: none; border: none; background: transparent; width: 100%; height: 100%; padding: 0 var(--gap-8); font-weight: 700; font-size: var(--font-16); color: var(--sub-color); font-weight: 700;}
.search-box .input-box input::placeholder {color: rgba(76,42,0,0.5);}
.search-box .search-btn {width: 24px; height: 24px; background: url(/img/com/icon_search.svg) center no-repeat; background-size: cover; flex-shrink: 0;}
@media screen and (max-width: 768px) {
  .search-box {height: 48px;}
}
@media screen and (max-width: 480px) {
  .search-box {width: 100%;}
}
/* modal */
.modal-popup {position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 99999; display: none;}
.backdrop {z-index: 99998; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.6)000;}


/* sub title */
.sub .sub-title { margin-bottom: var(--gap-80); color: var(--main-color); text-align: center; }
.sub .sub-title .tit {font-size: var(--font-60); font-weight: 800; overflow: hidden; margin-bottom: var(--gap-24);}
.sub .sub-title .tit span {display: block; transition: 0.5s ease-in-out;}
.sub .sub-title .txt {font-size: var(--font-20); font-weight: 700;  transition: 0.5s 0.3s ease-in-out;}

.sub .sub-title .tag-box {display: flex; justify-content: center; gap: 8px; align-items: center; margin: auto; margin-top: calc(var(--gap-24)*2); width: 90%; flex-wrap:wrap; transform: translateY(50%); transition: 0.5s 0.5s ease-in-out; opacity: 0;}
.sub .sub-title .tag-box .tag {}
.sub .sub-title .tag-box .tag a {height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 var(--gap-24); border-radius: 25px; font-weight: 800; font-size: var(--font-16); color: rgba(8,72,60,0.5); border: 1px solid rgba(8,72,60,0.2); transition: 0.4s;}

.sub .sub-title.ani1 .tit span {transform: translateY(100%);}
.sub .sub-title.ani1 .txt {opacity: 0; transform: translateY(50%);}
.sub .sub-title.ani1.active .tit span {transform: translateY(0);}
.sub .sub-title.ani1.active .txt {opacity: 1; transform: translateY(0);}
.sub .sub-title.ani1.active .tag-box {transform: translateY(0); opacity: 1;}
@media screen and (max-width: 768px) {
  .sub .sub-title .tag-box {justify-content: start;}
  .sub .sub-title .tag-box .tag a {height: 38px;}
}

/* title box */
.sub .title-box {margin-bottom: var(--gap-80);}
.sub .title-box h2 { font-size: var(--font-40); font-weight: 800; color: var(--main-color);  position: relative;  padding-top: calc(var(--gap-32) + var(--gap-16)); text-align: center;}
.sub .title-box h2::before {content:"";     width: var(--gap-32);  height: var(--gap-32);  background-size: cover;  background-repeat: no-repeat;  background-position: center;  position: absolute;  top: 0;}

/* ani-title */
.sub.sub2 .sub-title {margin-bottom: var(--gap-120);}
.sub .sub-title .ani-title {width: 100%; height: 720px; color: #fff; font-size: var(--font-60); font-weight: 800; overflow: hidden; border-radius: var(--gap-40); position: relative; background-position: center; background-size: cover; background-repeat: no-repeat;}
.sub .sub-title .ani-title::before {content:""; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; left: 0; top: 0;}
.sub .sub-title .ani-title .text-box {position: absolute; width: 90%; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1;}
.sub .sub-title .ani-title .text-box > div {overflow: hidden;}
.sub .sub-title .ani-title .text-box > div span {display: block; transition: 0.6s ease-in-out; opacity: 0;}
.sub .sub-title .ani-title .text-box p {font-size: var(--font-24); font-weight: 700; text-align: right; overflow: hidden; margin-top: var(--gap-80);}
.sub .sub-title .ani-title .text-box p span {display: inline-block; text-align: left; transform: translateY(-50%); opacity: 0; transition: 0.5s 0.6s ease-in-out;}
.sub .sub-title .ani-title .lft-tit {margin-bottom: var(--gap-24); }
.sub .sub-title .ani-title .lft-tit span {text-align: left; transform: translateX(-50%);}
.sub .sub-title .ani-title .rit-tit span {text-align: right; transform: translateX(50%);}

.sub .sub-title.active .ani-title .text-box > div span {opacity: 1; transform:translateX(0); }
.sub .sub-title.active .ani-title .text-box p span {opacity: 1; transform: translateY(0);}
@media screen and (max-width: 1280px){
  .sub .sub-title .ani-title {height: 580px;}
}
@media screen and (max-width: 768px) {
  .sub .sub-title .ani-title .lft-tit {margin-bottom: 0;}
  .sub .sub-title .ani-title .rit-tit span {text-align: left; transform: translateX(-50%);}

  .sub .sub-title .ani-title .text-box p {text-align: left;}
}
@media screen and (max-width: 480px){
  .sub .sub-title .ani-title {height: 480px;}
}


/* accordion */
.accordion-item { color: var(--main-color);}
.accordion-item + .accordion-item {margin-top: var(--gap-8);}
.accordion-item .accordion-btn {padding: var(--gap-16) var(--gap-40); display: flex; align-items: center; gap: var(--gap-24); min-height: 72px; cursor: pointer; font-size: var(--font-18); font-weight: 800; justify-content: space-between; }
.accordion-item .accordion-btn span {display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; line-height: 1.6; max-height: calc(var(--font-18)*1.6*2); transition: max-height 0.4s;}
.accordion-item .accordion-btn .btn {width: 40px; height: 40px; position: relative; border-radius: 50%; border: 2px solid var(--main-color); flex-shrink: 0; }
.accordion-item .accordion-btn .btn::before,
.accordion-item .accordion-btn .btn::after {content:""; width: 16px; height: 2px; border-radius: 1px; background: var(--main-color); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: 0.3s;}
.accordion-item .accordion-btn .btn::after {transform: translate(-50%,-50%) rotate(90deg);}
.accordion-item .accordion-cont { line-height: 1.6; display: none;}
.accordion-item .accordion-cont .inbox {padding: var(--gap-16) var(--gap-40) var(--gap-40); font-size: var(--font-18);}
.accordion-item .accordion-cont img { display: block; margin: auto; border-radius: var(--gap-24); width: 95%;}

.accordion-item.open .accordion-btn span {}
.accordion-item.open .accordion-btn .btn::after {transform: translate(-50%,-50%);}
@media screen and (max-width: 768px) {
  .accordion-item .accordion-btn .btn {width: 32px; height: 32px;}
  .accordion-item .accordion-btn {min-height: 62px;}
}

/* list */
ul.list-ty1 {}
ul.list-ty1 li {padding-left: 0.7em; color: inherit; position: relative;}
ul.list-ty1 li::before {content:"·"; position: absolute; left: 0; top: 0;}


/* bg color */
.bg-white {background-color: #fff;}
.bg-pink {background-color: #FFDECC;}
.bg-pink2 {background-color: #FFCBAF;}
.bg-pink3 {background-color: #F2DECC;}
.bg-beige {background-color: #F8E6C3;}
.bg-beige2 {background-color: #FFE9BD;}
.bg-beige3 {background-color: #F5F0E1;}
.bg-lgreen {background-color: #E6E9BF;}
.bg-ygreen {background-color: #E0E597;}
.bg-green {background-color: #DCDDCD;}
.bg-sky {background-color: #C8E4F3;}
.bg-blue {background-color: #C8CCF3;}


/* 검색결과 없음 */
.no-search-result {border-radius: var(--gap-40); background: #F5F0E1; padding: var(--gap-32); display: flex; justify-content: center; align-items: center; height: 270px; text-align: center;}
.no-search-result p {font-size: var(--font-18); color: var(--main-color);}
@media screen and (max-width: 768px) {
  .no-search-result {height: 100px;}
}

/* detail form */
.detail-form {opacity: 0; transition: 0.5s 0.3s;}

.sub.detail-page .sub-title.ani2 {opacity: 0; transform: translateY(-10%); transition: 0.5s;}
.sub.detail-page .sub-title.ani2 .txt + .tit {margin-top: var(--gap-24);}
.sub.detail-page .sub-title.ani2 .tit {font-size: var(--font-32);}

.sub.detail-page .sub-title.ani2.active {opacity: 1; transform: translateY(0); margin-bottom: calc(var(--gap-80)*0.8);}
.sub.detail-page .sub-title.ani2.active + .detail-form {opacity: 1; transform: translateY(0);}

.detail-form .detail {padding: calc(var(--gap-32)*1.5) calc(var(--gap-32)*1.75); border-radius: var(--gap-40); background: #F5F0E1; font-size: var(--font-18); color: #08483C; }
.detail-form .detail span {font-weight: 700; line-height: 1.8;}
.detail-form .detail img {max-width: 840px; width: 90% !important; display: block; margin: auto;}
.detail-form .attach-box {margin-top: var(--gap-24); background: #fff; border-radius: var(--gap-40); }
.detail-form .attach-box .attach-wrap {padding: var(--gap-32) calc(var(--gap-32)*1.75); display: flex; gap: var(--gap-40); color: var(--main-color);}
.detail-form .attach-box .attach-wrap .tit {font-weight: 700;  font-size: var(--font-18); flex-shrink: 0; }
.detail-form .attach-box .attach-wrap .list li + li {margin-top: var(--gap-8);}
.detail-form .attach-box .attach-wrap .list a {font-size: var(--font-16); color: var(--main-color); text-decoration-color: var(--main-color); }
.detail-form .attach-box .attach-wrap .list a font {color: inherit !important;}
.detail-form .attach-box .attach-wrap .list a:hover {text-decoration: underline; text-underline-position: under; }
.detail-form .attach-box .attach-wrap .list a img {display: none;}
.detail-form .button-box {width: fit-content; margin: calc(var(--gap-32)*1.5) auto 0;}

@media screen and (max-width: 768px){
  .detail-form .detail img {width: 100% !important;}
  .detail-form .detail {padding: var(--gap-32);}
  .detail-form .attach-box .attach-wrap {padding: var(--gap-32); flex-direction: column; gap: var(--gap-16);}
}

@keyframes arrAni {
  0% {opacity: 0;}
  20% {opacity: 0;}
  80% {opacity: 1;}
  100% {opacity: 1;}
}
/* s:company */
.sub.company {padding-top: 0;}
.company .visual {margin-bottom: 0; height: var(--nvh); width: 100%; position: relative;}
.company .visual .visual-text {font-size: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.company .visual .visual-text .logo {width: 480px; height: 120px; background: url(/img/com/logo.svg) center no-repeat; background-size: cover; opacity: 0; transform: translateY(50%); transition: 0.6s ease; }

.company .visual .object-wrap .object {position: absolute; font-size: 0; opacity: 0; transform: translateY(50%); transition-duration: 0.6s; transition-timing-function: ease; }
.company .visual .object-wrap .object.item1 {left: 18%; top: 176px; transition-delay: 0.5s;}
.company .visual .object-wrap .object.item2 {left: 112px; top: 50%; transition-delay: 0.9s;}
.company .visual .object-wrap .object.item3 {left: 23%; bottom: 60px; transition-delay: 0.8s;}
.company .visual .object-wrap .object.item4 {right: 36%; top: 176px; transition-delay: 1s;}
.company .visual .object-wrap .object.item5 {right: 8.5%; top: 200px; transition-delay: 0.5s;}
.company .visual .object-wrap .object.item6 {right: 21%; bottom: 109px; transition-delay: 0.6s;}

.company .visual .down-motion {position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); opacity: 0; transition: 0.8s 1s;}
.company .visual .down-motion .arrow {margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; align-items: center;}
.company .visual .down-motion .arrow > span {border-top: 9px solid var(--sub-color); border-right: 6px solid rgba(0,0,0,0); border-left: 6px solid rgba(0,0,0,0); opacity: 0; animation: arrAni 1.2s ease-in-out alternate infinite;}
.company .visual .down-motion .arrow > span.arr1 {animation-delay: 0s;} 
.company .visual .down-motion .arrow > span.arr2 {animation-delay: 0.3s;} 
.company .visual .down-motion .arrow > span.arr3 {animation-delay: 0.6s;} 
.company .visual .down-motion .text {font-size: var(--font-14); font-weight: 700; color: var(--sub-color); }

.company .visual.active .visual-text .logo {opacity: 1; transform: translateY(0);}
.company .visual.active .object-wrap .object {opacity: 1; transform: translateY(0);}
.company .visual.active .object-wrap .object img {max-width: 100%;}
.company .visual.active .down-motion {opacity: 1;}

.company .sec02 {width: 100%; /*height: calc(var(--nvh)*3);*/ height: 300vh; position: relative;}
.company .sec02-wrap {height: 100%; width: 100%;}
.company .sec02-wrap > div {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.company .sec02-img {position: sticky; top: 0; left: 0; width: 100%; }

.company .sec02 .img-box {display: flex; /*height: var(--nvh);*/ height: 100vh;}
.company .sec02 .img-box > div  {width: 50%; height: 100%;   position: relative; overflow: hidden;}
.company .sec02 .img-box > div > span {width: 200%; height: 100%; position: absolute; top: 0; background-image: url(/img/cont/company_sec02_img.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;}
.company .sec02 .img-box .img-left span { left: 0;}
.company .sec02 .img-box .img-right span { right: 0;}

.company .sec02 .text-box-wrap .bg {width: 100%; height: 100%; background: #000; opacity: 0; position: absolute; left: 0; top: 0; z-index: 0;}
.company .sec02 .text-box {width: 100%; position: sticky; left: 0; top: 0; padding: var(--gap-200) calc(var(--gap-80)*3); z-index: 1;}
.company .sec02 .text-box p {color: #fff; font-size: var(--gap-32); font-weight: 800; padding-top: var(--gap-80); position: relative; opacity: 0; transform: translateY(50%); }
.company .sec02 .text-box p::before {content:""; width: var(--gap-40); height: var(--gap-40); background: url(/img/cont/company_sec02_icon.svg) center no-repeat; background-size: cover; position: absolute; left: 0; top: 0;} 

.company .sec02 .text-box-wrap.active .text-box p {opacity: 1; transform: translateY(0); transition: 0.6s ease-in-out;}


.company .service {margin-top: var(--gap-200);}
.company .service .service-wrap {display: flex; max-width: 1010px; width: 90%; margin: auto; justify-content: space-between; }
.company .service .service-wrap .text-area {}
.company .service .service-wrap .text-area .text-box {height: var(--nvh); display: flex; align-items: center; color: var(--main-color); }
.company .service .service-wrap .text-area .text-box .tit {font-weight: 800; font-size: var(--font-32); margin-bottom: 1em; }
.company .service .service-wrap .text-area .text-box p {font-weight: 700; font-size: var(--font-20); }
.company .service .service-wrap .text-area .text-box .button-box {margin-top: var(--gap-80); display: flex; gap: var(--gap-8);}

.company .service .service-wrap .img-area {height: var(--nvh); width: 480px; font-size: 0; display: flex; align-items: center;}
.company .service .service-wrap .img-area .img-box {position: relative; width: 100%; padding-top: 116.67%; overflow: hidden;}
.company .service .service-wrap .img-area .img-box .img-item {border-radius: var(--gap-40); overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.company .service .service-wrap .img-area .img-box .img-item img {width: 100%; height: 100%; object-fit: cover; }

.company .service .service-wrap .img-area .img-box .img-item.item02 {will-change: transform; transform-style: preserve-3d; z-index: 1;}

.company .history .his-wrap {width: 90%; max-width: 1200px; margin: auto;}
.company .history .title-box h2:before {background-image: url(/img/main/title_obj_02.svg);  left: 50%;  transform: translateX(-50%);}

.company .history .his-cont {display: flex; justify-content: space-between; align-items: center; gap: var(--gap-80);}
.company .history .his-cont > div {width: 50%;}
.company .history .his-cont .lft .img-box {width: 100%; border-radius: var(--gap-40); font-size: 0; overflow: hidden;} 
.company .history .his-cont .lft .img-box img {max-width: 100%; }

.company .history .his-cont .accordion-item {background: #F8E6C3; border-radius: var(--gap-24); }
.company .history .his-cont .accordion-item .accordion-btn {font-size: var(--font-24);  padding-right: var(--gap-24);}
.company .history .his-cont .accordion-item .accordion-btn span {font-weight: 800;}
.company .history .his-cont .accordion-item .accordion-cont .inbox {padding-bottom: var(--gap-32); padding-top: 0;}
.company .history .his-cont .accordion-item .accordion-cont .inbox ul li {display: flex;}
.company .history .his-cont .accordion-item .accordion-cont .inbox ul li + li {margin-top: var(--gap-8);}
.company .history .his-cont .accordion-item .month {font-weight: 700; width: 56px; flex-shrink: 0; }
.company .history .his-cont .accordion-item .mon-cont {width: 100%;}
.company .history .his-cont .accordion-item .mon-cont span {display: block;}
.company .history .his-cont .accordion-item .mon-cont span + span {margin-top: 4px;}

.company .location {margin-top: var(--gap-200);}
.company .loca-wrap {max-width: 1440px; width: 90%; margin: auto;}
.company .location .loca-cont { display: flex; gap: var(--gap-40);  height: 560px; overflow: hidden;  }

.company .location .map-box {width: 100%; border-radius: var(--gap-40); overflow: hidden; min-height: 280px; opacity: 0; transform: translateX(-50px); transition: 0.3s;}
.company .location .root_daum_roughmap {width: 100%; height: 100%;}
.company .location .root_daum_roughmap .wrap_map {width: 100%; height: 100%;}
.company .location .wrap_controllers {display: none;}

.company .location .loca-text {width: 440px; flex-shrink: 0; padding: calc(var(--gap-24)*2); border-radius: var(--gap-40); background-color: #FFDECC; height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: var(--sub-color); opacity: 0; transform: translateX(50px); transition: 0.3s;}
.company .location .loca-text .title {padding-top: 2em; font-size: var(--font-24); font-weight: 800; position: relative;}
.company .location .loca-text .title::before {content:""; width: 32px; height: 32px; position: absolute; left: 0; top: 0; background: url(/img/cont/company_icon_map_pin.svg) center no-repeat; background-size: cover; }

.company .location .loca-text .item {font-size: var(--font-18); }
.company .location .loca-text .item .tit {font-weight: 800; margin-bottom: var(--gap-8);}
.company .location .loca-text .item + .item {margin-top: var(--gap-32); }

.company .location.active .map-box,
.company .location.active .loca-text {transform: translateX(0); opacity: 1;}
@media screen and (max-width: 1280px) {

  .company .visual .visual-text .logo {width: 400px; height: 100px;}

  .company .visual .object-wrap .object.item1 {width: 140px;}
  .company .visual .object-wrap .object.item2 {width: 140px; left: 10%; top: 55%; }
  .company .visual .object-wrap .object.item3 {width: 160px;}
  .company .visual .object-wrap .object.item4 {width: 60px;}
  .company .visual .object-wrap .object.item5 {width: 180px;}
  .company .visual .object-wrap .object.item6 {width: 160px;}

  .company .sec02 .text-box {padding: var(--gap-200) 10%;}

  .company .location .loca-cont {height: 440px;}
  .company .location .loca-text {width: 320px;}
}

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

  .company .visual .visual-text .logo {width: 280px; height: 70px;}
  .company .visual .object-wrap .object.item1 {width: 80px; top: 76px;}
  .company .visual .object-wrap .object.item2 {width: 100px;}
  .company .visual .object-wrap .object.item3 {bottom: 60px; left: 16%; width: 110px;}
  .company .visual .object-wrap .object.item4 {width: 40px; top: 15%; }
  .company .visual .object-wrap .object.item5 {width: 100px; top: 10%;}
  .company .visual .object-wrap .object.item6 {width: 110px; bottom: 10%; right: 16%;}

  /* .company .sec02 {height: unset;}
  .company .sec02-wrap > div {position: static;}
  .company .sec02-img {position: relative; height: 500px;}
  .company .sec02 .img-box {position: absolute; left: 0; top: 0; height: 100%; width: 100%;}
  .company .sec02 .text-box-wrap {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .company .sec02 .text-box-wrap .bg {opacity: 0.5;}
  .company .sec02 .text-box {padding: 8% 10%;}
  .company .sec02 .text-box-wrap p {opacity: 1; transform: translateY(0);} */
  .company .sec02 {/*height: calc(var(--nvh)*2);*/ height: 200vh;}
  .company .sec02 .img-box > div {width: 100%;}
  .company .sec02 .img-box .img-left span {width: 100%;}
  .company .sec02 .img-box .img-right {display: none;}

  .company .service .service-wrap .img-area {width: 320px;}

  .company .history .his-cont {gap: var(--gap-32);}

  .company .location .loca-cont {flex-wrap:wrap; height: unset;}
  .company .location .map-box {height: 360px;}
  .company .location .loca-text {width: 100%; height: unset; flex-direction: row;}
}

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

  .company .visual .down-motion {bottom: 32px;}
  .company .visual .visual-text .logo {width: 200px; height: 50px;}
  .company .visual .object-wrap .object.item1 {width: 50px; top: 20%; }
  .company .visual .object-wrap .object.item2 {width: 60px; top: 60%;}
  .company .visual .object-wrap .object.item3 {width: 70px;}
  .company .visual .object-wrap .object.item5 {width: 60px; top: 25%;}
  .company .visual .object-wrap .object.item6 {width: 70px; bottom: 15%;}

  .company .service {  }
  .company .service .service-wrap {flex-direction: column-reverse; overflow: hidden;  gap: var(--gap-40); align-items: center; justify-content: center; }
  .company .service .service-wrap .text-area { width: 100%; }
  .company .service .service-wrap .text-area .text-box {height: unset; width: 90vw; flex-shrink: 0; justify-content: center;}
  .company .service .service-wrap .text-area .text-box.box2 {margin-top: 50px;}
  .company .service .service-wrap .img-area {height: unset; display: none;}

  .company .history {margin-top: var(--gap-200);}
  .company .history .his-cont .lft {display: none;}
  .company .history .his-cont .rit {width: 100%;}

  .company .location .map-box {height: 280px;}
  .company .location .loca-text {padding: var(--gap-32); flex-direction: column; gap: 16px;}
}

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

  /* .company .sec02-img {height: 320px;} */
}
/* e:company */

/* s:special */
.special.sub .sub-title .ani-title {background-image: url(/img/cont/special_visual_img.jpg); }
.special.sub .sub-title .ani-title .text-box {max-width: 960px;}

.special.sub .sec01 .title-box h2::before {background-image: url(/img/main/title_obj_09.svg); left: 50%;}
.special .sec01-cont .item {text-align: right; padding: 0 100px;}
.special .sec01-cont .item-box {display: flex; justify-content: space-between; align-items: center;}
.special .sec01-cont .item-box .text-box {max-width: 480px; width: 50%; color: var(--main-color); }
.special .sec01-cont .item-box .text-box .tit {font-weight: 800; font-size: var(--font-32); margin-bottom: 1em;}
.special .sec01-cont .item-box .text-box p {font-weight: 700; font-size: var(--font-18); }
.special .sec01-cont .item-box .text-box p span {display: block;}
.special .sec01-cont .item-box .img-box {font-size: 0; border-radius: var(--gap-16); overflow: hidden; width: 50%;}
.special .sec01-cont .item-box .img-box img {width: 100%;}

.special .sec01-cont .item.ty1 {text-align: left; background: #F5F0E1; padding: var(--gap-80); border-radius: var(--gap-16); margin: var(--gap-120) 0;}
.special .sec01-cont .item.ty1 .item-box .text-box {padding-left: var(--gap-40);}

.special .sec01-cont .item.ty1 {opacity: 0; transform: translateY(50%); transition: 0.8s;}
.special .sec01-cont .item.ty1 .tit {opacity: 0; transform: translateY(100%); transition: 0.6s 0.6s;}
.special .sec01-cont .item.ty1 p span {transform: translateY(100%); opacity: 0; transition: 0.6s 0.8s;}
.special .sec01-cont .item.ty1.active {opacity: 1; transform: translateY(0);}
.special .sec01-cont .item.ty1.active .tit {opacity: 1; transform: translateY(0);}
.special .sec01-cont .item.ty1.active p span {opacity: 1; transform: translateY(0);}

.special .sec01-cont .item.ty2 .img-box {opacity: 0; transform: translateY(50%); transition: 0.8s;}
.special .sec01-cont .item.ty2 .tit {opacity: 0; transform: translateY(100%); transition: 0.6s 0.6s;}
.special .sec01-cont .item.ty2 p span {transform: translateY(100%); opacity: 0; transition: 0.6s 0.8s;}
.special .sec01-cont .item.ty2.active .img-box {opacity: 1; transform: translateY(0);}
.special .sec01-cont .item.ty2.active .tit {opacity: 1; transform: translateY(0);}
.special .sec01-cont .item.ty2.active p span {opacity: 1; transform: translateY(0);}

.special .bg {margin: var(--gap-40) 0;}
.special .bg .bg-cont {position: relative; padding: var(--gap-40) 0;}
.special .bg .bg-cont::before,
.special .bg .bg-cont::after {content:""; width: 100%; height: 160px; position: absolute; left: 0; background: #F6F5EF; }
.special .bg .bg-cont::before {top: 0; border-radius: 0 0 var(--gap-60) var(--gap-60);}
.special .bg .bg-cont::after {bottom: 0; border-radius: var(--gap-60) var(--gap-60) 0 0;}
.special .bg .bg-cont .img-box {background: url(/img/cont/special_bg_img.jpg) center no-repeat; background-size: cover; height: 640px; background-attachment:fixed;}


.special .sec02-wrap {max-width: 1280px; width: 90%; margin: auto;}
.special .sec02-cont {display: flex; align-items: stretch; width: 100%; gap: var(--gap-80);}
.special .sec02-cont > div {width: 50%; position: relative;}

.special .sec02-cont .item {border-radius: var(--gap-40); overflow: hidden; }
.special .sec02-cont .item + .item {margin-top: var(--gap-80);}
.special .sec02-cont .item .img-box {border-radius: var(--gap-40); overflow: hidden; font-size: 0;}
.special .sec02-cont .item .img-box img {width: 100%;}
.special .sec02-cont .item .text-box {padding: var(--gap-40) calc(var(--gap-24)*2); color: var(--main-color); min-height: 266px;}
.special .sec02-cont .item .text-box .tit {font-size: var(--font-24); font-weight: 800; margin-bottom: 1em;}
.special .sec02-cont .item .text-box p {font-weight: 700; font-size: var(--font-18);}

.special .sec02-cont .sticky-box {position: sticky; left: 0;top: var(--headerH); background: var(--main-color); color: #fff; padding: calc(var(--gap-24)*2); min-height: 320px;}
.special .sec02-cont .sticky-box .tit {font-weight: 800; font-size: var(--font-32);}
.special .sec02-cont .sticky-box .icon {position: absolute;  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; right: calc(var(--gap-24)*2); bottom: calc(var(--gap-24)*2);}
.special .sec02-cont .sticky-box .icon img {}

.special .sec03 {margin-top: var(--gap-200); overflow: hidden;}
.special .sec03-title {font-weight: 700; font-size: var(--font-60); color: var(--main-color);  }
.special .sec03-title > div {width: 100%; overflow: hidden; text-align: center;}
.special .sec03-cont {display: flex; gap: var(--gap-24); margin-top: var(--gap-80); }
.special .sec03-cont .item {border-radius: var(--gap-40); overflow: hidden; border-top-left-radius: 0; background-position: right center; background-repeat: no-repeat; background-size: cover; flex: 1 1 0; position: relative;}
.special .sec03-cont .item .img-box {width: 100%; position: absolute; right: 0; top: 0; border-bottom-left-radius: 50px; font-size: 0; overflow: hidden;  height: 100%;}
.special .sec03-cont .item .img-box img {width: 100%; height: 100%; object-fit: cover;}
.special .sec03-cont .item01 .tit {color: #063650;}
.special .sec03-cont .item02 .tit {color: var(--main-color);}
.special .sec03-cont .item03 .tit {color: var(--sub-color);}
.special .sec03-cont .item .box {padding: var(--gap-40) 48px; background: #F5F0E1; border-radius: var(--gap-40); border-top-left-radius: 0; width: 70%; max-width: 300px; position: relative; z-index: 1; }
.special .sec03-cont .item .box .tit {font-weight: 800; font-size: var(--font-24); margin-bottom: var(--gap-32); }

.special .sec04 {margin-top: calc(var(--gap-120)*2);}
.special.sub .sec04 .title-box h2::before {background-image: url(/img/main/title_obj_12.svg); left: 50%;}

.special .sec05 {margin-top: var(--gap-200); }
.special.sub .sec05 .title-box h2::before {background-image: url(/img/main/title_obj_13.svg); left: 50%;}

.special .card-cont {display: grid; gap: var(--gap-40); grid-template-columns: repeat(4, 1fr); }
.special .card-cont .item {opacity: 0; transform: translateY(50%); transition-duration: 0.55s;}
.special .card-cont .item:nth-child(2) {transition-delay: 0.2s;}
.special .card-cont .item:nth-child(3) {transition-delay: 0.4s;}
.special .card-cont .item:nth-child(4) {transition-delay: 0.6s;}
.special .card-cont .item .img-box {width: 100%; border-radius: var(--gap-24); overflow: hidden; font-size: 0;}
.special .card-cont .item .img-box span {display: block; width: 100%; padding-top: 100%; position: relative;}
.special .card-cont .item .img-box span img {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.special .card-cont .item .tit {font-size: var(--font-20); font-weight: 700; color: var(--main-color); overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; margin-top: var(--gap-32); }

.special .card-cont.active .item {opacity: 1; transform: translateY(0);}

@media screen and (max-width:1440px){
  .special .sec01-cont .item {padding: 0 var(--gap-60);}
  .special .sec01-cont .item .item-box .text-box {padding: 0 1em;}
  .special .sec01-cont .item.ty1 {padding: var(--gap-60);}
  .special .sec01-cont .item.ty1 .item-box .text-box {padding-left: 1em;}

  
}
@media screen and (max-width:1280px){
  .special .sec02-cont {gap: var(--gap-60);}
  .special .sec02-cont .item .text-box p br {display: none;}
}
@media screen and (max-width:1024px){
  .special .sec01-cont .item,
  .special .sec01-cont .item.ty1 {text-align: center;}

  .special .sec01-cont .item-box {flex-direction: column; gap: 1.5em;}
  .special .sec01-cont .item-box .text-box {width: 100%;}
  .special .sec01-cont .item-box .img-box {width: 100%; max-width: 480px;}
  .special .sec01-cont .item.ty1 .item-box {flex-direction: column-reverse;}

  .special .bg .bg-cont::before, .special .bg .bg-cont::after {height: 100px;}
  .special .bg .bg-cont .img-box {height: 400px;}

  .special .sec02-cont {flex-direction: column; align-items: center;}
  .special .sec02-cont > div {width: 100%; max-width: 600px; }

  .special .sec03-cont {flex-wrap: wrap; justify-content: center; }
  .special .sec03-cont .item {flex:unset; width: 100%; max-width: 460px; }

  .special .card-cont {grid-template-columns: repeat(2,1fr); gap: var(--gap-40) 16px; max-width: 600px; margin: auto;}
  .special .card-cont .item .tit {margin-top: 0.8em;}
  
}
@media screen and (max-width:768px) {
  .special .sec01-cont .item .item-box .text-box {padding: 0;}
  .special .sec01-cont .item.ty1 .item-box .text-box {padding-left: 0;}
  .special .sec01-cont .item-box .text-box p span {display: inline;}

  .special .bg .bg-cont::before, .special .bg .bg-cont::after {height: 60px;} 
  .special .bg .bg-cont .img-box {height: 280px;}

  .special .sec02-cont .item .text-box {min-height: unset; padding: var(--gap-40);}
  .special .sec02-cont .sticky-box {min-height: 240px;}

  .special .sec03-cont .item .box {padding: var(--gap-40) 30px;}
}
@media screen and (max-width:480px){
  .special .sec03-title {font-size: 8vw;}
}
/* e:special */

/* s:manage */
.manage {}
.manage.sub .sub-title .ani-title {background-image: url(/img/cont/manage_visual_img.jpg);}
.manage.sub .sub-title .ani-title .text-box {max-width: 960px;}

.manage .sec01 {}
.manage .sec01 .sec01-wrap {width: 90%; max-width:1136px; margin: auto; }
.manage .sec01 .manage-list {display: flex; gap: 16px; }
.manage .sec01 .manage-list .line-area {width: 50%;}
.manage .sec01 .manage-list .line-area > div {height: 400px; border-radius: var(--gap-40);}

.manage .sec01 .manage-list .list-tit {padding: calc(var(--gap-40)*1.4); background: var(--main-color); color: #fff; display: flex; flex-direction: column; justify-content: space-between; position: sticky; left: 0; top: calc(var(--headerH) + 16px);}
.manage .sec01 .manage-list .list-tit .icon {width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.3); font-size: 0;}
.manage .sec01 .manage-list .list-tit p {font-size: var(--gap-32); font-weight: 800; }

.manage .sec01 .manage-list .list-item { display: flex; justify-content: space-between; flex-direction: column; padding: var(--gap-40) calc(var(--gap-24)*2);}
.manage .sec01 .manage-list .list-item.bg1 {background-color: #E6E9BF;}
.manage .sec01 .manage-list .list-item.bg2 {background-color: #F8E6C3;}
.manage .sec01 .manage-list .list-item.bg3 {background-color: #FFDECC;}
.manage .sec01 .manage-list .list-item.bg4 {background: #fff;}
.manage .sec01 .manage-list .list-item.bg5 {background: #F5F0E1;}
.manage .sec01 .manage-list .list-item.bg4 .icon-box {background: #fff;}
.manage .sec01 .manage-list .list-item + .list-item {margin-top: var(--gap-16);}
.manage .sec01 .manage-list .list-item .icon-box {border-radius: var(--gap-16); width: 120px; height: 120px; background: #F9F6EE; font-size: 0; display: flex; justify-content: center; align-items: center; }
.manage .sec01 .manage-list .list-item .tit {color: var(--main-color); font-size: var(--font-24); font-weight: 800; margin-bottom: var(--gap-16); }
.manage .sec01 .manage-list .list-item p {font-size: var(--font-18); color: var(--main-color); margin-bottom: var(--gap-16);}

.manage .sec01 .manage-list.list-ty2 {margin-top: var(--gap-16);}
.manage .sec01 .manage-list.list-ty2 .list-item .icon-box {background: #F5F0E1;}
.manage .sec01 .manage-list.list-ty2 .list-item:nth-child(2n) .icon-box {background: #fff;}

.manage .sec02 {margin-top: var(--gap-160);}
.manage .sec02 .img-box {border-radius: var(--gap-24); margin-bottom: var(--gap-40); border-radius: var(--gap-24); overflow: hidden; font-size: 0; height: 480px; position: relative; }
.manage .sec02 .img-box span {width: 100%; position: absolute; left: 0; top: 50%; }
.manage .sec02 .img-box span img {width: 100%; }
.manage .sec02 .text-box {color: var(--main-color); display: flex; justify-content: space-between;}
.manage .sec02 .text-box .tit {font-size: var(--font-32); font-weight: 800;}
.manage .sec02 .text-box p {font-weight: 700; font-size: var(--font-18); }

.manage .sec03 {margin: var(--gap-40) 0; }
.manage .sec03 .sec03-cont {position: relative; padding: var(--gap-40) 0; }
.manage .sec03 .sec03-cont .img-box {background: url(/img/cont/manage_sec03_img.jpg) center no-repeat; background-size: cover; height: 640px;}
.manage .sec03 .sec03-cont::before,
.manage .sec03 .sec03-cont::after {content:""; width: 100%; height: 160px; position: absolute; left: 0;  background: #F6F5EF; }
.manage .sec03 .sec03-cont::before { top: 0; border-radius: 0 0 var(--gap-60) var(--gap-60);}
.manage .sec03 .sec03-cont::after {bottom: 0; border-radius: var(--gap-60) var(--gap-60) 0 0;}

.manage .sec04 .sec04-wrap {max-width: 1280px; margin: auto; width: 90%;}
.manage .sec04 .title-box h2::before {background: url(/img/main/title_obj_05.svg); left: 50%; transform: translateX(-50%);}
.manage .sec04 .sec04-cont {display: flex;}
.manage .sec04 .sec04-cont .card-item {border-radius: var(--gap-24); padding: var(--gap-40) calc(var(--gap-24)*2); position: relative; display: flex; justify-content: space-between; width: 50%; gap: 16px;}
.manage .sec04 .sec04-cont .card-item .text-box {width: 314px;}
.manage .sec04 .sec04-cont .card-item .text-box .tit {font-size: var(--font-24); font-weight: 800; color: inherit; margin-bottom: var(--gap-32);}
.manage .sec04 .sec04-cont .card-item .text-box li {color: inherit; font-size: var(--font-18); position: relative; font-weight: 700; padding-left: 0.7em;}
.manage .sec04 .sec04-cont .card-item .text-box li + li {margin-top: var(--gap-24);}
.manage .sec04 .sec04-cont .card-item .text-box li::before {content:"·"; font-weight: 700; position: absolute; left: 0; top: 0; }
.manage .sec04 .sec04-cont .card-item .img-box {  width: 160px; height: 100%; flex-shrink: 0; font-size: 0; transform: translateX(-180%); transition: 0.4s ease-in-out;}
.manage .sec04 .sec04-cont .card-item .img-box span {display: block; border-radius: var(--gap-16); overflow: hidden;}
.manage .sec04 .sec04-cont .card-item .img-box span img {width: 100%; height: 100%; object-fit: cover; vertical-align: top;}

.manage .sec04 .sec04-cont .card-item.card01 {color: var(--sub-color); background: #F8E6C3;}
.manage .sec04 .sec04-cont .card-item.card02 {color: var(--main-color); background: #F5F0E1;}

.manage .sec04.active .sec04-cont .card-item .img-box {transform: translateX(0);}

@media screen and (max-width: 1280px) {
  .manage .sec04 .sec04-cont .card-item {padding: var(--gap-40);}
}
@media screen and (max-width: 1024px) {
  .manage .sec01 .manage-list .list-item {padding: var(--gap-32);}
  .manage .sec01 .manage-list .list-item .icon-box {width: 80px; height: 80px;}
  .manage .sec01 .manage-list .list-item .icon-box img {width: 52px;}
  .manage .sec01 .manage-list .line-area > div {height: 340px;}
  .manage .sec01 .manage-list .list-tit {padding: var(--gap-40);}

  .manage .sec02 .img-box {height: 360px;}

  .manage .sec03 .sec03-cont::before, .manage .sec03 .sec03-cont::after {height: 100px;}
  .manage .sec03 .sec03-cont .img-box {height: 400px;}

  .manage .sec04 .sec04-cont {flex-wrap: wrap; gap: var(--gap-24);}
  .manage .sec04 .sec04-cont .card-item {width: 100%;}
}
@media screen and (max-width: 768px){
  .manage .sec01 .manage-list {flex-direction: column; }
  .manage .sec01 .manage-list .line-area {width: 100%;}
  .manage .sec01 .manage-list .line-area > div {height: 280px;}
  .manage .sec01 .manage-list .line-area .list-item {opacity: 0; transform: translateY(50%); transition: 0.4s;}
  .manage .sec01 .manage-list .line-area .list-item.active {opacity: 1; transform: translateY(0);}
  .manage .sec01 .manage-list .list-tit {position: static;}

  .manage .sec02 .img-box {height: 260px;}
  .manage .sec02 .text-box {flex-direction: column; gap: 8px;}

  .manage .sec03 .sec03-cont {padding: 0;}
  .manage .sec03 .sec03-cont::before, .manage .sec03 .sec03-cont::after {height: 60px;}
  .manage .sec03 .sec03-cont .img-box {height: 280px;}
}
@media screen and (max-width: 480px){
  .manage .sec01 .manage-list .line-area > div {height: 240px;}
  .manage .sec01 .manage-list .list-item p br {display: none;}
  .manage .sec01 .manage-list .list-item .icon-box {width: 60px; height: 60px;}
  .manage .sec01 .manage-list .list-item .icon-box img {width: 38px;}

  .manage .sec02 .img-box {height: 160px;}

  .manage .sec04 .sec04-cont .card-item .img-box {width: 100px;}
}
/* e:manage */


/* s:business */
.business.sub .up-box {margin-top: var(--gap-160); }
.business.sub .up-box .title-box h2::before {background-image: url(/img/main/title_obj_07.svg);left: 50%; transform: translateX(-50%);}
.business .up-box .box-wrap {max-width: 1324px; margin: auto; width: 90%;}
.business .up-box .up-box-cont {display: flex; flex-wrap:wrap; gap: var(--gap-32); }
.business .up-box .up-box-cont .item {border-radius: var(--gap-16); width: calc((100% - var(--gap-32)*2)/3); transform: translateY(50%); opacity: 0; transition-duration: 0.5s; transition-timing-function: ease-in-out; }
.business .up-box .up-box-cont .item .inbox {padding: var(--gap-32) var(--gap-40);  position: relative; color: var(--main-color); }
.business .up-box .up-box-cont .item .tit {font-weight: 800; font-size: var(--font-24); margin-bottom: var(--gap-24);}
.business .up-box .up-box-cont .item p {font-weight: 700; font-size: var(--gap-18); }
.business .up-box .up-box-cont .item .icon-box {position: absolute; left: var(--gap-40); bottom: var(--gap-32); font-size: 0; display: flex; width: 48px; height: 48px; border-radius: 50%; justify-content: center; align-items: center;}
.business .up-box .up-box-cont .item .icon-box span {} 

.business .up-box .up-box-cont .item:nth-child(1) {transition-delay: 0s;}
.business .up-box .up-box-cont .item:nth-child(2) {transition-delay: 0.15s;}
.business .up-box .up-box-cont .item:nth-child(3) {transition-delay: 0.3s;}
.business .up-box .up-box-cont .item:nth-child(4) {transition-delay: 0.45s;}
.business .up-box .up-box-cont .item:nth-child(5) {transition-delay: 0.6s;}
.business .up-box .up-box-cont .item:nth-child(6) {transition-delay: 0.75s;}
.business .up-box.active .up-box-cont .item {opacity: 1; transform: translateY(0);}

.business .bnr-box {margin-top: var(--gap-200);}
.business .bnr-box .box-cont {display: flex; align-items: stretch;}
.business .bnr-box .box-cont > div {border-radius: var(--gap-40); overflow: hidden; height: 440px;}
.business .bnr-box .box-cont .img-box {border-top-right-radius: 0;  width: 61%; background-position: center; background-repeat: no-repeat; background-size: cover;}
.business .bnr-box .box-cont .text-box {border-top-left-radius: 0; width: 39%; color: #F6F5EF;}
.business .bnr-box .box-cont .text-box .inbox {padding: var(--gap-40) calc(var(--gap-32)*1.75); height: 100%;}
.business .bnr-box .box-cont .text-box .tit {font-size: var(--font-32); font-weight: 800; margin-bottom: 1em;}
.business .bnr-box .box-cont .text-box .txt {font-size: var(--font-18); font-weight: 700;}
.business .bnr-box .box-cont .text-box li + li {margin-top: var(--gap-24);}
.business .bnr-box .box-cont .text-box .txt p {font-weight: normal; margin-top: var(--gap-8);}
.business .bnr-box .box-cont .line-box {overflow: hidden;}
.business .bnr-box .box-cont .line-box span {display: block; transform: translateY(100%); transition-duration: 0.5s;}
.business .bnr-box .box-cont .txt .line-box span {transition-delay: 0.3s;}

.business .bnr-box.active .box-cont .line-box span {transform: translateY(0);}


.business.sub .cards-box {margin-top: var(--gap-200); margin-bottom: var(--gap-80);}
.business.sub .cards-box .title-box {margin-bottom: calc(var(--gap-32)*1.75);}
.business.sub .cards-box .title-box h2 {padding-top: 0;}

.business .cards-box .tab-menu {display: flex; justify-content: center; gap: var(--gap-8); }
.business .cards-box .tab-menu .tab-btn {width: 116px; height: 42px; border: 1px solid; border-radius: 21px; font-weight: 800; font-size: var(--font-16); display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; overflow: hidden;}
.business .cards-box .tab-menu .tab-btn::before {content:""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0; transition: 0.4s;}
.business .cards-box .tab-menu .tab-btn .link-box {opacity: 0.5; transition: 0.4s;}
.business .cards-box .tab-menu .tab-btn.btn1 {border-color: #FFE9BD; color: #4C2A00;}
.business .cards-box .tab-menu .tab-btn.btn1::before {background: #FFE9BD;}
.business .cards-box .tab-menu .tab-btn.btn2 {border-color: #FFCBAF; color: #572616;}
.business .cards-box .tab-menu .tab-btn.btn2::before {background: #FFCBAF;}
.business .cards-box .tab-menu .tab-btn.btn3 {border-color: #E0E597; color: #08483C;}
.business .cards-box .tab-menu .tab-btn.btn3::before {background: #E0E597;}
.business .cards-box .tab-menu .tab-btn.btn4 {border-color: #C8E4F3; color: #063650;}
.business .cards-box .tab-menu .tab-btn.btn4::before {background: #C8E4F3;}
.business .cards-box .tab-menu .tab-btn.btn5 {border-color: #C8CCF3; color: #1B2376;}
.business .cards-box .tab-menu .tab-btn.btn5::before {background: #C8CCF3;}

.business .cards-box .tab-menu .tab-btn.active .link-box {opacity: 1;}
.business .cards-box .tab-menu .tab-btn.active::before {opacity: 1;}

.business .cards-box .process-item {margin-top: var(--gap-32); position: relative; height: 500px;}
.business .cards-box .process-item li {position: absolute; left: 0; top: 0; width: 100%;}
.business .cards-box .process-item li:nth-child(2) {margin-top: calc(var(--gap-16)*1);}
.business .cards-box .process-item li:nth-child(3) {margin-top: calc(var(--gap-16)*2);}
.business .cards-box .process-item li:nth-child(4) {margin-top: calc(var(--gap-16)*3);}
.business .cards-box .process-item li:nth-child(5) {margin-top: calc(var(--gap-16)*4);}
.business .cards-box .process-item li:nth-child(6) {margin-top: calc(var(--gap-16)*5);}

.business .cards-box .process-item .item-box {border-radius: var(--gap-40); padding: 48px 72px; display: flex; justify-content: space-between;  transform-origin: top; transform: translateY(180%);}
.business .cards-box .process-item li:first-child .item-box {transform: translateY(0);}
.business .cards-box .process-item .item-box .img-box {width: 50%; max-width: 640px; height: 360px; flex-shrink: 0;}
.business .cards-box .process-item .item-box .img-box span {display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--gap-16);}
.business .cards-box .process-item .item-box .img-box span img {width: 100%; height: 100%; object-fit: cover; }
.business .cards-box .process-item .item-box.bg-beige2 .txt-box {color: var(--sub-color);}
.business .cards-box .process-item .item-box.pink2 .txt-box {color: #572616;}
.business .cards-box .process-item .item-box.bg-ygreen .txt-box {color: var(--main-color);}
.business .cards-box .process-item .item-box.bg-sky .txt-box {color: #063650;}
.business .cards-box .process-item .item-box.bg-blue .txt-box {color: #070650;}

.business .cards-box .process-item .item-box .txt-box .step {margin-bottom: var(--gap-8); font-weight: 700; font-size: var(--font-16);}
.business .cards-box .process-item .item-box .txt-box .tit {font-weight: 800; font-size: var(--font-32); margin-bottom: 1em;}
.business .cards-box .process-item .item-box .txt-box p {font-weight: 700; font-size: var(--font-18);}
.business .cards-box .process-item .item-box .txt-box > span {font-size: var(--font-16); margin-top: 1em; display: block;}
.business .cards-box .process-item .item-box .txt-box .tel {background: rgba(192,164,130,0.2); font-size: var(--font-18); border-radius: var(--gap-8); padding: 0 var(--gap-16); display: flex; align-items: center; height: 45px; margin-top: var(--gap-16); font-weight: 800; width: fit-content;}
.business .cards-box .process-item .item-box .txt-box .btn-box {margin-top: var(--gap-80);}

@media screen and (max-width: 1280px){
  .business .up-box .up-box-cont .item p br {display: none;}

  .business .bnr-box .box-cont .text-box .inbox {padding: var(--gap-40);}
}
@media screen and (max-width: 1024px){
  .business .up-box .up-box-cont .item {width: calc((100% - var(--gap-32))/2);}

  .business .bnr-box .box-cont {flex-direction: column;}
  .business .bnr-box .box-cont .img-box {width: 100%; border-radius: var(--gap-40); height: 280px;}
  .business .bnr-box .box-cont .text-box {width: 100%; border-radius: var(--gap-40); height: unset;}

  .business .cards-box .process-item .item-box {padding: var(--gap-40);}
}
@media screen and (max-width: 768px){
  .business .up-box .up-box-cont .item {width: 100%;}
  .business .up-box .up-box-cont .item .icon-box {left: unset; right: var(--gap-40);}

  .business .bnr-box .box-cont .img-box {height: 200px;}

  .business .cards-box .tab-menu {flex-wrap: wrap; }
  .business .cards-box .tab-menu .tab-btn {width: 90px; height: 38px;}
  .business .cards-box .process-item {height: 400px;}
  .business .cards-box .process-item .item-box {display: flex; flex-direction: column-reverse; gap: 12px;}
  .business .cards-box .process-item .item-box .img-box {height: calc(var(--vh)*15); width: 100%;}
  .business .cards-box .process-item .item-box .txt-box .btn-box {margin-top: var(--gap-32);}
}
@media screen and (max-width: 480px) {
  .business .up-box .up-box-cont .item .icon-box {width: 32px; height: 32px;}
  .business .up-box .up-box-cont .item .icon-box img {width: 22px;}

  .business.sub .cards-box .title-box {margin-bottom: 1.5em;}
  .business .cards-box .process-item {height: 280px;}
}
/* e:business */

/* s:food */
.food.sub .sub-title .ani-title .text-box {max-width: 1120px;}
.food.sub .sub-title .ani-title {background-image: url(/img/cont/food1_visual_img.jpg);}

.food.sub .sec01 {}
.food.sub .sec01 .title-box {display: flex; justify-content: space-between;}
.food.sub .sec01 .title-box h2 {padding-top: 0; text-align: left; transform: translateY(50%); opacity: 0; transition: 0.4s;}
.food.sub .sec01 .title-box p {max-width: 720px; font-weight: 700; color: var(--main-color); transform: translateY(50%); opacity: 0; transition: 0.4s 0.3s;}

.food.sub .sec01.active .title-box h2 {opacity: 1; transform: translateY(0);}
.food.sub .sec01.active .title-box p {opacity: 1; transform: translateY(0);}

.food .sec01 .sec01-cont {display: flex; gap: var(--gap-24); margin-top: calc(var(--gap-80)*2); }
.food .sec01 .sec01-cont .item {flex: 1 1 0; position: relative; padding: var(--gap-40) calc(var(--gap-24)*2); padding-bottom: calc(var(--gap-16)*3.5); border-radius: var(--gap-24); transition: 0.5s cubic-bezier(.19,1,.22,1);}
.food .sec01 .sec01-cont .item .tag {color: var(--sub-color); border-radius: 4px; width: 53px; height: 37px; line-height: 1; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: var(--font-18); position: absolute; top: -16px; right: var(--gap-32); transform: rotate(15deg); transition: 0.3s;} 
.food .sec01 .sec01-cont .item .icon-box {font-size: 0; width: 128px; position: absolute; right: calc(var(--gap-24)*2); bottom: calc(var(--gap-24)*2); opacity: 0; transition: 0.1s;}
.food .sec01 .sec01-cont .item .icon-box img {max-width: 100%;}
.food .sec01 .sec01-cont .item .text-box {color: var(--sub-color); min-width: 300px;}
.food .sec01 .sec01-cont .item .text-box .tit {font-size: var(--font-24); font-weight: 800; margin-bottom: var(--gap-40);}
.food .sec01 .sec01-cont .item .text-box li {font-size: var(--font-18); font-weight: 700;}
.food .sec01 .sec01-cont .item .text-box li + li {margin-top: var(--gap-16);}

.food .sec01 .sec01-cont .item01 {background-color: #FFDECC;}
.food .sec01 .sec01-cont .item01 .tag {background-color: #FFB289;}
.food .sec01 .sec01-cont .item02 {background-color: #E6E9BF;}
.food .sec01 .sec01-cont .item02 .tag {background-color: #C8D98E;}
.food .sec01 .sec01-cont .item03 {background-color: #F8E6C3;}
.food .sec01 .sec01-cont .item03 .tag {background-color: #FFDF6F;}

.food .sec01 .sec01-cont .item.active {flex:1.7 1 0;}
.food .sec01 .sec01-cont .item.active .tag {transform: rotate(-15deg); }
.food .sec01 .sec01-cont .item.active .icon-box {opacity: 1; transition: 0.3s 0.3s;}


.food.sub .sec02 {margin-top: var(--gap-200); position: relative; }
.food.sub .sec02 .title-box {display: flex; justify-content: space-between; margin-bottom: var(--gap-40);}
.food.sub .sec02 .title-box h2 { text-align: left;}
.food.sub .sec02 .title-box h2::before {background-image: url(/img/main/title_obj_06.svg);left: 0;}

.food .sec02 .sec02-wrap {max-width: 1440px; margin: auto; padding-top: 120px; width: 90%;}
.food .sec02 .bg {width: 100%; height: var(--nvh); background: #E6E9BF; border-radius: var(--gap-80); position: absolute; left: 0; top: 0;}
.food .sec02 .sec02-cont { display: flex; justify-content: space-between; position: relative; z-index: 1; gap: var(--gap-80);}
.food .sec02 .sec02-cont .text-item {height: 720px; display: flex; align-items: center; color: var(--main-color);}
.food .sec02 .sec02-cont .text-item .tit {font-weight: 800; font-size: var(--font-24); margin-bottom: 2em;}
.food .sec02 .sec02-cont .text-item li {font-weight: 700; font-size: var(--font-20); }
.food .sec02 .sec02-cont .text-item li + li {margin-top: var(--gap-24); }

.food .sec02 .sec02-cont .img-part {max-width: 640px; width: 50%; font-size: 0;}
.food .sec02 .sec02-cont .img-area {}
.food .sec02 .sec02-cont .slide-box {width: 100%;}
.food .sec02 .sec02-cont .slide-item {width: 100%;}
.food .sec02 .sec02-cont .slide-item span {position: relative; display: block; width: 100%; padding-top: 112.5%; border-radius: var(--gap-24); overflow: hidden; }
.food .sec02 .sec02-cont .slide-item span img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;}

.food .up-box .up-box-cont .item .inbox {height: 280px;}

.food .bnr-box .box-cont .img-box {background-image: url(/img/cont/food_sec04_img.jpg);}
.food .bnr-box .box-cont .text-box .inbox {background: var(--sub-color);}


@media screen and (max-width: 1500px) {
  .food .sec01 .sec01-cont .item {padding: var(--gap-40);}
  .food .sec01 .sec01-cont .item .text-box {min-width: unset; }
  .food .sec01 .sec01-cont .item .text-box br {display: none;}
  .food .sec01 .sec01-cont .item .icon-box {width: 70px; right: var(--gap-40); bottom: var(--gap-40); }
}
@media screen and (max-width: 1280px){
  
}
@media screen and (max-width: 1024px) {
  .food .sec01 .sec01-cont {flex-wrap: wrap;}
  .food .sec01 .sec01-cont .item {width: 100%; flex: unset;}
  .food .sec01 .sec01-cont .item.active {flex: unset;}

  .food .up-box .up-box-cont .item .inbox  {height: 250px;}
}

@media screen and (max-width: 768px) {
  .food.sub .sec01 .title-box {flex-direction: column; gap: 24px;}
  .food .sec01 .sec01-cont {margin-top: 0;}
  .food .sec01 .sec01-cont .item {opacity: 0; transform: translateY(50%); transition-duration: 0.5s;}
  .food .sec01 .sec01-cont .item:nth-child(1) {transition-delay: 0.5s;}
  .food .sec01 .sec01-cont .item:nth-child(2) {transition-delay: 0.7s;}
  .food .sec01 .sec01-cont .item:nth-child(3) {transition-delay: 0.9s;}
  .food .sec01.active .sec01-cont .item {opacity: 1; transform: translateY(0);}
  .food .sec01 .sec01-cont .item .text-box {width: calc(100% - 80px);}
  .food .sec01 .sec01-cont .item .icon-box {opacity: 1;}

  .food .sec02 .bg {height: 100%;}
  .food .sec02 .sec02-wrap {padding: var(--gap-120) 0; max-width: 500px; width: 85%;}
  .food .sec02 .sec02-cont .text-part {width: 100%;}
  .food .sec02 .sec02-cont .img-part {display: none;}
  .food .sec02 .sec02-cont .text-item {height: unset; width: 100%;}
  .food .sec02 .sec02-cont .text-item + .text-item {margin-top: var(--gap-80);}
  .food .sec02 .sec02-cont .text-item .tit {margin-bottom: 1em;}
  .food .sec02 .sec02-cont .text-item li + li {margin-top: 1em;}
  .food .sec02 .sec02-cont .text-item br {display: none;}

  .food .up-box .up-box-cont .item .inbox  {height: 180px;}

  /* .food.sub .sec02 {height: var(--nvh); display: flex; align-items: center;}
  .food .sec02 .sec02-wrap {padding-top: 0;}
  .food .sec02 .sec02-cont {flex-direction: column-reverse; gap: var(--gap-24);}
  .food .sec02 .sec02-cont .text-part {display: flex; overflow: hidden;}
  .food .sec02 .sec02-cont .text-item {width: 90vw; flex-shrink: 0; height: unset; justify-content: center;}
  .food .sec02 .sec02-cont .text-item .tit {margin-bottom: 1em;}
  .food .sec02 .sec02-cont .img-part {width: 100%; max-width: 100%;}
  .food .sec02 .sec02-cont .img-area {width: 260px; margin: auto;} */
  
}

@media screen and (max-width: 480px) {
  .food .up-box .up-box-cont .item .inbox  {height: 160px;}
}

/* e:food */

/* s:catering*/
.catering.sub .sub-title .ani-title .text-box {max-width: 1120px;}
.catering.sub .sub-title .ani-title {background-image: url(/img/cont/food2_visual_img.jpg);}

.catering.sub .sec01 .title-box {display: flex; justify-content: space-between; margin-bottom: var(--gap-160);}
.catering.sub .sec01 .title-box h2 {padding-top: 0; text-align: left;line-height: 1.6; opacity: 0; transform:translateY(50%); transition: 0.4s;}
.catering.sub .sec01 .title-box .txt-box {color: var(--main-color);max-width: 50%; font-weight: 700; font-size: var(--font-20); opacity: 0; transform: translateY(50%); transition: 0.3s 0.2s;}
.catering.sub .sec01 .title-box ul {margin-top: var(--gap-40);  font-weight: 700;}
.catering.sub .sec01 .title-box ul .tit {font-weight: 800;}
.catering.sub .sec01 .title-box ul li + li {margin-top: var(--gap-24);}

.catering .sec01-cont {display: flex;}
.catering .sec01-cont .item {width: calc(100%/3); position: relative;}
.catering .sec01-cont .item .circle-box {position: relative; width: 100%; padding-top: 100%;}
.catering .sec01-cont .item span {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-size: 0; /*border-radius: 50%;*/}
.catering .sec01-cont .item .box1 span img {clip-path: url(#path1); max-width: 100%;}
.catering .sec01-cont .item .box2 span img {clip-path: url(#path2); max-width: 100%;}
.catering .sec01-cont .item .box3 span img {clip-path: url(#path3); max-width: 100%;}

.catering .sec01-cont .item .svg-box {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.catering .sec01-cont .item .txt-box {position: absolute; left: 0; top: 50%; width: 100%; color: #fff; line-height: 1.6; font-size: var(--font-32); font-weight: 800; text-align: center; transform: translateY(0); opacity: 0; transition: 0.4s; padding: 0 12px;}

.catering.sub .sec01.active .title-box h2 {opacity: 1; transform: translateY(0);}
.catering.sub .sec01.active .title-box .txt-box {opacity: 1; transform: translateY(0);}
.catering .sec01-cont .item.active .txt-box {transform: translateY(-50%); opacity: 1;}


.catering .sec02 {margin-top: var(--gap-200);}
.catering.sub .sec02 .title-box {display: flex; justify-content: space-between; }
.catering.sub .sec02 .title-box h2 {text-align: left; padding-top: 0; opacity: 0; transform: translateY(50%); transition: 0.3s;}
.catering.sub .sec02 .title-box p {color: var(--main-color); font-size: var(--font-20); font-weight: 700; max-width: 50%; transform: translateY(50%); opacity: 0; transition: 0.3s 0.2s;}

.catering .sec02 .sticky-box {position: relative;}
.catering .sec02 .sticky-box li {position: sticky; top: 120px; left: 0; width: 100%; }
.catering .sec02 .sticky-box li + li {margin-top: var(--gap-80);}
.catering .sec02 .sticky-box li .item {border-radius: var(--gap-16); background: #F5F0E1; padding: var(--gap-32); display: flex; gap: var(--gap-40); }
.catering .sec02 .sticky-box li .item .text-box {padding: var(--gap-40) 56px; border-radius: var(--gap-16); background-color: #F8E6C3;  color: var(--sub-color); width: 34%; min-width: 420px; }
.catering .sec02 .sticky-box li .item .text-box .step {width: 100px; height: 34px; border-radius: var(--gap-8);background: var(--main-color); color: #F8E6C3; font-size: var(--font-16); font-weight: 800; line-height: 1; display: flex; justify-content: center; align-items: center;  margin-bottom: var(--gap-120);}
.catering .sec02 .sticky-box li .item .text-box .tit {font-size: var(--font-32); font-weight: 800; margin-bottom: var(--gap-24);}
.catering .sec02 .sticky-box li .item .text-box p {font-weight: 700; font-size: var(--gap-18);}
.catering .sec02 .sticky-box li .item .img-box {border-radius: var(--gap-18); height: 430px; width: 66%; font-size: 0; border-radius: var(--gap-16); overflow: hidden;}
.catering .sec02 .sticky-box li .item .img-box img {width: 100%; height: 100%; object-fit: cover;}

.catering.sub .sec02.active .title-box h2 {opacity: 1; transform: translateY(0);}
.catering.sub .sec02.active .title-box p {opacity: 1; transform: translateY(0);}

.catering .up-box .up-box-cont .item .inbox {height: 347px;}

.catering .sec04 {font-size: 160px; font-weight: 800; color: var(--main-color); line-height: 1.6; white-space: nowrap; margin-top: var(--gap-200); overflow: hidden;}
.catering .sec04 .em {-webkit-text-stroke-width:1px; -webkit-text-stroke-color:var(--main-color); -webkit-text-fill-color:transparent;}

.catering .sec05 {margin-top: var(--gap-80); overflow: hidden;}
.catering .sec05 .sec05-scroll-wrap {display: flex; align-items: center; width: fit-content;}
.catering .sec05 .title-box {flex-shrink: 0; color: var(--main-color); padding-right: var(--gap-160);}
.catering .sec05 .title-box h2 {text-align: left;}
.catering .sec05 .title-box h2::before {background-image: url(/img/main/title_obj_08.svg); left: 0;}
.catering .sec05 .title-box p {font-size: var(--font-24); font-weight: 800; margin-top: var(--gap-40);}
.catering .sec05 .title-box span {font-size: var(--font-16); margin-top: var(--gap-8);}

.catering .sec05 .sec05-cont {display: flex; gap: var(--gap-32);}
.catering .sec05 .sec05-cont .item {flex-shrink: 0; width: 640px; border-radius: var(--gap-24); overflow: hidden;} 
.catering .sec05 .sec05-cont .item .head {padding: var(--gap-40); color: var(--main-color); line-height: 1.6;}
.catering .sec05 .sec05-cont .item .head > span {font-size: var(--font-18); opacity: 0.6; font-weight: 700;}
.catering .sec05 .sec05-cont .item .head .tit {font-size: var(--font-24); font-weight: 800; margin-top: var(--gap-16); margin-bottom: var(--gap-8);}
.catering .sec05 .sec05-cont .item .head .tit span {font-weight: normal;}
.catering .sec05 .sec05-cont .item .img-box {width: 100%;border-radius: var(--gap-24); overflow: hidden; font-size: 0;}
.catering .sec05 .sec05-cont .item .img-box img {width: 100%;}

.catering .bnr-box .box-cont .img-box {background-image: url(/img/cont/catering_sec06_img.jpg);}
.catering .bnr-box .box-cont .text-box .inbox {background: var(--main-color);}



@media screen and (max-width: 1280px){
  .catering .sec04 {font-size: 120px;}

  .catering .sec05 .sec05-cont .item {width: 540px;}
}
@media screen and (max-width: 1024px) {
  .catering .sec02 .sticky-box li .item .text-box {padding: var(--gap-40);  min-width: 380px; }
  .catering .sec02 .sticky-box li .item .img-box {height: 360px;}

  .catering .up-box .up-box-cont .item .inbox {height: 325px;}

  .catering .sec04 {font-size: 80px;}

  .catering .sec05 .sec05-cont .item {width: 400px;}
}

@media screen and (max-width: 768px) {
  .catering.sub .sec01 .title-box {flex-direction: column; gap: var(--gap-32); margin-bottom: var(--gap-80);}
  .catering.sub .sec01 .title-box .txt-box {max-width: 100%;}
  .catering.sub .sec01 .title-box .txt-box br {display: none;}
  .catering .sec01-cont {flex-direction: column; align-items: center;}
  .catering .sec01-cont .item {width: 100%; max-width: 240px;}

  .catering.sub .sec02 .title-box {flex-direction: column; gap: var(--gap-32);}
  .catering.sub .sec02 .title-box p {max-width: 100%;}
  .catering.sub .sec02 .title-box p br {display: none;}

  .catering .sec02 .sticky-box li .item {flex-direction: column; gap: var(--gap-16);}
  .catering .sec02 .sticky-box li .item .text-box {width: 100%; min-width: unset;}
  .catering .sec02 .sticky-box li .item .text-box .step {margin-bottom: var(--gap-40);}
  .catering .sec02 .sticky-box li .item .img-box {width: 100%; height: 240px;}

  .catering .up-box .up-box-cont .item .inbox {height: 240px;}

  .catering .sec04 {font-size: 60px;}

  .catering .sec05 .sec05-scroll-wrap {flex-direction: column; width: 100%; align-items: start;}
  .catering .sec05 .sec05-cont {flex-direction: column; width: 100%;}
  .catering .sec05 .sec05-cont .item {width: 100%;}

  
}

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

  .catering .sec02 .sticky-box li .item .img-box {height: 140px;}
  .catering .sec02 .sticky-box li .item .text-box .step {width: 80px; height: 30px;}

  .catering .up-box .up-box-cont .item .inbox {height: 210px;}

  .catering .sec04 {font-size: 40px;}

}

/* e:catering */

/* s:food3 */

.franchise.sub .sub-title .ani-title .text-box {max-width: 960px;}
.franchise.sub .sub-title .ani-title {background-image: url(/img/cont/food3_visual_img.jpg);}


.franchise .sec01-wrap {max-width: 1920px; width: 100%; margin: auto; overflow: hidden;}
.franchise .sec01-list {}
.franchise .sec01-list .list-group {position: relative; width: 100%;  z-index: 5;}
.franchise .sec01-list .list-outer {clip-path:inset(5vw round var(--gap-40)); width: 100%; height: 100vh; transition: clip-path 0.4s; overflow: hidden;}
.franchise .sec01-list .list-group .list-item {width: 100%; height: 100vh;}
.franchise .sec01-list .list-group .list-item .item-box {width: 100%; height: 100vh; position: absolute; left: 0; top: 0; z-index: 0;}
.franchise .sec01-list .list-group .list-item .img-box {width: 100%; height: 100%; font-size: 0; transform: scale(1) translate3d(0,0,0); -webkit-transform: scale(1) translate3d(0,0,0); opacity: 0; transition: opacity 0.8s ease-in-out, transform 0.5s;}
.franchise .sec01-list .list-group .list-item .img-box img {width: 100%; height: 100%; object-fit: cover;}
.franchise .sec01-list .list-group .list-item .text-box {width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;}
.franchise .sec01-list .list-group .list-item .text-box p {color: #fff; font-weight: 800; font-size: var(--font-60); text-align: center; transform: translateY(50%); opacity: 0; max-width: 1261px; width: 90%;}

.franchise .sec01-list .list-outer.active {clip-path:inset(0px round 0px);}
/* .franchise .sec01-list .list-group .list-item.active .item-box {z-index: 1;} */
.franchise .sec01-list .list-group .list-item.active .img-box {opacity: 1; transform: scale(1.05) translate3d(0,0,0); -webkit-transform: scale(1.05) translate3d(0,0,0); transition: opacity 0.8s ease-in-out, transform 1.2s 0.2s ease-in-out;}
.franchise .sec01-list .list-group .list-item.active .text-box p {opacity: 1; transform: translateY(0); transition: 0.4s 0.5s;}


.franchise.sub .sec02 .title-box h2 {transform: translateY(50%); opacity: 0; transition: 0.4s;}
.franchise.sub .sec02 .title-box h2::before {left: 50%; transform: translateX(-50%); background-image: url(/img/main/title_obj_09.svg);}
.franchise .sec02 {margin-top: var(--gap-200); }
.franchise .sec02 .head-visual {width: 100%; font-size: 0;}
.franchise .sec02 .head-visual .img-box { --mask-percent:100%; mask:linear-gradient(#000 0 0),linear-gradient(to top right,#000 var(--mask-percent),rgba(0,0,0,0) 0) content-box; --webkit-mask:linear-gradient(#000 0 0),linear-gradient(to top right,#000 var(--mask-percent),rgba(0,0,0,0) 0) content-box; mask-composite:exclude; -webkit-mask-composite:exclude; }
.franchise .sec02 .head-visual img {width: 100%; }
.franchise .sec02 .sec02-cont {margin-top: calc((var(--gap-32) + var(--gap-16))*-1); padding-bottom: var(--gap-120); background: url(/img/cont/franchise_sec02_bg.jpg) center bottom no-repeat; background-size: 95%; }
.franchise .sec02 .sec02-cont .list-box {width: 100%; max-width: 400px; margin: auto;}
.franchise .sec02 .sec02-cont .list-box li + li {margin-top: var(--gap-16);}
.franchise .sec02 .sec02-cont .list-box .item {border-radius: var(--gap-16); background: #F8E6C3; position: relative; display: flex; align-items: center; color: var(--main-color); padding: var(--gap-8) var(--gap-24); gap: var(--gap-24); min-height: 64px; transform: translateY(50%); opacity: 0; transition-duration: 0.3s;}
.franchise .sec02 .sec02-cont .list-box .item .num {font-weight: 800; font-size: var(--font-14); color: rgba(8,72,60,0.8); width: 32px; height: 32px; line-height: 30px; border: 1px solid rgba(8,72,60,0.6); border-radius: 50%; text-align: center;}
.franchise .sec02 .sec02-cont .list-box .item p {font-weight: 700; font-size: var(--font-20); }

.franchise .sec02 .sec02-cont .list-box li:nth-child(1) .item {transition-delay: 0.2s;}
.franchise .sec02 .sec02-cont .list-box li:nth-child(2) .item {transition-delay: 0.4s;}
.franchise .sec02 .sec02-cont .list-box li:nth-child(3) .item {transition-delay: 0.6s;}

.franchise.sub .sec02 .sec02-cont.active .title-box h2 {transform: translateY(0); opacity: 1;}
.franchise .sec02 .sec02-cont.active .list-box .item {transform: translateY(0); opacity: 1;}


.franchise .sec03 {margin-top: var(--gap-80);}
.franchise .sec03 .title-box h2 {opacity: 0; transform: translateY(50%); transition: 0.4s;}
.franchise .sec03 .title-box h2::before {left: 50%; transform: translateX(-50%); background-image: url(/img/main/title_obj_10.svg);}
.franchise .sec03 .sec03-cont .flex-box {display: flex; gap: calc(var(--gap-24)*2);}
.franchise .sec03 .sec03-cont .flex-box .item {padding: var(--gap-40); border-radius: var(--gap-24); flex: 1 1 0; transform: translateY(50%); opacity: 0; transition-duration: 0.4s; display: flex; flex-direction: column; justify-content: space-between;}
.franchise .sec03 .sec03-cont .flex-box .item:nth-child(1) {transition-delay: 0.2s;}
.franchise .sec03 .sec03-cont .flex-box .item:nth-child(2) {transition-delay: 0.4s;}
.franchise .sec03 .sec03-cont .flex-box .item:nth-child(3) {transition-delay: 0.6s;}

.franchise .sec03 .sec03-cont .flex-box .item.bg-pink .text-box {color: #572616;}
.franchise .sec03 .sec03-cont .flex-box .item.bg-lgreen .text-box {color: var(--main-color);}
.franchise .sec03 .sec03-cont .flex-box .item.bg-beige .text-box {color: var(--sub-color);}
.franchise .sec03 .sec03-cont .flex-box .item .text-box .tit {font-size: var(--font-24); font-weight: 800;}
.franchise .sec03 .sec03-cont .flex-box .item .text-box p {font-size: var(--font-20); font-weight: 700; margin-top: var(--gap-8);}
.franchise .sec03 .sec03-cont .flex-box .item .img-box {width: 100%; font-size: 0; margin-top: var(--gap-32);}
.franchise .sec03 .sec03-cont .flex-box .item .img-box img {max-width: 100%;}

.franchise .sec03 .sec03-cont .info-box {margin-top: var(--gap-40); border-radius: var(--gap-24); background: #F5F0E1; padding: 0 5%;  height: 80px; display: flex; align-items: center; justify-content: center; transform: translateY(50%); opacity: 0; transition: 0.4s 0.8s;}
.franchise .sec03 .sec03-cont .info-box p {color: var(--main-color); font-size: var(--font-18); font-weight: 700; }

.franchise .sec03.active .title-box h2 {opacity: 1; transform: translateY(0);}
.franchise .sec03.active .sec03-cont .flex-box .item {opacity: 1; transform: translateY(0);}
.franchise .sec03.active .sec03-cont .info-box {opacity: 1; transform: translateY(0);}

.franchise .sec04 {margin-top: var(--gap-200);}
.franchise.sub .sec04 .title-box h2 {text-align: left; margin-bottom: 0;}
.franchise.sub .sec04 .title-box h2::before {left: 0; background-image: url(/img/main/title_obj_11.svg);}
.franchise .sec04-cont { display: flex; align-items: stretch; justify-content: space-between; column-gap: var(--gap-80);}
.franchise .sec04-cont .tit-box { position: relative;}
.franchise .sec04-cont .tit-box .title-box {position: sticky; left: 0; top: calc(var(--headerH) + 20px);}
.franchise .sec04-cont .cont-box {width: 50%; min-width: 500px;}
.franchise .sec04-cont .list-box .item {display: flex; align-items: center; gap: calc(var(--gap-24)*2);}
.franchise .sec04-cont .list-box .item + .item {margin-top: calc(var(--gap-32)*2);}
.franchise .sec04-cont .list-box .item .icon-box {width: 160px; height: 160px; border-radius: var(--gap-16); display: flex; align-items: center; justify-content: center; font-size: 0; flex-shrink: 0; }
.franchise .sec04-cont .list-box .item .text-box {color: var(--main-color);}
.franchise .sec04-cont .list-box .item .text-box span {font-size: var(--font-16); font-weight: 800; opacity: 0.6;}
.franchise .sec04-cont .list-box .item .text-box p {margin-top: var(--gap-16); font-weight: 700; font-size: var(--font-18);}


@media screen and (min-width: 1921px){
  .franchise .sec01-list .list-outer {clip-path:inset(80px round var(--gap-40));}
}
@media screen and (max-width: 1260px){
  .franchise .sec04-cont .list-box .item .icon-box {width: 120px; height: 120px;}
  .franchise .sec04-cont .list-box .item .icon-box img {width: 60px;}
}
@media screen and (max-width: 1024px) {
  .franchise .sec03 .sec03-cont .flex-box {gap: var(--gap-32);}

  .franchise .sec04-cont {flex-direction: column;}
  .franchise .sec04-cont .cont-box {width: 100%; min-width: unset;}
  .franchise .sec04-cont .list-box {display: flex; gap: var(--gap-24); flex-wrap:wrap;}
  .franchise .sec04-cont .list-box .item {width: calc((100% - var(--gap-24))/2); gap: var(--gap-32);}
  .franchise .sec04-cont .list-box .item + .item {margin-top: 0;}
  .franchise .sec04-cont .list-box .item .icon-box {width: 100px; height: 100px;}
  .franchise .sec04-cont .list-box .item .icon-box img {width: 45px;}
  .franchise .sec04-cont .list-box .item .text-box p br {display: none;}
}

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

  .franchise .sec02 .sec02-cont {margin-top: calc(var(--gap-32)*-1);}

  .franchise .sec03 .sec03-cont .flex-box {flex-direction: column; }
  .franchise .sec03 .sec03-cont .flex-box .item {flex-direction: row; }
  .franchise .sec03 .sec03-cont .flex-box .item .img-box {width: 160px;}

  .franchise .sec04-cont .list-box .item {width: 100%;}
}

@media screen and (max-width: 480px) {
  .franchise .sec02 .sec02-cont {margin-top: 0;}

  .franchise .sec04-cont .list-box .item .icon-box {width: 80px; height: 80px;}
}

/* e:food3 */


/* s:공지사항 */
.notice .notice-list {opacity: 0; transition: 0.5s 0.7s;}
.notice .notice-detail {opacity: 0; transition: 0.5s 0.3s;}

.sub.notice .sub-title.ani2 {opacity: 0; transform: translateY(-10%); transition: 0.5s;}
.sub.notice .sub-title.ani2 .txt + .tit {margin-top: var(--gap-24);}
.sub.notice .sub-title.ani2 .tit {font-size: var(--font-32);}

.sub.notice .sub-title.ani1.active + .notice-list {opacity: 1; transform: translateY(0);}
.sub.notice .sub-title.ani2.active {opacity: 1; transform: translateY(0); margin-bottom: calc(var(--gap-80)*0.8);}
.sub.notice .sub-title.ani2.active + .notice-detail {opacity: 1; transform: translateY(0);}

.notice .notice-list .cont-top {margin-bottom: var(--gap-32); }

.notice .notice-list .list { text-align: left;  }
.notice .notice-list .list .tr {width: 100%;  border-radius: 40px; overflow: hidden; opacity: 0; transform: translateY(50%); transition: 0.4s ease-out; }
.notice .notice-list .list .tr a {display: flex; gap: var(--gap-80); padding: var(--gap-24) var(--gap-40); align-items: center; background: #F5F0E1; transition: background-color 0.4s;}
.notice .notice-list .list .td {font-size: var(--font-18); font-weight: 700; color: var(--main-color);}
.notice .notice-list .list .td.num {width: 64px; flex-shrink: 0;}
.notice .notice-list .list .td.subject {font-weight: 800; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice .notice-list .list .td.date {text-align: right; flex-shrink: 0; width: 120px; font-size: var(--font-16);}
.notice .notice-list .list .tr.active {opacity: 1; transform: translateY(0);}
.notice .notice-list .list .tr + .tr {margin-top: var(--gap-16); }
.notice .notice-list .list .tr:hover a {background: #E6E9BF;}

.notice .notice-detail .detail {padding: calc(var(--gap-32)*1.5) calc(var(--gap-32)*1.75); border-radius: var(--gap-40); background: #F5F0E1; font-size: var(--font-18); color: #08483C; }
.notice .notice-detail .detail span {font-weight: 700; line-height: 1.8;}
.notice .notice-detail .detail img {max-width: 840px; width: 90% !important; display: block; margin: auto;}
.notice .notice-detail .attach-box {margin-top: var(--gap-24); background: #fff; border-radius: var(--gap-40); }
.notice .notice-detail .attach-box .attach-wrap {padding: var(--gap-32) calc(var(--gap-32)*1.75); display: flex; gap: var(--gap-40); color: var(--main-color);}
.notice .notice-detail .attach-box .attach-wrap .tit {font-weight: 700;  font-size: var(--font-18); flex-shrink: 0; }
.notice .notice-detail .attach-box .attach-wrap .list li + li {margin-top: var(--gap-8);}
.notice .notice-detail .attach-box .attach-wrap .list a {font-size: var(--font-16); color: var(--main-color); text-decoration-color: var(--main-color); }
.notice .notice-detail .attach-box .attach-wrap .list a font {color: inherit !important;}
.notice .notice-detail .attach-box .attach-wrap .list a:hover {text-decoration: underline; text-underline-position: under; }
.notice .notice-detail .attach-box .attach-wrap .list a img {display: none;}
.notice .notice-detail .button-box {width: fit-content; margin: calc(var(--gap-32)*1.5) auto 0;}

@media screen and (max-width: 1024px) {
  .notice .notice-list .list .tr a {gap: var(--gap-24);}
}
@media screen and (max-width: 768px) {
  .notice .notice-list .list .tr {border-radius: 12px;}
  .notice .notice-list .list .tr a {flex-direction: column; align-items: start; gap: 12px;}
  .notice .notice-list .list .td.num {display: none;}
  .notice .notice-list .list .td.subject {white-space: wrap; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
  .notice .notice-list .list .td.date {width: 100%;}

  .notice .notice-detail .detail img {width: 100% !important;}
}
@media screen and (max-width: 768px) {
  .notice .notice-detail .detail {padding: var(--gap-32);}
  .notice .notice-detail .attach-box .attach-wrap {padding: var(--gap-32); flex-direction: column; gap: var(--gap-16);}
}
/* e:공지사항 */

/* s:faq */
.sub.faq .sub-title .tag-box .tag1.selected a {background-color: #fff; border-color: #fff; color: var(--main-color);}
.sub.faq .sub-title .tag-box .tag2.selected a {background-color: #E6E9BF; border-color: #E6E9BF; color: var(--main-color);}
.sub.faq .sub-title .tag-box .tag3.selected a {background-color: #F8E6C3; border-color: #F8E6C3;  color: var(--sub-color);}
.sub.faq .sub-title .tag-box .tag4.selected a {background-color: #FFDECC; border-color: #FFDECC;  color: var(--sub-color);}

.faq .faq-cont {opacity: 0; transition: 0.5s 0.7s;}
.sub.faq .sub-title.ani1.active + .faq-cont {opacity: 1; transform: translateY(0);}

.faq .faq-cont .cont-top {margin-bottom: var(--gap-32); }
.faq .faq-cont .list {display: flex; gap: 48px; }
.faq .faq-cont .list .left-box {width: 42%; flex-shrink: 0; max-width: 600px;}
.faq .faq-cont .list .left-box .img-box {width: 100%; font-size: 0; position: sticky; left: 0; top: calc(var(--headerH) + 10px); }
.faq .faq-cont .list .left-box .img-box span {display: block; width: 100%; border-radius: var(--gap-40); overflow: hidden; max-height: calc(var(--nvh) - var(--headerH) - 20px);}
.faq .faq-cont .list .left-box .img-box img {width: 100%; max-height: 100%; object-fit: cover;}
.faq .faq-cont .list .right-box {width: 100%;}

.faq .faq-cont .list .faq-item {background: #F5F0E1; border-radius: 45px; }
.faq .faq-cont .list .faq-item .f-body img {max-width: 632px;}

.faq .faq-cont .list .faq-item.open .f-head span {-webkit-line-clamp:4; max-height: calc(var(--font-18)*1.6*4);}
.faq .faq-cont .list .faq-item.open .f-head .btn::after {transform: translate(-50%,-50%);}
@media screen and (max-width: 1024px) {
  .faq .faq-cont .list {gap: 32px;}
}
@media screen and (max-width: 768px) {
  .faq .faq-cont .list .left-box {display: none;}
  .faq .faq-cont .list .faq-item .f-head .btn {width: 32px; height: 32px;}
}
@media screen and (max-width: 480px) {
  .faq .faq-cont .list .faq-item {border-radius: 31px;}
}
/* e:faq */

/* s:inquiry */
.inquiry .ds-box {display: flex; gap: var(--gap-80); max-width: 1280px; width: 90%; margin: auto; align-items: stretch;}

.inquiry .ds-box .sub-title {text-align: left; width: 37.5%; max-width: 480px; flex-shrink: 0; display: flex; flex-direction: column; margin-bottom: 0; gap: var(--gap-80);}
.inquiry .ds-box .inquiry-form {width: 100%; opacity: 0; transition: 0.5s 0.7s ease-in-out;}

.inquiry .sub-title > span {flex-shrink: 0;}
.inquiry .sub-title .img-area {font-size: 0; height: 100%;}
.inquiry .sub-title .img-area .img-box {border-radius: var(--gap-24); overflow: hidden; position: sticky; top: calc(var(--headerH) + 50px); left: 0; opacity: 0; transform: translateY(10%); transition: 0.5s 0.5s ease-in-out;}
.inquiry .sub-title .img-area .img-box img {max-width: 100%;}

.inquiry .sub-title.active .img-area .img-box {opacity: 1; transform: translateY(0);}
.inquiry .ds-box .sub-title.active + .inquiry-form {opacity: 1;}

.inquiry .inquiry-form .form-wrap {width: 100%; border-radius: var(--gap-24); background: var(--main-color); padding: calc(var(--gap-32)*1.5) calc(var(--gap-32)*1.75);}
.inquiry .inquiry-form .form-wrap span.required {font-weight: 800; font-size: var(--font-20);}
.inquiry .inquiry-form .form-wrap span.required::before {content:"*"; color: #FCC800; }
.inquiry .inquiry-form .form-wrap .form-tr {margin-bottom: var(--gap-32); }
.inquiry .inquiry-form .form-wrap .form-tr .form-tit {color: #F6F5EF; font-size: var(--font-20); font-weight: 800; margin-bottom: var(--gap-8);}
.inquiry .inquiry-form .form-wrap .form-tr .form-box {font-size: var(--font-18); color: var(--main-color); font-weight: 700;}
.inquiry .inquiry-form .form-wrap .form-tr .form-box + .form-box {margin-top: 10px;}
.inquiry .inquiry-form .form-wrap .form-tr .info-text {font-weight: 700; font-size: var(--font-16); color: #77987D; display: block; margin-top: var(--gap-8);}

.inquiry .inquiry-form .input-box {width: 100%; background: #F6F5EF; border-radius: 8px; overflow: hidden; height: 61px;}
.inquiry .inquiry-form .input-box input {appearance: none; border: none; width: 100%; height: 100%; font-size: inherit; color: inherit; padding: 0 var(--gap-24); font-weight: inherit; background: #F6F5EF;}
.inquiry .inquiry-form .input-box input::placeholder {color: rgba(8,72,60,0.5); }

.inquiry .inquiry-form textarea {appearance: none; border: none; font-size: inherit; color: inherit; font-weight: inherit; padding: var(--gap-16) var(--gap-24); border-radius: var(--gap-8); background: #F6F5EF; width: 100%; min-height: 148px; resize: vertical; display: block;}
.inquiry .inquiry-form textarea::placeholder {color: rgba(8,72,60,0.5); }

.inquiry .inquiry-form .select-box {width: 100%; max-width: 324px; position: relative; color: var(--main-color);}
.inquiry .inquiry-form .select-box select {position: absolute; left: 0; top: 0; z-index: -1; width: 1px; height: 1px; overflow: hidden; opacity: 0;}
.inquiry .inquiry-form .select-box .select-tit {width: 100%; border-radius: var(--gap-8); background: #F6F5EF; height: 61px; padding: 0 var(--gap-24); display: flex; align-items: center; font-size: var(--font-18); font-weight: 700; position: relative; cursor: pointer;}
.inquiry .inquiry-form .select-box .select-tit::before {content:""; width: 9px; height: 9px; border: solid var(--main-color); position: absolute; right: var(--gap-24); top: 23px; transform: rotate(45deg); border-width: 0 2px 2px 0; transition: 0.3s;}
.inquiry .inquiry-form .select-box .select-tit.active:before {transform: rotate(-135deg); top: 28px;}
.inquiry .inquiry-form .select-box .option-box {width: 100%; position: absolute; left: 0; bottom: -8px; transform: translateY(100%); border-radius: var(--gap-8); background: #F6F5EF; overflow: hidden; display: none; z-index: 1;}
.inquiry .inquiry-form .select-box .option-box ul {padding: 12px 0;}
.inquiry .inquiry-form .select-box .option-box ul li {font-weight: 700; font-size: var(--font-16); padding: 0 var(--gap-24); line-height: 2.125; cursor: pointer; }
.inquiry .inquiry-form .select-box .option-box ul li.hide {height: 0; width: 0; overflow: hidden; opacity: 0;}
/*.inquiry .inquiry-form .select-box .option-box ul li:hover,*/
.inquiry .inquiry-form .select-box .option-box ul li.checked {background-color: #F8E6C3;}

.inquiry .inquiry-form .check-box {padding-top: var(--gap-8); display: flex; gap: 1em var(--gap-40); flex-wrap:wrap; }
.inquiry .inquiry-form .check-box label {position: relative; font-size: inherit; color: #fff; display: flex; align-items: center; gap: var(--gap-16); cursor: pointer;}
.inquiry .inquiry-form .check-box input {width: 1px; height: 1px; overflow: hidden; position: absolute; left: 0; top: 0; opacity: 0;}
.inquiry .inquiry-form .check-box label .chk-box {width: 32px; height: 32px; border-radius: var(--gap-8); background: #F6F5EF; position: relative;}
.inquiry .inquiry-form .check-box label .chk-box::before {content:""; width: 7px; height: 15px; border: solid var(--main-color); border-width: 0 2px 2px 0px; position: absolute; left: 12px; top: 6px; transform: rotate(45deg); opacity: 0;}
.inquiry .inquiry-form .check-box label input:checked + .chk-box {background: #F8E6C3;}
.inquiry .inquiry-form .check-box label input:checked + .chk-box::before { opacity: 1;}

.inquiry .inquiry-form .price-box {display: flex; align-items: center; gap: var(--gap-16); }
.inquiry .inquiry-form .price-box .txt {color: #F8E6C3; flex-shrink: 0;}
.inquiry .inquiry-form .price-box .input-box {max-width: 324px;}

.inquiry .inquiry-form .attach-box {display: flex; gap: var(--gap-16);}
.inquiry .inquiry-form .attach-box .file-name {height: 61px; background: #F6F5EF; border-radius: 8px; width: 100%; padding: 0 var(--gap-24); line-height: 61px; }
.inquiry .inquiry-form .attach-box .file-btn {width: 101px; flex-shrink: 0;position: relative;}
.inquiry .inquiry-form .attach-box .file-btn a {height: 61px; background: #F8E6C3; border-radius: 8px; justify-content: center; color: var(--main-color); font-weight: 700;}
.inquiry .inquiry-form .attach-box .file-btn input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1;}

.inquiry .inquiry-form .safy-box {display: flex; align-items: center; gap: var(--gap-16);}
.inquiry .inquiry-form .safy-box .secure-box {width: 166px; height: 61px; flex-shrink: 0;}
.inquiry .inquiry-form .safy-box .secure-box img {max-width: 100%; max-height: 100%;}
.inquiry .inquiry-form .safy-box .input-box {max-width: 208px;}

.inquiry .inquiry-form .privacy-box {display: flex; gap: var(--gap-16); align-items: center; flex-wrap: wrap;}
.inquiry .inquiry-form .privacy-box .check-box {padding-top: 0;}
.inquiry .inquiry-form .privacy-box a {color: #FCC800; font-size: var(--font-18); font-weight: 700;}

.inquiry .inquiry-form .button-box {width: 100%;}
.inquiry .inquiry-form .button-box a {height: 64px; background: #F8E6C3; border-radius: var(--gap-8); color: var(--main-color); font-weight: 800; font-size: var(--font-20); justify-content: center; width: 100%;}

/* 보안문자 새로고침 */
#btn_captcha {display: block; margin-top: 8px; width: 32px; height: 32px; background-color: #F8E6C3; background-image: url(/img/com/icon_arr_reset.svg); background-position: center; background-repeat: no-repeat; border-radius: 8px; font-size: 1px; color: transparent; }


.inquiry .modal-popup {max-width: 560px; width: 90%;}
.inquiry .modal-popup .modal-wrap {background: #F6F5EF; border-radius: var(--gap-24); overflow: hidden; position: relative; }
.inquiry .modal-popup .close-btn {width: 32px; height: 32px; position: absolute; right: var(--gap-32); top: var(--gap-32); z-index: 1;}
.inquiry .modal-popup .close-btn::before,
.inquiry .modal-popup .close-btn::after {content:""; background: var(--sub-color); width: 80%; height: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); border-radius: 2px;}
.inquiry .modal-popup .close-btn::after {transform: translate(-50%,-50%) rotate(-45deg);}
.inquiry .modal-popup .modal-cont {color: var(--sub-color); line-height: 1.6; padding: 64px calc(var(--gap-24)*2); max-height: calc(var(--vh)*80); overflow: auto;}
.inquiry .modal-popup .modal-cont .head {text-align: center; font-size: var(--font-24); font-weight: 800; margin-bottom: var(--gap-40);}
.inquiry .modal-popup .modal-cont .txt {font-size: var(--font-18); font-weight: 800; margin-bottom: var(--gap-24);}
.inquiry .modal-popup .modal-cont dl {font-size: var(--font-16); }
.inquiry .modal-popup .modal-cont dl dt {margin-bottom: var(--gap-8); font-weight: 700;}
.inquiry .modal-popup .modal-cont dl dd + dt {margin-top: var(--gap-16); }
@media screen and (max-width: 1280px) {
  .inquiry .ds-box {gap: 40px;}
  .inquiry .inquiry-form .form-wrap {padding: var(--gap-32);}
}
@media screen and (max-width: 1024px) {
  .inquiry .ds-box {flex-direction: column;}
  .inquiry .ds-box .sub-title {flex-direction: row; width: 100%; max-width: unset; justify-content: space-between;}

  .inquiry .sub-title .img-area .img-box {width: fit-content; position: static; }
}
@media screen and (max-width: 768px){
  .inquiry .sub-title.active .img-area .img-box {display: none;}

  .inquiry .inquiry-form .select-box .select-tit {height: 48px;}
  .inquiry .inquiry-form .select-box .select-tit::before {top: 17px; width: 8px; height: 8px;}
  .inquiry .inquiry-form .select-box .select-tit.active::before {top: 22px;}
  .inquiry .inquiry-form .input-box {height: 48px;}
  .inquiry .inquiry-form .attach-box .file-name {height: 48px; line-height: 48px;}
  .inquiry .inquiry-form .attach-box .file-btn a {height: 48px;}
  .inquiry .inquiry-form .check-box label .chk-box {width: 24px; height: 24px; border-radius: 6px;}
  .inquiry .inquiry-form .check-box label .chk-box::before {width: 5px; height: 11px; left: 9px; top: 4px;}
  .inquiry .inquiry-form .button-box a {height: 51px;}

  .inquiry .inquiry-form .safy-box .secure-box {width: 131px; height: 48px;}

  .inquiry .modal-popup .close-btn {width: 26px; height: 26px; right: 12px; top: 12px; }
  .inquiry .modal-popup .close-btn::before,
  .inquiry .modal-popup .close-btn::after {height: 2px;}
  .inquiry .modal-popup .modal-cont {padding: 32px 24px; }

  #btn_captcha {width: 24px; height: 24px; border-radius: 6px; background-size: 80%;}
  
}
@media screen and (max-width: 480px) {
  .inquiry .inquiry-form .attach-box .file-btn {width: 82px;}

  .inquiry .inquiry-form .safy-box .secure-box {width: 115px;}
}
/* e:inquiry */

/* s:privacy */
.sub.privacy .sub-title {margin-bottom: var(--gap-40);}
.sub.privacy .sub-cont {opacity: 0; transition: 0.5s 0.3s;}

.sub.privacy .sub-title.ani2 {opacity: 0; transform: translateY(-10%); transition: 0.5s;}

.sub.privacy .sub-title.active {opacity: 1; transform: translateY(0);}
.sub.privacy .sub-title.active + .sub-cont {opacity: 1; }

.privacy .sub-cont .inner {max-width: 1080px;}
.privacy .privacy-wrap {color: var(--main-color);}
.privacy .privacy-wrap .head {font-weight: 700; font-size: var(--font-20); margin-bottom: var(--gap-80);}

.privacy .privacy-wrap .privacy-conts {font-size: var(--font-16); white-space: pre-wrap; line-height: 1.6;}
.privacy .privacy-wrap .privacy-conts .tit {font-weight: 700; font-size: var(--font-18); display: inline-block;}
.privacy .privacy-wrap .privacy-conts p {font-size: var(--font-18); display: inline-block;}
/* e:privacy */

/* story */
.story {}
.sub.story .sub-title .tag-box .tag1.selected a {background-color: #fff; border-color: #fff; color: var(--main-color);}
.sub.story .sub-title .tag-box .tag2.selected a {background-color: #E6E9BF; border-color: #E6E9BF; color: var(--main-color);}
.sub.story .sub-title .tag-box .tag3.selected a {background-color: #F8E6C3; border-color: #F8E6C3;  color: var(--sub-color);}
.sub.story .sub-title .tag-box .tag4.selected a {background-color: #FFDECC; border-color: #FFDECC;  color: var(--sub-color);}

.sub.story .sub-title + .story-cont {opacity: 0; transition: 0.5s 0.7s;}
.sub.story .sub-title.ani1.active + .story-cont {opacity: 1; }

.story .story-cont .cont-top {margin-bottom: var(--gap-32);}

.story .list ul li {transform: translateY(50%); opacity: 0;}
.story .list ul li + li {margin-top: var(--gap-16);}
.story .list ul li a {display: flex; gap: var(--gap-16); }
.story .list ul li .img-box {width: 200px; border-radius: var(--gap-24); overflow: hidden; flex-shrink: 0;}
.story .list ul li .img-box span { width: 100%; padding-top: 100%; position: relative; display: block; }
.story .list ul li .img-box span img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.story .list ul li .txt-box {border-radius: var(--gap-24); overflow: hidden; background: #F5F0E1; padding: calc(var(--gap-24)*2); color: var(--main-color); transition: 0.3s; }
.story .list ul li .txt-box .head {display: flex; align-items: center; justify-content: space-between; gap: var(--gap-8); margin-bottom: var(--gap-16);}
.story .list ul li .txt-box .head .tit {width: 100%; font-size: var(--font-20); font-weight: 800; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.story .list ul li .txt-box .head .date {font-size: var(--font-16); font-weight: 700; width: 200px; flex-shrink: 0; text-align: right;}
.story .list ul li .txt-box p {font-size: var(--font-18); width: calc(100% - 200px); display:-webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.story .list ul li:hover .txt-box {background-color: #E6E9BF;}

.story .list ul li.active {transform: translateY(0); opacity: 1; transition: 0.4s ease-out;}

@media screen and (max-width: 1024px) {
  .story .list ul li .img-box {width: 150px;}
  .story .list ul li .txt-box {padding: var(--gap-32);}
  .story .list ul li .txt-box .head .date {width: 120px;}
  .story .list ul li .txt-box p {width: calc(100% - 120px);}
}
@media screen and (max-width: 768px) {
  .story .list ul li .img-box {display: none;}
}

@media screen and (max-width: 480px) {
  .story .list ul li .txt-box .head .date {width: 84px;}
  .story .list ul li .txt-box p {width: 100%;}
}


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

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

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