@charset "utf-8";

div, p, span, b, strong, h1, h2, h3, h4, h5 {word-break: keep-all;}
img {max-width: 100%;}

.ko {
  font-family: 'TwaySky', dotum, sans-serif;
  font-weight: normal;
}
.title {
  margin-bottom: 40px;
  text-align: center;
}
.title .en {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 2px;
}
.title h2 {font-size: 55px;}
.title h2 span:not(.ko) {
  font-size: 30px;
  display: block;
  margin-top: 10px;
}
.desc {
  font-size: 18px;
  line-height: 1.6;
}
.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.c-btn {
  width: fit-content;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all .3s;
  background: #e55924;
}
.c-btn span {
  font-size: 16px;
  font-weight: 500;
  color: #fffbe8;
  padding-left: 30px;
  padding-right: 60px;
}
.c-btn .arrow {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,0.2);
  height: 100%;
}
.c-btn .arrow .st0 {
  fill: none;
  stroke: #fffbe8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2px;
}
.c-btn:hover {background: #412d26;}
.c-btn.white {background: #fffbe8;}
.c-btn.white span {color: #412d26;}
.c-btn.white .arrow {border-color: rgba(65,45,38,0.2)}
.c-btn.white .arrow .st0 {stroke: #412d26;}
.c-btn.white:hover {background: #412d26;}
.c-btn.white:hover span {color: #fffbe8;}
.c-btn.white:hover .arrow {border-color: rgba(255,255,255,0.2)}
.c-btn.white:hover .arrow .st0 {stroke: #fffbe8;}
.admin-btn {
  font-size: 20px;
  color: #e55924;
}

.top-bg {
  background: url(/img/assets/main_bg_dim.jpg) center / cover no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1920 / 416;
}
.top-bg img {
  width: 100%;
  aspect-ratio: 1920 / 316;
  position: absolute;
  left: 0;
  bottom: 0;
}
.bg-dim {background: url(/img/assets/main_bg_dim.jpg) center / cover no-repeat;}
.bg-lightorange {background: url(/img/assets/main_bg_lightorange.jpg) center / cover no-repeat;}
.bg-orange {background: url(/img/assets/main_bg_orange.jpg) center / cover no-repeat;}

.disclaimer {
  font-size: 16px;
  padding: 30px 15px !important;
  text-align: center;
}
.statement {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 100px;
}
.note {
  font-size: 16px;
  text-align: center;
  margin-top: 30px;
  opacity: 0.8;
}
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #e55924;
  border-radius: 30px;
  width: fit-content;
  padding: 0 10px;
  margin: 0 auto;
}
.tab-wrap li {position: relative;}
.tab-wrap li::after {
  content: "";
  background: #fffbe8;
  width: 1px;
  height: 12px;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.tab-wrap li:last-child::after {content: none;}
.tab-wrap li a {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Montserrat', 'Pretendard', dotum, sans-serif;
  color: #fffbe8;
  padding: 0 30px;
  transition: all .2s;
}
.tab-wrap li a:hover {opacity: 0.8;}
.diagram-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
}
.diagram-wrap li {
  max-width: 264px;
  width: calc((100% - 80px)/5);
  aspect-ratio: 264 / 393;
  position: relative;
  overflow: hidden;
  background: #fffbe8;
  padding-top: 80px;
  mask: url(/img/assets/frame_mask.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  text-align: center;
}
.diagram-wrap li::after {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: url(/img/assets/shape_line_brown.svg) center / cover no-repeat;
  opacity: 0.1;
}
.diagram-wrap li p {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}
.diagram-wrap li .img {
  position: relative;
  z-index: 1;
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}
.diagram-wrap li .img img {
  transition: all .2s ease-in;
  max-height: 100%;
}
.diagram-wrap li:hover .img img {transform: scale(1.05)}
.diagram-wrap.dim li {background: #efebd9;}

.diagram-small-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.diagram-small-wrap li {
  width: calc((100% - 80px)/5);
  max-width: 264px;
  aspect-ratio: 264 / 200;
  position: relative;
  overflow: hidden;
  background: #fffbe8;
  mask: url(/img/assets/frame_mask_small.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.diagram-small-wrap li::after {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: url(/img/assets/frame_line_small.svg) center / cover no-repeat;
  opacity: 0.1;
}
.diagram-small-wrap li p {
  font-size: 20px;
  font-weight: bold;
}
.diagram-small-wrap.dim li {background: #efebd9;}

.diagram-img-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}
.diagram-img-wrap li {
  width: calc((100% - 150px)/4);
  text-align: center;
}
.diagram-img-wrap li .img {
  max-width: 312px;
  aspect-ratio: 312 / 420;
  position: relative;
  margin: 0 auto 25px;
}
.diagram-img-wrap li .img::after {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: url(/img/assets/shape_line.svg) center / cover no-repeat;
  opacity: 0.8;
}
.diagram-img-wrap li .img img {transition: all .2s ease}
.diagram-img-wrap li h3,
.diagram-img-wrap li h4,
.diagram-img-wrap li p {
  font-size: 20px;
  margin-top: 25px;
}
.diagram-img-wrap li h3,
.diagram-img-wrap li h4 {margin-bottom: 15px;}
.diagram-img-wrap li p {font-weight: bold;}
.diagram-img-wrap li p span {font-size: 16px;}
.diagram-img-wrap li:hover .img img {opacity: 0.8}
.diagram-img-wrap.narrow {gap: 20px;}
.diagram-img-wrap.narrow li {width: calc((100% - 80px) / 5);}
.diagram-img-wrap.narrow li .img::after {background-image: url(/img/assets/frame_line_narrow.svg)}

.split-wrap {
  max-width: 1000px;
  margin: 0 auto;
}
.split-wrap li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.split-wrap li:last-child {margin-bottom: 0;}
.split-wrap li .img {
  max-width: 400px;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 250px;
  overflow: hidden;
}
.split-wrap li .img img {transition: all .2s ease;}
.split-wrap li:hover .img img {transform: scale(1.05)}
.split-wrap li .txt {
  width: 50%;
  padding-left: 30px;
  text-align: left;
  max-width: calc(100% - 400px);
}
.split-wrap li .txt .number {
  font-family: 'HsBombaram20', dotum, sans-serif;
  font-size: 24px;
  margin-bottom: 15px;
}
.split-wrap li .txt h3 {
  font-size: 30px;
  margin-bottom: 30px;
  text-align: left;
}
.split-wrap li .desc {text-align: left !important;}
.split-wrap li .desc.spacing {line-height: 2;}
.split-wrap li .txt > div {margin-bottom: 30px;}
.split-wrap li .txt > div:last-child {margin-bottom: 0;}
.split-wrap li .txt > div h3 {
  font-size: 24px;
  margin-bottom: 10px;
}
.split-wrap li:nth-child(2n) .img {order: 2;}
.split-wrap li:nth-child(2n) .txt {
  order: 1;
  padding-right: 30px;
}
.split-wrap.large li .img {max-width: 450px;}
.split-wrap.large li .txt {padding-left: 100px;}
.split-wrap.large li:nth-child(2n) .txt {
  padding-left: 30px;
  padding-right: 50px;
}

.process-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 160px;
}
.process-wrap li {
  width: calc((100% - 480px)/4);
  max-width: 231px;
  position: relative;
  aspect-ratio: 231 / 311;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-wrap li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/img/assets/process_frame.svg) center / cover no-repeat;
  opacity: 0.3;
}
.process-wrap li::after {
  content: "";
  background: #412d26;
  width: 100px;
  height: 1px;
  display: block;
  position: absolute;
  top: 50%;
  right: -130px;
}
.process-wrap li:last-child::after {content: none;}
.process-wrap li .inner {
  position: relative;
  z-index: 1;
  padding: 0 10px;
}
.process-wrap li .step p {
  font-size: 16px;
  font-weight: 500;
}
.process-wrap li .step strong {
  font-family: 'HsBombaram20', dotum, sans-serif;
  font-size: 50px;
  font-weight: normal;
  display: block;
  line-height: 1;
}
.process-wrap li .inner > p {
  font-size: 20px;
  font-weight: bold;
  margin-top: 25px;
}
.process-wrap li .inner > p span {
  display: block;
  font-size: 16px;
}
.table-wrap {
  overflow: hidden;
  border-radius: 20px;
}
.table-wrap table {
  width: 100%;
  font-size: 18px;
  border-collapse: collapse;
}
.table-wrap table th {
  background: #e55924;
  color: #fff;
  text-align: center;
  padding: 15px;
}
.table-wrap table td {
  text-align: center;
  padding: 15px;
  background: #fffbe8;
  border-bottom: 1px solid rgba(65,45,38,0.1);
}
.table-wrap table tr:last-child td {border-bottom: none;}
.table-wrap table .td-bg {
  background: #fef3de;
  color: #e55924;
  font-weight: bold;
}
@media all and (max-width: 1400px) {
  .diagram-wrap {max-width: 1000px;}
  .diagram-wrap li {width: calc((100% - 40px)/3)}
  .process-wrap {gap: 30px 50px}
  .process-wrap li {width: calc((100% - 150px) / 4);}
  .process-wrap li::after {
    width: 30px;
    right: -40px;
  }
}
@media all and (max-width: 1200px) {
  .diagram-small-wrap li {width: calc((100% - 40px) / 3);}
}
@media all and (max-width: 1024px) {
  .diagram-img-wrap {gap: 20px;}
  .diagram-img-wrap li {width: calc((100% - 60px)/4)}
  .diagram-img-wrap.narrow {
    max-width: 800px;
    margin: 0 auto;
  }
  .diagram-img-wrap.narrow li {width: calc((100% - 40px) / 3);}
}
@media all and (max-width: 991px) {
  .title h2 {font-size: 48px;}
  .title h2 span:not(.ko) {font-size: 24px;}
  .apng {height: 67px;}
  .diagram-wrap li {
    max-width: 220px;
    padding-top: 50px;
  }
  .diagram-wrap li p {margin-bottom: 10px;}
  .diagram-img-wrap li {
    width: calc((100% - 20px) / 2);
    max-width: 240px;
  }
  .split-wrap li {gap: 50px;}
  .split-wrap li > div {
    width: calc((100% - 50px)/2) !important;
    max-width: 100% !important;
  }
  .split-wrap li .txt {padding: 0 !important;}
  .split-wrap li .txt h3 {font-size: 26px;}
  .tab-wrap li a {padding: 0 15px;}
  .process-wrap li .step strong {font-size: 30px;}
  .process-wrap li .inner > p {
    margin-top: 15px;
    font-size: 18px;
  }
}
@media all and (max-width: 767px) {
  .title {margin-bottom: 25px;}
  .title .en {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .title h2 {font-size: 26px;}
  .title h2 span:not(.ko) {font-size: 16px;}
  .desc {font-size: 15px;}
  .btn-group {gap: 10px;}
  .c-btn {height: 42px;}
  .c-btn span {
    font-size: 14px;
    padding-left: 20px;
    padding-right: 30px;
  }
  .c-btn .arrow {width: 42px;}
  .disclaimer {
    font-size: 12px;
    padding: 15px !important;
  }
  .note {
    font-size: 14px;
    margin-top: 20px;
  }
  .statement {
    font-size: 16px;
    margin-top: 50px;
  }
  .apng {
    height: 40px;
    margin: 2px 0;
  }
  .table-wrap {border-radius: 10px;}
  .table-wrap table {font-size: 15px;}
  .table-wrap table th,
  .table-wrap table td {padding: 10px;}
  .diagram-wrap {gap: 10px;}
  .diagram-wrap li {width: calc((100% - 10px)/2);}
  .diagram-wrap li p {font-size: 15px;}
  .diagram-wrap li .img {padding: 0 10px;}
  .diagram-small-wrap {gap: 10px 20px;}
  .diagram-small-wrap li {width: calc((100% - 20px) / 2);}
  .diagram-small-wrap li p {font-size: 15px;}
  .diagram-img-wrap {gap: 30px 10px;}
  .diagram-img-wrap li .img {margin-bottom: 15px;}
  .diagram-img-wrap li h3,
  .diagram-img-wrap li h4,
  .diagram-img-wrap li p {
    font-size: 16px;
    margin: 0;
  }
  .diagram-img-wrap li h3,
  .diagram-img-wrap li h4 {margin-bottom: 10px;}
  .split-wrap li {
    gap: 30px;
    margin-bottom: 50px;
    justify-content: center;
  }
  .split-wrap li > div {width: 100% !important;}
  .split-wrap li .img {
    max-width: 240px !important;
    order: 1 !important;
  }
  .split-wrap li .txt {order: 2 !important;}
  .split-wrap li .txt > div {
    text-align: center;
    margin-bottom: 20px;
  }
  .split-wrap li .txt h3,
  .split-wrap li .txt > div h3 {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
  }
  .split-wrap li .desc {text-align: center !important;}
  .split-wrap li .desc.spacing {line-height: 1.6}
  .tab-wrap {padding: 10px;}
  .tab-wrap li a {
    height: auto;
    padding: 5px 10px;
    font-size: 14px;
  }
  .process-wrap {gap: 15px 40px !important;}
  .process-wrap li {width: calc((100% - 40px) / 2) !important;}
  .process-wrap li::after {
    width: 20px;
    right: -30px;
  }
  .process-wrap li:nth-child(3n)::after {content: "" !important;}
  .process-wrap li:nth-child(2n)::after {content: none !important;}
  .process-wrap li .step p {font-size: 14px;}
  .process-wrap li .inner > p {
    font-size: 15px;
    margin-top: 15px;
  }
}

/*apng*/
.apng {
  height: 75px;
  display: inline-block;
  margin: 2px 0;
}
.apng img {max-height: 100%;}
.apng img[data-src],
.apng img.apng-loading{
  opacity: 0;
  visibility: hidden;
}
.apng img.apng-loaded{
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease;
}
.txt-vegan {margin-right: 10px;}
.txt-gelato {margin-right: 6px;}
@media all and (max-width: 991px) {
  .apng {height: 67px;}
}
@media all and (max-width: 767px) {
  .apng {
    height: 40px;
    margin: 2px 0;
  }
}

/*main*/
.main {
  position: relative;
  z-index: 1;
}
.main section {
  position: relative;
  padding: 150px 0;
  text-align: center;
}
.main .hero {padding: 100px 0 0;}
.main .hero .object {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.main .hero .object > div {position: absolute;}
.main .hero .object > div.object-1 {top: 980px; left: 0;}
.main .hero .object > div.object-2 {top: 6%; right: 0;}
.main .hero .top {
  position: relative;
  margin-bottom: 130px;
}
.main .hero .top h2 {
  height: 140px;
  margin: 0 auto;
}
.main .hero .top h2 > span:last-child {margin-left: 0}
.main .hero .top .logo {
  width: 305px;
  margin: 40px 0;
}
.main .hero .top .desc {
  max-width: 800px;
  margin: 0 auto;
}
.main .hero .top .btn-group {margin-top: 50px;}
.main .hero .bottom {
  position: relative;
  z-index: 36;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main .hero .bottom .video-wrap {
  width: 400px;
  height: 500px;
  border-radius: 200px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  z-index: 10;
  background: #000;
  will-change: transform, width, height, border-radius;
}
.main .hero .bottom .video-wrap.is-fixed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0 auto;
  border-radius: 0;
  z-index: 50;
}
.main .hero .bottom .video-wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .4s ease;
}
.main .hero .bottom .video-wrap .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: none;
  z-index: 2;
  pointer-events: auto;
  color: #fff;
  will-change: transform, opacity;
  width: 100%;
}
.main .hero .bottom {height: 100vh;}
.main .hero .bottom .c-btn {margin: 50px auto 0;}
.main .signature {padding-bottom: 0;}
.main .menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 80px 100px;
}
.main .menu ul li {width: calc((100% - 200px)/3)}
.main .menu ul li .img {position: relative;}
.main .menu ul li .img .deco {position: absolute;}
.main .menu ul li .img .deco img {transition: all .2s ease-in;}
.main .menu ul li:nth-child(1) .img .deco {left: 0; bottom: 0;}
.main .menu ul li:nth-child(1):hover .img .deco img {transform: rotate(-10deg)}
.main .menu ul li:nth-child(2) .img .deco {left: -28px; top: 42%; transform: translateY(-50%)}
.main .menu ul li:nth-child(2):hover .img .deco img {transform: rotate(-10deg)}
.main .menu ul li:nth-child(3) .img .deco {right: -48px; bottom: 22%;}
.main .menu ul li:nth-child(3):hover .img .deco img {transform: rotate(10deg)}
.main .menu ul li:nth-child(4) .img .deco {right: 0; bottom: 7%;}
.main .menu ul li:nth-child(4):hover .img .deco img {transform: rotate(10deg)}
.main .menu ul li:nth-child(5) .img .deco {top: 30%; left: 30%;}
.main .menu ul li:nth-child(5):hover .img .deco img {transform: rotate(-10deg)}
.main .menu ul li:nth-child(6) .img .deco {right: -12px; bottom: 30%;}
.main .menu ul li:nth-child(6) .img .deco img {width: 75px}
.main .menu ul li:nth-child(6):hover .img .deco img {transform: rotate(360deg)}
.main .menu ul li .txt {margin-top: 25px;}
.main .menu ul li .txt h3 {
  font-size: 26px;
  margin-bottom: 10px;
}
.main .store ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1050px;
  margin: 0 auto;
}
.main .store ul li {
  width: calc((100% - 50px)/2);
  margin-right: 50px;
}
.main .store ul li:last-child {margin-right: 0;}
.main .store ul li .img {
  aspect-ratio: 500 / 380;
  border-radius: 30px;
  overflow: hidden;
  padding: 6px;
  position: relative;
}
.main .store ul li .img > span {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .2s ease;
}
.main .store ul li .img .inner {
  border: 1px solid rgba(255,251,232,0.5);
  border-radius: 28px;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.main .store ul li .txt {margin-top: 25px;}
.main .store ul li .txt h3 {
  font-size: 26px;
  margin-bottom: 10px;
}
.main .store ul li:hover .img > span {transform: scale(1.05)}
.main .store .c-btn {margin: 50px auto 0;}
.main .franchise::after {
  content: "";
  background: url(/img/assets/logo.svg) center / cover no-repeat;
  display: block;
  width: 120%;
  aspect-ratio: 110 / 50;
  opacity: 0.05;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main .franchise .container {
  position: relative;
  z-index: 1;
}
.main .franchise .c-btn {margin: 50px auto 0;}
.main .franchise .img-wrap {
  position: relative;
  width: 450px;
  aspect-ratio: 450 / 550;
  margin: 80px auto 0;
  z-index: 1;
}
.main .franchise .img-slider {
  width: 100%;
  height: 100%;
  border-radius: 225px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.main .franchise .img-slider .swiper-slide {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.main .franchise .img-wrap .deco > div {position: absolute;}
.main .franchise .img-wrap .deco .deco-1 {top: 0; left: -90px;}
.main .franchise .img-wrap .deco .deco-2 {top: 50%; transform: translateY(-50%); right: -110px;}
@media all and (min-width: 1921px) {
  .main .hero {padding-top: 12%;}
}
@media all and (max-width: 1500px) {
  .main .hero .object > div.object-1 img {max-width: 400px;}
  .main .hero .object > div.object-2 img {max-width: 360px;}
  .main .menu ul li {width: calc((100% - 200px)/3)}
}
@media all and (max-width: 1024px) {
  .main .hero .object > div.object-1 {top: 880px;}
  .main .hero .object > div.object-2 {
    top: 4%;
    right: -80px;
  }
  .main .menu ul {gap: 50px;}
  .main .menu ul li {width: calc((100% - 100px)/3)}
  .main .policy ul {gap: 20px;}
  .main .policy ul li {width: calc((100% - 60px)/4)}
}
@media all and (max-width: 991px) {
  .main .hero .object > div.object-1 img {max-width: 300px;}
  .main .hero .object > div.object-2 {top: 8%;}
  .main .hero .object > div.object-2 img {max-width: 280px;}
  .main .hero .top h2 {height: 124px;}
  .main .menu ul li .txt h3 {font-size: 22px;}
  .main .store ul li .txt h3 {font-size: 22px;}
  .main .franchise .img-wrap {width: 380px;}
  .main .franchise::after {width: 200%;}
  .main .policy ul li {
    width: calc((100% - 20px) / 2);
    max-width: 240px;
  }
}
@media all and (max-width: 767px) {
  .main section {padding: 80px 0;}
  .main .hero {padding-top: 30px;}
  .main .hero .object > div.object-1 {display: none;}
  .main .hero .object > div.object-1 img {}
  .main .hero .object > div.object-2 {top: 20%; right: 0;}
  .main .hero .object > div.object-2 img {max-width: 300px;}
  .main .hero .top {margin-bottom: 200px;}
  .main .hero .top h2 {
    max-width: 400px;
    padding: 0 30px;
    height: 84px;
  }
  .main .hero .top .logo {
    width: 50%;
    margin: 20px 0;
  }
  .main .hero .top .btn-group {margin-top: 20px;}
  .main .hero .bottom .c-btn {margin-top: 25px;}
  .main .menu ul {gap: 30px;}
  .main .menu ul li {width: calc((100% - 30px) / 2);}
  .main .menu ul li .img .deco img {
    max-width: 60px;
    max-height: 60px;
  }
  .main .menu ul li:nth-child(2) .img .deco {left: -15px;}
  .main .menu ul li:nth-child(3) .img .deco {right: -20px;}
  .main .menu ul li .txt {margin-top: 18px;}
  .main .menu ul li .txt h3 {font-size: 17px;}
  .main .store ul {gap: 30px;}
  .main .store ul li {
    width: 100%;
    margin: 0;
  }
  .main .store ul li .img {
    border-radius: 15px;
    padding: 4px;
  }
  .main .store ul li .img .inner {border-radius: 12px;}
  .main .store ul li .txt {margin-top: 20px;}
  .main .store ul li .txt h3 {font-size: 18px;}
  .main .store .c-btn {margin-top: 30px;}
  .main .franchise {padding-top: 30px;}
  .main .franchise .c-btn {margin-top: 30px;}
  .main .franchise .img-wrap {width: 240px;}
  .main .franchise .img-wrap .deco .deco-1 {left: -58px;}
  .main .franchise .img-wrap .deco .deco-1 img {width: 80px;}
  .main .franchise .img-wrap .deco .deco-2 {right: -60px;}
  .main .franchise .img-wrap .deco .deco-2 img {width: 80px;}
  .main .policy ul {gap: 30px 10px;}
  .main .policy ul li p {
    font-size: 16px;
    margin-top: 15px;
  }
}
@media all and (max-width: 380px) {
  .main .hero .object > div.object-2 img {max-width: 250px;}
}

/*sub*/
.sub {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.sub section {
  position: relative;
  padding: 150px 0;
}
.sub section:first-child {padding-top: 120px;}
.sub .desc {text-align: center;}
.sub .title + .desc {margin-bottom: 80px;}
@media all and (max-width: 767px) {
  .sub section {padding: 100px 0;}
  .sub section:first-child {padding-top: 30px;}
  .sub .title + .desc {margin-bottom: 30px;}
}

/*about*/
.sub-about .story .object > div {position: absolute;}
.sub-about .story .object .object-1 {top: 28%; left: 20%;}
.sub-about .story .object .object-2 {top: 54%; left: 7%;}
.sub-about .story .object .object-3 {bottom: 5%; right: 0;}
.sub-about .story .desc {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}
.sub-about .philosophy {padding: 0;}
.sub-about .characters .content {
  max-height: 100vh;
  display: flex;
  flex-wrap: wrap;
}
.sub-about .characters .txt {
  width: 43%;
  padding-right: 50px;
}
.sub-about .characters .txt > div {
  margin-top: 150px;
  text-align: center;
  opacity: 0.3;
  transition: all .3s ease;
}
.sub-about .characters .txt > div.active {opacity: 1;}
.sub-about .characters .txt h3 {
  font-size: 50px;
  font-family: 'HsBombaram20', dotum, sans-serif;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.sub-about .characters .img {
  width: 57%;
  position: relative;
  transition: transform 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-about .characters.is-pinned .content .img{transform: translateY(-150px);}
.sub-about .characters .img ul {
  position: relative;
  width: 100%;
  max-width: 850px;
  aspect-ratio: 850 / 820;
  z-index: 1;
  transform: translateY(-177px);
}
.sub-about .characters .img ul li {position: absolute;}
.sub-about .characters .img ul li img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all .3s ease;
}
.sub-about .characters .img ul li .on {
  position: relative;
  z-index: 1;
  opacity: 0;
}
.sub-about .characters .img ul li.active .on {opacity: 1;}
.sub-about .characters .img ul li.fruity {
  width: 38%;
  bottom: 0;
  left: 22%;
  z-index: 3;
}
.sub-about .characters .img ul li.lolli {
  width: 50%;
  bottom: 5%;
  right: 0;
  z-index: 2;
}
.sub-about .characters .img ul li.marsh {
  width: 48%;
  top: 0;
  left: 0;
}
.sub-about .characters .img ul li.puffy {
  width: 38%;
  top: 6%;
  right: 13%;
}
.sub-about .characters .img .bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}
.sub-about .rnd::after {
  content: "";
  background: url(/img/assets/logo_brown.svg) center / cover no-repeat;
  display: block;
  width: 120%;
  aspect-ratio: 110 / 50;
  opacity: 0.05;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-about .rnd .container {
  position: relative;
  z-index: 1;
}
.sub-about .rnd .img {
  text-align: center;
  margin-bottom: -50px;
}
@media all and (max-width: 1600px) {
  .sub-about .story .object .object-1 img {max-width: 140px;}
  .sub-about .story .object .object-2 img {max-width: 350px;}
  .sub-about .story .object .object-3 img {max-width: 500px;}
}
@media all and (max-width: 1400px) {
  .sub-about .story .object .object-1 {left: 15%;}
  .sub-about .story .object .object-2 {left: 3%;}
  .sub-about .story .object .object-3 {right: -8%;}
}
@media all and (max-width: 991px) {
  .sub-about .story .object .object-2 img {max-width: 280px;}
  .sub-about .story .object .object-3 img {max-width: 400px;}
  .sub-about .rnd::after {width: 200%;}
}
@media all and (max-width: 767px) {
  .sub-about .story .object .object-1 {left: auto; right: -38px;}
  .sub-about .story .object .object-1 img {max-width: 100px;}
  .sub-about .story .object .object-2 {left: -15%;}
  .sub-about .story .object .object-2 img {max-width: 200px;}
  .sub-about .story .object .object-3 {right: -100px; bottom: -10%}
  .sub-about .story .object .object-3 img {max-width: 250px;}
  .sub-about .characters .content {
    display: flex;
    flex-direction: column;
    max-height: none;
    position: relative;
    align-content: flex-start;
    justify-content: flex-start;
    row-gap: 100px;
  }
  .sub-about .characters.is-pinned .content{
    min-height: 100vh;
    padding-bottom: 40px;
  }
  .sub-about .characters .img {
    order: 1;
    width: 100%;
    position: relative;
    transform: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    z-index: 1;
  }
  .sub-about .characters .img ul {
    max-width: 520px;
    width: 100%;
    transform: none;
  }
  .sub-about .characters .txt {
    order: 2;
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 2;
  }
  .sub-about .characters .txt .txt-track {
    display:flex;
    opacity: 1;
    margin: 0;
  }
  .sub-about .characters .txt .txt-track > div {
    flex: 0 0 100%;
    margin-top: 0;
    text-align: center;
  }
  .sub-about .characters .txt .txt-track > div.active {opacity: 1;}
  .sub-about .characters .txt h3 {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .sub-about .characters.is-pinned .content .img {transform: none !important;}
}

/*vegan_probiotics*/
.sub-vegan .intro {padding: 0 !important;}
.sub-vegan .intro .inner {
  overflow: hidden;
  padding: 120px 0 300px;
  position: relative;
}
.sub-vegan .intro .inner::after {
  content: "";
  background: url(/img/assets/logo.svg) center / cover no-repeat;
  display: block;
  width: 120%;
  aspect-ratio: 110 / 50;
  opacity: 0.05;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-vegan .intro .title,
.sub-vegan .intro .desc,
.sub-vegan .intro .img {
  position: relative;
  z-index: 1;
}
.sub-vegan .intro .desc {margin: 0;}
.sub-vegan .intro .img {
  margin: -250px auto 0;
  text-align: center;
}
.sub-vegan .moments {
  background: url(/img/assets/vegan_moments_bg.jpg) center / cover no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fffbe8;
}
.sub-vegan .last {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.sub-vegan .last .txt {
  padding-left: calc((100% - 1400px)/2);
  padding-right: 50px;
  text-align: left;
}
.sub-vegan .last .txt .title,
.sub-vegan .last .txt .desc {text-align: left;}
.sub-vegan .last .txt .btn-group {justify-content: start;}
.sub-vegan .last .img {padding-top: 80px;}

@media all and (max-width: 1400px) {
  .sub-vegan .last {align-items: flex-end}
  .sub-vegan .last .txt {
    padding-left: 80px;
    padding-right: 20px;
    transform: translateY(-66px);
  }
  .sub-vegan .last .txt .desc {margin-bottom: 30px;}
  .sub-vegan .last .img {margin-right: -10%;}
  .sub-vegan .last .img img {
    width: 500px;
    max-width: none;
    transform: translateX(10%);
  }
}
@media all and (max-width: 991px) {
  .sub-vegan .intro .inner::after {width: 200%;}
  .sub-vegan .last {
    display: block;
    padding-top: 100px;
  }
  .sub-vegan .last .txt {
    width: 100%;
    text-align: center;
    transform: none;
    padding: 0 20px;
  }
  .sub-vegan .last .txt .title,
  .sub-vegan .last .txt .desc {text-align: center;}
  .sub-vegan .last .txt .btn-group {justify-content: center;}
  .sub-vegan .last .img {
    width: 100%;
    margin: 0;
    padding-top: 40px;
    text-align: right;
  }
}
@media all and (max-width: 767px) {
  .sub-vegan .intro .inner {padding: 50px 0 150px;}
  .sub-vegan .intro .img {
    margin-top: -130px;
    padding: 0 20px;
  }
  .sub-vegan .last {padding-top: 60px;}
  .sub-vegan .last .img img {width: 70%;}
}

/*menu*/
.sub-menu .intro {
  overflow: hidden;
  color: #fffbe8;
  height: 1000px;
}
.sub-menu .intro::after {
  content: "";
  background: url(/img/assets/logo.svg) center / cover no-repeat;
  display: block;
  width: 120%;
  aspect-ratio: 110 / 50;
  opacity: 0.2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-menu .intro .container {
  position: relative;
  z-index: 1;
}
.sub-menu .intro .img {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}
.sub-menu .intro .img > div {
  position: absolute;
  width: fit-content;
}
.sub-menu .intro .img .img-1 {
  position: relative;
  z-index: 5;
}
.sub-menu .intro .img .img-2 {
  top: 30%;
  left: 0;
  z-index: 4;
}
.sub-menu .intro .img .img-3 {
  top: 15%;
  right: -5%;
  z-index: 4;
}
.sub-menu .intro .img .img-4 {
  top: 8%;
  left: 2%;
  z-index: 3;
}
.sub-menu .intro .img .img-5 {
  top: -4%;
  right: 10%;
  z-index: 4;
}
.sub-menu .intro .img .img-6 {
  top: 20%;
  left: -6%;
  z-index: 5;
}
.sub-menu .menu-wrap {padding: 0;}
.sub-menu .menu-wrap .top .statement {margin-top: 150px;}
.sub-menu .menu-wrap .top .tab-wrap {margin-top: 80px;}
.sub-menu .menu-wrap .bottom > div {padding: 100px 0;}
.sub-menu .menu-wrap .bottom .menu-title {
  background: url(/img/assets/menu_title_frame.svg) center / cover no-repeat;
  max-width: 344px;
  aspect-ratio: 344 / 72;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Montserrat', 'Pretendard', dotum, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 auto 30px;
}
.sub-menu .menu-wrap .bottom .img-wrap {
  position: relative;
  max-width: 901px;
  aspect-ratio: 901 / 500;
  margin: -30px auto 0;
}
.sub-menu .menu-wrap .bottom .img-wrap::after {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: url(/img/assets/frame_line_wide.svg) center / cover no-repeat;
  opacity: 0.8;
}
.sub-menu .menu-wrap .bottom .img-wrap .object > div {
  position: absolute;
  z-index: 1;
}
.sub-menu .menu-wrap .bottom #gelato .object-1 {left: -16%; bottom: 0;}
.sub-menu .menu-wrap .bottom #gelato .object-2 {right: -26%; top: 50%; transform: translateY(-50%)}
.sub-menu .menu-wrap .bottom #nsa .object-1 {left: -15%; bottom: 0;}
.sub-menu .menu-wrap .bottom #nsa .object-2 {right: -9%; bottom: 0;}
.sub-menu .menu-wrap .bottom #donuts .object-1 {left: -11%; bottom: 0;}
.sub-menu .menu-wrap .bottom #donuts .object-2 {right: -12%; bottom: 0;}
.sub-menu .menu-wrap .bottom #coffee .object-1 {left: -8%; bottom: 0;}
.sub-menu .menu-wrap .bottom #coffee .object-2 {right: -11%; bottom: 0;}
.sub-menu .menu-wrap .bottom #sandwich .object-1 {right: -11%; bottom: 0;}
.sub-menu .menu-wrap .bottom #seasonal .object-1 {left: -8%; top: -3%;}
.sub-menu .menu-wrap .bottom #seasonal .object-2 {right: -11%; bottom: 0;}
@media all and (max-width: 991px) {
  .sub-menu .menu-wrap .bottom .object-1 {text-align: right;}
  .sub-menu .menu-wrap .bottom .object img {max-width: 80%;}
  .sub-menu .menu-wrap .bottom #gelato .object-2 {
    top: auto;
    transform: none;
    bottom: 0;
  }
}
@media all and (max-width: 767px) {
  .sub-menu .intro {
    height: auto;
    padding-top: 50px !important;
    padding-bottom: 0;
  }
  .sub-menu .intro::after {width: 200%;}
  .sub-menu .intro .img {margin-bottom: -30%;}
  .sub-menu .intro .img .img-2 {
    width: 50%;
    top: 40%;
  }
  .sub-menu .intro .img .img-3 {width: 50%;}
  .sub-menu .intro .img .img-4 {width: 50%;}
  .sub-menu .intro .img .img-5 {width: 20%; right: 5%;}
  .sub-menu .intro .img .img-6 {width: 20%;}
  .sub-menu .menu-wrap .top .statement {margin-top: 50px;}
  .sub-menu .menu-wrap .top .tab-wrap {margin-top: 30px;}
  .sub-menu .menu-wrap .bottom > div {padding: 60px 0;}
  .sub-menu .menu-wrap .bottom .menu-title {
    max-width: 250px;
    font-size: 12px;
    margin-bottom: 20px;
  }
  .sub-menu .menu-wrap .bottom .img-wrap {margin-top: 0;}
  .sub-menu .menu-wrap .bottom .img-wrap .object > div {bottom: -12% !important;}
  .sub-menu .menu-wrap .bottom .object-1 {text-align: left;}
  .sub-menu .menu-wrap .bottom .object-2 {text-align: right;}
  .sub-menu .menu-wrap .bottom .object img {max-width: 40%;}
  .sub-menu .menu-wrap .bottom #gelato .object-1,
  .sub-menu .menu-wrap .bottom #nsa .object-1,
  .sub-menu .menu-wrap .bottom #donuts .object-1 {left: -8%;}
  .sub-menu .menu-wrap .bottom #gelato .object-2 {right: -18%;}
  .sub-menu .menu-wrap .bottom #nsa .object-2,
  .sub-menu .menu-wrap .bottom #donuts .object-2 {right: -4%;}
  .sub-menu .menu-wrap .bottom #coffee .object-1 {left: -2%;}
  .sub-menu .menu-wrap .bottom #coffee .object-2 {right: -5%;}
  .sub-menu .menu-wrap .bottom #sandwich .object-1 {
    right: -4%;
    text-align: right;
  }
  .sub-menu .menu-wrap .bottom #seasonal .object-1 {left: -4%;}
  .sub-menu .menu-wrap .bottom #seasonal .object-2 {right: -4%;}
}

/*catering_events*/
.sub-catering .intro {padding-bottom: 0;}
.sub-catering .intro .diagram-wrap {gap: 50px;}
.sub-catering .intro .diagram-wrap li {
  max-width: 312px;
  width: calc((100% - 150px)/4);
  padding-top: 90px;
}
.sub-catering .intro .btn-group {margin-top: 50px;}
.sub-catering .intro .bottom h3 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 30px;
}
.sub-catering .section {padding-bottom: 0;}
.sub-catering .section .bottom {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  padding: 120px 16px;
  text-align: center;
  color: #fffbe8;
  margin-top: 100px;
}
.sub-catering .section .bottom .statement {margin: 0;}
.sub-catering .process .btn-group {margin-top: 80px;}
@media all and (max-width: 1400px) {
  .sub-catering .intro .diagram-wrap {
    max-width: none;
    gap: 20px;
  }
  .sub-catering .intro .diagram-wrap li {width: calc((100% - 60px) / 4);}
}
@media all and (max-width: 1200px) {
  .sub-catering .intro .diagram-wrap {max-width: 800px;}
  .sub-catering .intro .diagram-wrap li {width: calc((100% - 20px) / 2);}
}
@media all and (max-width: 767px) {
  .sub-catering .section .bottom {
    padding: 60px 16px;
    margin-top: 50px;
  }
  .sub-catering .intro .btn-group {margin: 25px 0 40px;}
  .sub-catering .intro .bottom h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .sub-catering .intro .diagram-wrap li {padding: 40px 10px 0;}
  .sub-catering .process .btn-group {margin-top: 40px;}
}

/*stores*/
.sub-stores .intro {
  color: #fffbe8;
  padding-bottom: 0;
  overflow: hidden;
}
.sub-stores .intro::after {
  content: "";
  background: url(/img/assets/stores_intro_bg.svg) center / cover no-repeat;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1920 / 416;
  opacity: 0.5;
}
.sub-stores .intro .img {
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}
.sub-stores .section {padding-bottom: 0;}
.sub-stores .bottom {
  margin-top: 100px;
  padding: 100px 0;
}
.sub-stores .bottom h3 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 30px;
}
.sub-stores .express .diagram-img-wrap {gap: 0;}
.sub-stores .express .diagram-img-wrap li {width: 50%;}
@media all and (max-width: 991px) {
  .sub-stores .diagram-img-wrap li {max-width: none;}
}
@media all and (max-width: 767px) {
  .sub-stores .intro {padding-top: 50px !important;}
  .sub-stores .bottom {padding: 60px 0;}
  .sub-stores .bottom h3 {
    font-size: 20px;
    margin-bottom: 30px;
  }
  .sub-stores .diagram-img-wrap {gap: 30px 0 !important;}
  .sub-stores .diagram-img-wrap li {
    width: 100% !important;
    max-width: none;
  }
  .sub-stores .diagram-img-wrap li .img {max-width: 200px;}
}

/*franchise*/
.sub-franchise .bottom h3 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 30px;
}
.sub-franchise .intro {padding-bottom: 0;}
.sub-franchise .intro .diagram-wrap li {padding-top: 70px;}
.sub-franchise .intro .diagram-wrap li p {margin-bottom: 20px;}
.sub-franchise .what .process-wrap {margin-bottom: 100px;}
.sub-franchise .omnivot .bottom > div {margin-bottom: 100px;}
.sub-franchise .omnivot .bottom > div:last-child {margin-bottom: 0;}
.sub-franchise .omnivot .table-wrap {
  max-width: 1000px;
  margin: 0 auto;
}
.sub-franchise .process .process-wrap li {width: calc((100% - 320px) / 3);}
.sub-franchise .process .process-wrap li:nth-child(3n)::after {content: none;}
.sub-franchise .last {
  background: url(/img/assets/franchise_last_bg.jpg) center / cover no-repeat;
  background-attachment: fixed;
  padding: 180px 16px;
  text-align: center;
  color: #fffbe8;
}
.sub-franchise .last .statement {margin: 0;}
@media all and (max-width: 991px) {
  .sub-franchise .intro .diagram-wrap li p {margin-bottom: 10px;}
  .sub-franchise .process .process-wrap li {width: calc((100% - 100px) / 3);}
}
@media all and (max-width: 767px) {
  .sub-franchise .bottom h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .sub-franchise .intro .diagram-wrap li {padding-top: 50px;}
  .sub-franchise .intro .diagram-wrap li:first-child .img,
  .sub-franchise .intro .diagram-wrap li:nth-child(2) .img,
  .sub-franchise .intro .diagram-wrap li:nth-child(3) .img {padding-bottom: 15px;}
  .sub-franchise .what .process-wrap {margin-bottom: 50px;}
  .sub-franchise .omnivot .bottom > div {margin-bottom: 50px;}
  .sub-franchise .last {padding: 100px 16px;}
}

/*ip education*/
.sub-ipEdu .bottom h3 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 30px;
}
.sub-ipEdu .section {padding-top: 0 !important;}
.sub-ipEdu .top {
  position: relative;
  padding: 120px 0 150px;
}
.sub-ipEdu .ip .top::after {
  content: "";
  background: url(/img/assets/logo.svg) center / cover no-repeat;
  display: block;
  width: 120%;
  aspect-ratio: 110 / 50;
  opacity: 0.05;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sub-ipEdu .ip .top .container {
  position: relative;
  z-index: 1;
}
.sub-ipEdu .ip .bottom .container > div {padding-top: 100px;}
.sub-ipEdu .ip .characters-list {
  max-width: 1100px;
  margin: 0 auto;
}
.sub-ipEdu .ip .characters-list li {
  display: flex;
  align-items: center;
  margin-top: -200px;
}
.sub-ipEdu .ip .characters-list li .img img {max-width: 90%;}
.sub-ipEdu .ip .characters-list li .txt {position: relative;}
.sub-ipEdu .ip .characters-list li .txt img {position: absolute;}
.sub-ipEdu .ip .characters-list li .txt h4 {
  font-size: 30px;
  margin-bottom: 10px;
}
.sub-ipEdu .ip .characters-list li .txt .desc {text-align: left;}
.sub-ipEdu .ip .characters-list li .img img {display: block;}
.sub-ipEdu .ip .characters-list li:first-child {margin-top: 0;}
.sub-ipEdu .ip .characters-list li:nth-child(odd) .txt {margin-left: 40px;}
.sub-ipEdu .ip .characters-list li:nth-child(odd) .txt img {
  top: -40px;
  left: -30px;
}
.sub-ipEdu .ip .characters-list li:nth-child(2n) {justify-content: end;}
.sub-ipEdu .ip .characters-list li:nth-child(2n) .txt {
  margin-right: 40px;
  order: 1;
  text-align: right;
}
.sub-ipEdu .ip .characters-list li:nth-child(2n) .txt img {
  right: -30px;
  bottom: -40px;
  transform: rotate(180deg);
}
.sub-ipEdu .ip .characters-list li:nth-child(2n) .img {order: 2;}
.sub-ipEdu .ip .characters-list .lolli .img img {transform: rotate(-12deg)}
.sub-ipEdu .ip .characters-list .marsh {margin-top: -100px;}
.sub-ipEdu .ip .characters-list .puffy {margin-top: -280px;}
.sub-ipEdu .ip .characters-list .puffy .img img {transform: rotate(-9deg)}
.sub-ipEdu .ip .bottom .statement {padding-top: 0 !important;}
.sub-ipEdu .ip .ai h3 {margin-bottom: 18px;}
.sub-ipEdu .ip .ai h3 + .desc {margin-bottom: 50px;}
.sub-ipEdu .education {padding-bottom: 0;}
.sub-ipEdu .last {
  background: url(/img/assets/education_last_bg.jpg) center / cover no-repeat;
  background-attachment: fixed;
  padding: 180px 16px;
  text-align: center;
  color: #fffbe8;
}
.sub-ipEdu .last .statement {margin: 0;}
@media all and (max-width: 1024px) {
  .sub-ipEdu .ip .diagram-img-wrap {
    max-width: 800px;
    margin: 0 auto;
  }
  .sub-ipEdu .ip .diagram-img-wrap li {width: calc((100% - 40px)/3)}
  .sub-ipEdu .ip .characters-list li {margin-top: -150px;}
  .sub-ipEdu .ip .characters-list .puffy {margin-top: -240px;}
  .sub-ipEdu .ip .characters-list li:nth-child(odd) .txt {margin-left: 0;}
  .sub-ipEdu .ip .characters-list li:nth-child(2n) .txt {margin-right: 0;}
}
@media all and (max-width: 991px) {
  .sub-ipEdu .ip .top::after {width: 200%;}
  .sub-ipEdu .ip .characters-list li {margin-top: -50px !important;}
  .sub-ipEdu .ip .characters-list li:first-child {margin-top: 0 !important;}
  .sub-ipEdu .ip .characters-list li:nth-child(odd) .txt {margin-left: 15px;}
  .sub-ipEdu .ip .characters-list li:nth-child(2n) .txt {margin-right: 15px;}
  .sub-ipEdu .ip .characters-list li .img img {width: 100%;}
  .sub-ipEdu .ip .characters-list li.fruity .img img {max-width: 220px;}
  .sub-ipEdu .ip .characters-list li.lolli .img img {max-width: 280px;}
  .sub-ipEdu .ip .characters-list li.marsh .img img {max-width: 260px;}
  .sub-ipEdu .ip .characters-list li.puffy .img img {max-width: 240px;}
}
@media all and (max-width: 767px) {
  .sub-ipEdu .top {padding: 50px 0 80px;}
  .sub-ipEdu .bottom h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .sub-ipEdu .ip .bottom .container > div {padding-top: 50px;}
  .sub-ipEdu .ip .diagram-img-wrap li {
    width: calc((100% - 20px) / 2);
    max-width: 240px;
  }
  .sub-ipEdu .ip .characters-list li {margin-top: 0 !important;}
  .sub-ipEdu .ip .characters-list li .txt h4 {
    font-size: 20px;
    margin-bottom: 5px;
  }
  .sub-ipEdu .ip .characters-list li .txt img {width: 30px;}
  .sub-ipEdu .ip .characters-list li:nth-child(odd) .txt img {
    top: -20px;
    left: -10px;
  }
  .sub-ipEdu .ip .characters-list li:nth-child(2n) .txt img {
    right: -10px;
    bottom: -20px;
  }
  .sub-ipEdu .ip .characters-list li.fruity .img img {max-width: 105px;}
  .sub-ipEdu .ip .characters-list li.lolli .img img {max-width: 140px;}
  .sub-ipEdu .ip .characters-list li.marsh .img img {max-width: 120px;}
  .sub-ipEdu .ip .characters-list li.puffy .img img {max-width: 120px;}
  .sub-ipEdu .ip .ai h3 + .desc {margin-bottom: 20px;}
  .sub-ipEdu .last {padding: 100px 16px;}
}