@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+TC:wght@100..900&display=swap");
.font-xxl {
  font-size: 62px;
}
@media (max-width: 1024px) {
  .font-xxl {
    font-size: 62px;
  }
}
@media (max-width: 576px) {
  .font-xxl {
    font-size: 36px;
  }
}

h1, .font-xl {
  font-size: 42px;
}
@media (max-width: 1024px) {
  h1, .font-xl {
    font-size: 42px;
  }
}
@media (max-width: 576px) {
  h1, .font-xl {
    font-size: 36px;
  }
}

h2, .font-lg {
  font-size: 36px;
}
@media (max-width: 1024px) {
  h2, .font-lg {
    font-size: 36px;
  }
}
@media (max-width: 576px) {
  h2, .font-lg {
    font-size: 24px;
  }
}

h3,
.font-md {
  font-size: 24px;
}
@media (max-width: 1024px) {
  h3,
  .font-md {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  h3,
  .font-md {
    font-size: 20px;
  }
}

.font-sm {
  font-size: 20px;
}
@media (max-width: 1024px) {
  .font-sm {
    font-size: 20px;
  }
}
@media (max-width: 576px) {
  .font-sm {
    font-size: 16px;
  }
}

.font-xs {
  font-size: 18px;
}
@media (max-width: 1024px) {
  .font-xs {
    font-size: 18px;
  }
}
@media (max-width: 576px) {
  .font-xs {
    font-size: 16px;
  }
}

.body {
  font-size: 16px;
}
@media (max-width: 1024px) {
  .body {
    font-size: 16px;
  }
}
@media (max-width: 576px) {
  .body {
    font-size: 16px;
  }
}

.note {
  font-size: 12px;
}

/* font setting */
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
textarea,
p,
blockquote,
th,
td,
footer,
img {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "Carlito", sans-serif, "Noto Sans TC", sans-serif, "Pingfang TC";
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ol,
ul {
  list-style: none;
}

q:before,
q:after {
  content: "";
}

abbr,
acronym,
img {
  border: 0;
}

/* link styles*/
a,
div,
li {
  text-decoration: none;
}

a:hover,
div:hover,
li:hover {
  text-decoration: none;
}

.goodvibe {
  font-size: 10px;
  color: #888;
}
.goodvibe a {
  color: #888;
}
.goodvibe a:hover {
  color: #000;
}

/* ============================================================
  參數設定
============================================================ */
* {
  box-sizing: border-box;
  outline: none;
}

body {
  width: 100%;
  height: 100vh;
  font-family: "Carlito", sans-serif, "Noto Sans TC", sans-serif, "Pingfang TC";
  font-weight: 400;
  font-size: 16px;
  color: #323333;
  letter-spacing: 0.075rem;
}

main {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* ============================================================
  全站文字設定
============================================================ */
.uppercase {
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  text-transform: unset;
  line-height: 120%;
}

/* 全局重置input和button的邊框、背景和輪廓 */
input,
button,
textarea {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
}

/* 重置文字輸入框和按鈕的樣式 */
.form-group input[type=text],
.form-group input[type=tel],
.form-group input[type=email],
.form-group textarea {
  width: unset;
  /* 或者您想要的固定寬度 */
  padding: unset;
  /* 添加一些內邊距，根據需要調整 */
}

/* 重置按鈕的樣式 */
.form-group button {
  padding: unset;
  /* 添加一些內邊距，根據需要調整 */
  cursor: pointer;
  /* 改變滑鼠懸停時的光標形狀 */
}

.bg-ratio-1-1 {
  position: relative;
  width: 100%;
}
.bg-ratio-1-1:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.bg-ratio-1-1 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg-ratio-4-3 {
  position: relative;
  width: 100%;
}
.bg-ratio-4-3:before {
  content: "";
  display: block;
  padding-top: 75%;
}
.bg-ratio-4-3 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg-ratio-16-9 {
  position: relative;
  width: 100%;
}
.bg-ratio-16-9:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.bg-ratio-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg-ratio-3-2 {
  position: relative;
  width: 100%;
}
.bg-ratio-3-2:before {
  content: "";
  display: block;
  padding-top: 66.66%;
}
.bg-ratio-3-2 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg-ratio-2-1 {
  position: relative;
  width: 100%;
}
.bg-ratio-2-1:before {
  content: "";
  display: block;
  padding-top: 50%;
}
.bg-ratio-2-1 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.stats .container,
.client-carousel .container,
.problem .container {
  width: 100%;
  max-width: unset !important;
}

.btn-box {
  display: flex;
  gap: 1.5rem;
}

.btn-primary,
.btn-outline {
  background-color: #EB552D;
  border-radius: 100px !important;
  font-size: 20px;
  min-width: 190px;
  height: 60px;
  border: 2px solid #EB552D;
  font-weight: 700;
  transform: scale(1);
  transition: 0.5s;
}
@media (max-width: 1024px) {
  .btn-primary,
  .btn-outline {
    font-size: 20px;
  }
}
@media (max-width: 576px) {
  .btn-primary,
  .btn-outline {
    font-size: 16px;
  }
}
.btn-primary:hover,
.btn-outline:hover {
  background-color: #EB552D;
  border: 2px solid #EB552D;
  transform: scale(1.05);
  transition: 0.5s;
}

.btn-outline {
  color: #EB552D;
  border: 2px solid #EB552D;
  background-color: #fff;
  transform: scale(1);
  transition: 0.5s;
}
.btn-outline:hover {
  color: #EB552D;
  border: 2px solid #EB552D;
  background-color: #fff;
  transform: scale(1.05);
  transition: 0.5s;
}

.btn-primary span,
.btn-outline span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-section {
  padding: clamp(30px, 5.2083333333vw, 100px) clamp(40px, 5.2083333333vw, 100px);
}
@media (max-width: 1024px) {
  .contact-section {
    padding: clamp(30px, 9.765625vw, 100px) clamp(40px, 9.765625vw, 100px);
  }
}
@media (max-width: 922px) {
  .contact-section {
    padding: clamp(30px, 13.0208333333vw, 100px) clamp(40px, 13.0208333333vw, 100px);
  }
}
@media (max-width: 576px) {
  .contact-section {
    padding: clamp(60px, 17.3611111111vw, 100px) clamp(20px, 3.4722222222vw, 20px);
  }
}
.contact-section .contact-box {
  padding-right: 8rem;
}
@media (max-width: 1200px) {
  .contact-section .contact-box {
    padding-right: unset;
  }
}
.contact-section .title {
  font-weight: 700;
}
.contact-section .contact-info .info-box {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 1rem auto;
  font-size: 24px;
}
@media (max-width: 1024px) {
  .contact-section .contact-info .info-box {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .contact-section .contact-info .info-box {
    font-size: 20px;
  }
}
.contact-section .contact-info .info-box .icon {
  width: clamp(30px, 1.5625vw, 30px);
  height: clamp(30px, 1.5625vw, 30px);
}
@media (max-width: 1024px) {
  .contact-section .contact-info .info-box .icon {
    width: clamp(30px, 2.9296875vw, 30px);
    height: clamp(30px, 2.9296875vw, 30px);
  }
}
@media (max-width: 922px) {
  .contact-section .contact-info .info-box .icon {
    width: clamp(30px, 3.90625vw, 30px);
    height: clamp(30px, 3.90625vw, 30px);
  }
}
@media (max-width: 576px) {
  .contact-section .contact-info .info-box .icon {
    width: clamp(30px, 5.2083333333vw, 30px);
    height: clamp(30px, 5.2083333333vw, 30px);
  }
}
.contact-section .form-control,
.contact-section .form-select {
  font-size: 16px;
  color: #323333;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
}
.contact-section .form-control:focus,
.contact-section .form-select:focus {
  border-color: #EB552D;
  outline: none;
}
.contact-section .form-control ::placeholder,
.contact-section .form-select ::placeholder {
  color: #F7F7F7;
  font-style: italic;
}

.social-icon {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}
.social-icon a {
  display: inline-block;
  width: clamp(40px, 3.125vw, 60px);
  height: clamp(40px, 3.125vw, 60px);
  transform: scale(1);
  transition: 0.5s;
}
.social-icon a:hover {
  opacity: 0.9;
  transform: scale(1.05);
  transition: 0.5s;
}
@media (max-width: 1024px) {
  .social-icon a {
    width: clamp(40px, 5.859375vw, 60px);
    height: clamp(40px, 5.859375vw, 60px);
  }
}
@media (max-width: 922px) {
  .social-icon a {
    width: clamp(40px, 7.8125vw, 60px);
    height: clamp(40px, 7.8125vw, 60px);
  }
}
@media (max-width: 576px) {
  .social-icon a {
    width: clamp(40px, 13.8888888889vw, 80px);
    height: clamp(40px, 13.8888888889vw, 80px);
  }
}

a.a-link {
  color: #323333;
  transition: 0.5s;
}
a.a-link:hover {
  color: #EB552D;
  transition: 0.5s;
}

footer.footer {
  width: 100%;
  background-color: #FFFBF4;
  border-bottom: 15px solid #FFB42B;
  padding: clamp(40px, 2.0833333333vw, 40px) clamp(50px, 2.6041666667vw, 50px) clamp(20px, 1.0416666667vw, 20px) clamp(50px, 2.6041666667vw, 50px);
}
@media (max-width: 1024px) {
  footer.footer {
    padding: clamp(40px, 3.90625vw, 40px) clamp(50px, 4.8828125vw, 50px) clamp(20px, 1.953125vw, 20px) clamp(50px, 4.8828125vw, 50px);
  }
}
@media (max-width: 922px) {
  footer.footer {
    padding: clamp(40px, 5.2083333333vw, 40px) clamp(50px, 6.5104166667vw, 50px) clamp(20px, 2.6041666667vw, 20px) clamp(50px, 6.5104166667vw, 50px);
  }
}
@media (max-width: 576px) {
  footer.footer {
    padding: clamp(40px, 6.9444444444vw, 40px) clamp(20px, 6.9444444444vw, 40px) clamp(20px, 3.4722222222vw, 20px) clamp(20px, 6.9444444444vw, 40px);
  }
}
footer.footer .cocomart-logo {
  display: inline-block;
  width: 220px;
}
footer.footer .content-box {
  gap: 2rem;
  justify-content: space-between;
}
@media (max-width: 1024px) {
  footer.footer .content-box {
    gap: 4rem;
    margin: 3rem 0;
    justify-content: unset;
  }
}
@media (max-width: 576px) {
  footer.footer .content-box {
    gap: 2rem;
    margin: 2rem 0;
  }
}
footer.footer .content-box .nav-menu {
  line-height: 1.8rem;
}

header.header {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
}
header.header a {
  text-decoration: none;
  color: #323333;
}
header.header a:hover {
  color: #EB552D;
}
header.header .navbar-brand {
  font-weight: bold;
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.navbar {
  padding: 1rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.navbar .cocomart-logo {
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar .cocomart-logo img {
  max-height: 45px;
}
.navbar .navbar-toggler {
  font-size: 1.5rem;
  background: none;
  border: none;
  color: #323333;
}
.navbar .navbar-toggler:hover {
  color: #EB552D;
}
.navbar .navbar-nav {
  gap: 1rem;
}
.navbar .navbar-nav .nav-link {
  font-size: 18px;
  color: #323333;
}
@media (max-width: 1024px) {
  .navbar .navbar-nav .nav-link {
    font-size: 18px;
  }
}
@media (max-width: 576px) {
  .navbar .navbar-nav .nav-link {
    font-size: 16px;
  }
}
.navbar .navbar-nav .nav-link:hover {
  color: #EB552D;
}

.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 215, 126, 0.98);
  z-index: 9999;
  transform: translateX(-101%);
  transition: transform 0.3s;
  box-shadow: 2px 0 8px rgba(255, 215, 126, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mobile-nav-overlay .nav {
  width: 100%;
}
.mobile-nav-overlay .nav .nav-item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding: 1.5rem 0;
}
@media (max-width: 1024px) {
  .mobile-nav-overlay .nav .nav-link {
    font-size: 24px;
    color: #323333;
  }
}
@media (max-width: 1024px) and (max-width: 1024px) {
  .mobile-nav-overlay .nav .nav-link {
    font-size: 24px;
  }
}
@media (max-width: 1024px) and (max-width: 576px) {
  .mobile-nav-overlay .nav .nav-link {
    font-size: 20px;
  }
}
@media (max-width: 1024px) {
  .mobile-nav-overlay .nav .nav-link:hover {
    color: #EB552D;
  }
}

.mobile-nav-overlay.active {
  transform: translateX(0);
}

.btn-close {
  position: absolute;
  font-size: 30px;
  top: 20px;
  right: 20px;
  z-index: 10001;
}

@media (min-width: 1200px) {
  .mobile-nav-overlay {
    display: none;
  }
  #mobileNavToggle {
    display: none;
  }
}
.hero {
  background-color: #FFD062;
  min-height: 800px;
  height: 90vh;
}
.hero .hero-wrapper {
  text-align: center;
  height: 100%;
}
.hero .hero-content {
  background: url("../images/svg/co_font_bg.svg") no-repeat center center;
  background-size: 70% auto;
  min-height: 800px;
  height: 100%;
}
@media (max-width: 1200px) {
  .hero .hero-content {
    min-height: unset;
    background-size: 50% auto;
    height: 50%;
    padding: 0 clamp(20px, 6.0483870968vw, 60px);
  }
}
@media (max-width: 576px) {
  .hero .hero-content {
    background-size: 90% auto;
    height: 60%;
    padding: 0 clamp(20px, 6.9444444444vw, 40px);
  }
}
.hero .hero-kv {
  background: url("../images/home/home_hero-banner2.jpg") no-repeat center center;
  background-size: cover;
  height: 100%;
}
@media (max-width: 1200px) {
  .hero .hero-kv {
    min-height: unset;
    height: 50%;
  }
}
@media (max-width: 576px) {
  .hero .hero-kv {
    height: 40%;
  }
}
@media (max-width: 576px) {
  .hero .btn-box {
    display: flex;
    width: 100%;
    flex-direction: column;
    column-gap: 1.5rem;
  }
}

.stats {
  padding: 135px 0;
}
.stats .stats-item {
  text-align: center;
  font-size: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1024px) {
  .stats .stats-item {
    font-size: 20px;
  }
}
@media (max-width: 576px) {
  .stats .stats-item {
    font-size: 16px;
  }
}
.stats .stats-item .icon-box {
  width: 80px;
  height: 80px;
  margin: 0 auto 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats .stats-item .icon-box img {
  max-width: 100%;
  height: auto;
}
.stats .stats-item .text-box {
  color: #323333;
}
.stats .stats-item .text-box .item-title {
  font-size: 24px;
  color: #323333;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
@media (max-width: 1024px) {
  .stats .stats-item .text-box .item-title {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .stats .stats-item .text-box .item-title {
    font-size: 20px;
  }
}
.stats .stats-item .text-box .txt {
  font-size: 18px;
}
@media (max-width: 1024px) {
  .stats .stats-item .text-box .txt {
    font-size: 18px;
  }
}
@media (max-width: 576px) {
  .stats .stats-item .text-box .txt {
    font-size: 16px;
  }
}

.stats.home-stats, .product-stats {
  background: url(../images/home/coco_bg.png) repeat center center #FFFBF4;
  background-size: 60% auto;
}
@media (max-width: 1024px) {
  .stats.home-stats, .product-stats {
    background-size: 120% auto;
  }
}
@media (max-width: 576px) {
  .stats.home-stats, .product-stats {
    background-size: 180% auto;
  }
}
.stats.home-stats .container, .product-stats .container {
  width: 100%;
  gap: 9rem;
  justify-content: center;
}
@media (max-width: 1024px) {
  .stats.home-stats .container, .product-stats .container {
    gap: unset;
    justify-content: space-between;
    padding: 0 clamp(20px, 6.0483870968vw, 60px);
  }
}
@media (max-width: 576px) {
  .stats.home-stats .container, .product-stats .container {
    row-gap: 3rem;
    padding: 0 clamp(20px, 6.9444444444vw, 40px);
  }
}
@media (max-width: 576px) {
  .stats.home-stats .stats-item, .product-stats .stats-item {
    width: 50%;
  }
}
.stats.home-stats .stats-item .icon-box, .product-stats .stats-item .icon-box {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.3rem;
}
@media (max-width: 1024px) {
  .stats.home-stats .stats-item .icon-box, .product-stats .stats-item .icon-box {
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 576px) {
  .stats.home-stats .stats-item .icon-box, .product-stats .stats-item .icon-box {
    width: 80px;
    height: 80px;
  }
}
.stats.home-stats .stats-item .text-box .item-title, .product-stats .stats-item .text-box .item-title {
  font-size: 36px;
  color: #323333;
  font-weight: 700;
  margin-bottom: unset;
}
@media (max-width: 1024px) {
  .stats.home-stats .stats-item .text-box .item-title, .product-stats .stats-item .text-box .item-title {
    font-size: 36px;
  }
}
@media (max-width: 576px) {
  .stats.home-stats .stats-item .text-box .item-title, .product-stats .stats-item .text-box .item-title {
    font-size: 24px;
  }
}

.client-carousel {
  background-color: #fff;
}
.client-carousel .container {
  padding: clamp(40px, 4.1666666667vw, 80px) clamp(60px, 4.1666666667vw, 80px);
}
@media (max-width: 1024px) {
  .client-carousel .container {
    padding: clamp(40px, 8vw, 80px) clamp(50px, 10vw, 60px);
  }
}
@media (max-width: 576px) {
  .client-carousel .container {
    padding: clamp(40px, 10vw, 60px) clamp(20px, 3.5vw, 20px);
  }
}
.client-carousel .title .quantity {
  font-size: clamp(40px, 8vw, 80px);
  color: #EB552D;
  font-weight: 700;
}
.client-carousel .s-title {
  font-size: 24px;
}
@media (max-width: 1024px) {
  .client-carousel .s-title {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .client-carousel .s-title {
    font-size: 20px;
  }
}
.client-carousel .carousel {
  margin-top: 5rem;
}
@media (max-width: 576px) {
  .client-carousel .carousel {
    margin-top: 2rem;
  }
}
.client-carousel .client-logo {
  gap: 3rem;
}
@media (max-width: 576px) {
  .client-carousel .client-logo {
    gap: 1.5rem;
  }
}
.client-carousel .client-logo img {
  max-height: 120px;
  object-fit: contain;
}
@media (max-width: 576px) {
  .client-carousel .client-logo img {
    max-height: 90px;
  }
}

ol.carousel-indicators {
  position: unset;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-right: unset;
  margin-left: unset;
  margin-top: clamp(40px, 6vw, 60px);
}
ol.carousel-indicators li.dot {
  width: 12px !important;
  height: 12px !important;
  background-color: #ddd;
  border-radius: 50%;
  cursor: pointer;
}
ol.carousel-indicators li.dot.active {
  background-color: #FFB42B !important;
}

.problem {
  width: 100%;
}
.problem .problem-box {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background: #F7F7F7;
  padding: clamp(30px, 3.125vw, 60px) clamp(40px, 5.2083333333vw, 100px);
  overflow: hidden;
}
@media (max-width: 1024px) {
  .problem .problem-box {
    flex-direction: column;
    gap: 3rem;
    padding: clamp(30px, 5.859375vw, 60px) clamp(40px, 9.765625vw, 100px);
  }
}
@media (max-width: 922px) {
  .problem .problem-box {
    padding: clamp(30px, 7.8125vw, 60px) clamp(40px, 13.0208333333vw, 100px);
  }
}
@media (max-width: 576px) {
  .problem .problem-box {
    padding: clamp(60px, 40.9722222222vw, 160px) 0 clamp(30px, 15.4513888889vw, 60px) 0;
  }
}
.problem .problem-box .problem-context {
  position: relative;
  z-index: 1;
}
.problem .problem-box .problem-context,
.problem .problem-box .problem-list {
  flex: 1;
  width: 50%;
  display: flex;
  justify-content: center;
}
@media (max-width: 1024px) {
  .problem .problem-box .problem-context,
  .problem .problem-box .problem-list {
    width: 100%;
    align-items: center;
  }
}
.problem .problem-list {
  flex-direction: column;
}
.problem .problem-list:after {
  content: "";
  width: 25.78125vw;
  height: 40.859375vw;
  background: url("../images/svg/fretful.svg") no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -5.2083333333vw;
  right: 5.2083333333vw;
  z-index: 0;
}
@media (max-width: 1024px) {
  .problem .problem-list:after {
    width: 48.33984375vw;
    height: 76.611328125vw;
    top: unset;
    right: 4.8828125vw;
    bottom: 0;
    background-size: contain;
  }
}
@media (max-width: 576px) {
  .problem .problem-list:after {
    width: 103.125vw;
    height: 163.4375vw;
    background-size: contain;
    top: unset;
    bottom: -2.6041666667vw;
    right: 0;
  }
}
.problem .problem-list.vender:after {
  transform: scaleX(-1);
  right: unset;
  left: 5.2083333333vw;
}
@media (max-width: 1024px) {
  .problem .problem-list.vender:after {
    left: 4.8828125vw;
  }
}
@media (max-width: 576px) {
  .problem .problem-list.vender:after {
    left: 0;
  }
}
.problem .problem-list .content {
  position: relative;
  z-index: 1;
}
.problem .problem-list .icon-text {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin: 1.5rem auto;
  font-size: 20px;
}
@media (max-width: 1024px) {
  .problem .problem-list .icon-text {
    font-size: 20px;
  }
}
@media (max-width: 576px) {
  .problem .problem-list .icon-text {
    font-size: 16px;
  }
}
.problem .problem-list .icon-text img {
  width: 20px;
}

@keyframes sway {
  0% {
    transform: translateX(0) translateY(0);
  }
  20% {
    transform: translateX(-1.1vw) translateY(0vw);
  }
  40% {
    transform: translateX(-1vw) translateY(-0.2vw);
  }
  60% {
    transform: translateX(0) translateY(0);
  }
  80% {
    transform: translateX(-1vw) translateY(-0.2vw);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes sway-2 {
  0% {
    transform: translateX(0) translateY(0);
  }
  20% {
    transform: translateX(1.1vw) translateY(0vw);
  }
  45% {
    transform: translateX(1vw) translateY(0.2vw);
  }
  65% {
    transform: translateX(0) translateY(0);
  }
  80% {
    transform: translateX(1vw) translateY(0.2vw);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes sway-3 {
  0% {
    transform: translateX(0) translateY(0);
  }
  20% {
    transform: translateX(-1.2vw) translateY(0vw);
  }
  45% {
    transform: translateX(-1vw) translateY(0.3vw);
  }
  65% {
    transform: translateX(0) translateY(0);
  }
  80% {
    transform: translateX(-1vw) translateY(0.5vw);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@media (max-width: 576px) {
  @keyframes sway {
    0% {
      transform: translateX(0) translateY(0);
    }
    50% {
      transform: translateX(-4vw) translateY(-2vw);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }
  @keyframes sway-2 {
    0% {
      transform: translateX(0) translateY(0);
    }
    50% {
      transform: translateX(3vw) translateY(2vw);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }
  @keyframes sway-3 {
    0% {
      transform: translateX(0) translateY(0);
    }
    50% {
      transform: translateX(-4vw) translateY(2vw);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }
}
.message-box {
  position: relative;
}
.message-box .box {
  position: absolute;
  background: rgb(255, 255, 255);
  border: 1px solid #ddd;
  padding: 0.6rem;
  display: inline-block;
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.15);
}
@media (max-width: 576px) {
  .message-box .box {
    padding: 0.4rem;
  }
}
.message-box .box .name {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 700;
}
.message-box .box .name img {
  width: 32px;
}
@media (max-width: 576px) {
  .message-box .box .name img {
    width: 25px;
  }
}
.message-box .box .note {
  color: #555;
}
.message-box .box.box2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1rem;
  gap: 0.8rem;
}
.message-box .box.box2 .note {
  font-size: 16px;
}
@media (max-width: 576px) {
  .message-box .box.box2 .note {
    font-size: 12px;
  }
}
.message-box .box:nth-child(1) {
  top: 1.5625vw;
  left: -1.0416666667vw;
  animation: sway 8s infinite ease;
}
@media (max-width: 1441px) {
  .message-box .box:nth-child(1) {
    top: 2.0818875781vw;
    left: -1.387925052vw;
  }
}
@media (max-width: 1024px) {
  .message-box .box:nth-child(1) {
    top: 2.9296875vw;
    left: -1.953125vw;
  }
}
@media (max-width: 922px) {
  .message-box .box:nth-child(1) {
    top: 3.6585365854vw;
    left: -2.4390243902vw;
  }
}
@media (max-width: 576px) {
  .message-box .box:nth-child(1) {
    top: -32.9861111111vw;
    left: 20.8333333333vw;
    animation: sway 5s infinite ease;
  }
}
.message-box .box:nth-child(2) {
  top: 7.2916666667vw;
  left: -3.6458333333vw;
  animation: sway-2 8s infinite ease;
}
@media (max-width: 1441px) {
  .message-box .box:nth-child(2) {
    top: 9.0215128383vw;
    left: -4.1637751561vw;
  }
}
@media (max-width: 1024px) {
  .message-box .box:nth-child(2) {
    top: 12.6953125vw;
    left: -11.71875vw;
  }
}
@media (max-width: 922px) {
  .message-box .box:nth-child(2) {
    top: 15.8536585366vw;
    left: -4.8780487805vw;
  }
}
@media (max-width: 576px) {
  .message-box .box:nth-child(2) {
    top: -10.4166666667vw;
    left: 3.4722222222vw;
    animation: sway-2 5s infinite ease;
  }
}
.message-box .box:nth-child(3) {
  top: 13.0208333333vw;
  left: -3.125vw;
  animation: sway-3 8s infinite ease;
}
@media (max-width: 1441px) {
  .message-box .box:nth-child(3) {
    top: 15.9611380985vw;
    left: -1.387925052vw;
  }
}
@media (max-width: 1024px) {
  .message-box .box:nth-child(3) {
    top: 22.4609375vw;
    left: -8.7890625vw;
  }
}
@media (max-width: 922px) {
  .message-box .box:nth-child(3) {
    top: 28.0487804878vw;
    left: -10.9756097561vw;
  }
}
@media (max-width: 576px) {
  .message-box .box:nth-child(3) {
    top: unset;
    left: 26.0416666667vw;
    bottom: -4.3402777778vw;
    animation: sway-3 5s infinite ease;
  }
}
.message-box .box:nth-child(4) {
  top: 3.6458333333vw;
  right: -3.125vw;
  animation: sway-3 8s infinite ease;
}
@media (max-width: 1441px) {
  .message-box .box:nth-child(4) {
    top: 6.2456627342vw;
    right: -4.1637751561vw;
  }
}
@media (max-width: 1024px) {
  .message-box .box:nth-child(4) {
    top: 8.7890625vw;
    right: -5.859375vw;
  }
}
@media (max-width: 922px) {
  .message-box .box:nth-child(4) {
    top: 10.9756097561vw;
    right: -7.3170731707vw;
  }
}
@media (max-width: 576px) {
  .message-box .box:nth-child(4) {
    top: -12.1527777778vw;
    right: 2.6041666667vw;
  }
}
.message-box .box:nth-child(5) {
  top: 9.8958333333vw;
  right: -2.0833333333vw;
  animation: sway-2 8s infinite ease;
}
@media (max-width: 1441px) {
  .message-box .box:nth-child(5) {
    top: 13.1852879944vw;
    right: -2.7758501041vw;
  }
}
@media (max-width: 1024px) {
  .message-box .box:nth-child(5) {
    top: 18.5546875vw;
    right: -3.90625vw;
  }
}
@media (max-width: 922px) {
  .message-box .box:nth-child(5) {
    top: 23.1707317073vw;
    right: -4.8780487805vw;
  }
}
@media (max-width: 576px) {
  .message-box .box:nth-child(5) {
    display: none;
  }
}
@media (max-width: 576px) {
  .message-box.vender .box:nth-child(1) {
    top: -10.4166666667vw;
    left: 1.7361111111vw;
  }
}
@media (max-width: 576px) {
  .message-box.vender .box:nth-child(2) {
    top: -31.25vw;
    left: unset;
    right: 20.8333333333vw;
  }
}
@media (max-width: 576px) {
  .message-box.vender .box:nth-child(3) {
    top: unset;
    left: 26.0416666667vw;
    bottom: -6.9444444444vw;
  }
}
@media (max-width: 576px) {
  .message-box.vender .box:nth-child(4) {
    top: -5.2083333333vw;
    right: 2.6041666667vw;
  }
}
@media (max-width: 576px) {
  .message-box.vender .box:nth-child(5) {
    display: none;
  }
}

.features {
  background-color: #fff;
  text-align: center;
  padding: clamp(60px, 4.1666666667vw, 80px) 0;
}
@media (max-width: 1024px) {
  .features {
    width: 100%;
    padding: clamp(60px, 7.8125vw, 80px) 0;
  }
}
@media (max-width: 922px) {
  .features {
    padding: clamp(60px, 10.4166666667vw, 80px) 0;
  }
}
@media (max-width: 576px) {
  .features {
    padding: clamp(60px, 13.8888888889vw, 80px) 0;
  }
}
.features .container {
  padding: auto clamp(40px, 5.2083333333vw, 100px);
}
@media (max-width: 1024px) {
  .features .container {
    width: 100%;
    padding: auto clamp(40px, 9.765625vw, 100px);
  }
}
@media (max-width: 922px) {
  .features .container {
    padding: auto 20px;
  }
}
@media (max-width: 576px) {
  .features .container {
    padding: auto 20px;
  }
}
.features h2.title {
  color: #EB552D;
  font-weight: 700;
}
.features h2.title.font-xl {
  font-size: 42px;
}
@media (max-width: 1024px) {
  .features h2.title.font-xl {
    font-size: 42px;
  }
}
@media (max-width: 576px) {
  .features h2.title.font-xl {
    font-size: 36px;
  }
}
.features .features-item-box {
  margin-top: 3.125vw;
  row-gap: 3rem;
  justify-content: space-between;
}
@media (max-width: 1024px) {
  .features .features-item-box {
    margin-top: 5.859375vw;
  }
}
@media (max-width: 922px) {
  .features .features-item-box {
    margin-top: 7.3170731707vw;
  }
}
@media (max-width: 576px) {
  .features .features-item-box {
    margin-top: 10.4166666667vw;
  }
}
.features .features-item-box .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  width: 33.3333333333%;
  padding: 0 2rem;
}
@media (max-width: 1024px) {
  .features .features-item-box .item {
    width: 50%;
    gap: 1rem;
    padding: 0 1rem;
  }
}
@media (max-width: 576px) {
  .features .features-item-box .item {
    width: 100%;
    padding: 0 1rem;
    gap: 2rem;
  }
}
.features .features-item-box .item .icon-box {
  width: 110px;
  height: 110px;
  border-radius: 100%;
  background: #FFB42B;
  display: flex;
  justify-content: center;
  align-items: center;
}
.features .features-item-box .item .icon-box img {
  width: 70px;
  height: 70px;
}
@media (max-width: 1024px) {
  .features .features-item-box .item .icon-box {
    width: 90px;
    height: 90px;
  }
  .features .features-item-box .item .icon-box img {
    width: 50px;
    height: 50px;
  }
}
.features .features-item-box .item .content-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
.features .features-item-box .item .content-text h3 {
  font-weight: 700;
  color: #FFB42B;
}

.intro-images {
  background-color: #FDF7F5;
  padding: clamp(80px, 5.2083333333vw, 100px) clamp(40px, 5.2083333333vw, 100px);
}
@media (max-width: 1024px) {
  .intro-images {
    padding: clamp(80px, 9.765625vw, 100px) clamp(40px, 9.765625vw, 100px);
  }
}
@media (max-width: 922px) {
  .intro-images {
    padding: clamp(60px, 10.4166666667vw, 80px) 20px;
  }
}
@media (max-width: 576px) {
  .intro-images {
    padding: clamp(60px, 13.8888888889vw, 80px) 20px;
  }
}
.intro-images .intro-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.intro-images .intro-box:nth-child(odd) {
  flex-direction: column-reverse;
}
@media (max-width: 1024px) {
  .intro-images .intro-box {
    padding: 1.2rem;
  }
  .intro-images .intro-box:nth-child(1), .intro-images .intro-box:nth-child(2) {
    flex-direction: column-reverse;
  }
  .intro-images .intro-box:nth-child(3), .intro-images .intro-box:nth-child(4) {
    flex-direction: column;
  }
}
@media (max-width: 1024px) {
  .intro-images .intro-box {
    margin-bottom: 1.5rem;
  }
  .intro-images .intro-box:nth-child(1), .intro-images .intro-box:nth-child(2), .intro-images .intro-box:nth-child(3), .intro-images .intro-box:nth-child(4) {
    flex-direction: column;
  }
  .intro-images .intro-box:last-child {
    margin-bottom: 0;
  }
}
.intro-images .intro-box .title {
  font-weight: 700;
  color: #EB552D;
}
.intro-images .img-box {
  width: 100%;
  padding-top: 142.8571428571%;
}
.intro-images .img-box.intro-img-1 {
  background: url("/statics/www/images/home/pic-diagnosis-support.jpg") no-repeat center center;
  background-size: cover;
}
.intro-images .img-box.intro-img-2 {
  background: url("/statics/www/images/home/pic-coaching.jpg") no-repeat center center;
  background-size: cover;
}
.intro-images .img-box.intro-img-3 {
  background: url("/statics/www/images/home/pic-phone-support.jpg") no-repeat center center;
  background-size: cover;
}
.intro-images .img-box.intro-img-4 {
  background: url("/statics/www/images/home/pic-supply-matching.jpg") no-repeat center center;
  background-size: cover;
}

.restaurant-hero,
.vendor-hero,
.product-hero {
  background: url("../images/restaurant/restaurant-hero-bg-d.jpg") no-repeat center center;
  background-size: cover;
}
@media (max-width: 1024px) {
  .restaurant-hero,
  .vendor-hero,
  .product-hero {
    background: url("../images/restaurant/restaurant-hero-bg-t.png") no-repeat center center;
    background-size: cover;
  }
}
@media (max-width: 576px) {
  .restaurant-hero,
  .vendor-hero,
  .product-hero {
    background: url("../images/restaurant/restaurant-hero-bg-m.png") no-repeat center center;
    background-size: cover;
  }
}
.restaurant-hero .hero-content,
.vendor-hero .hero-content,
.product-hero .hero-content {
  width: 41.6666666667vw;
  height: unset;
  padding: 0 5.2083333333vw 0 4.1666666667vw;
  background: linear-gradient(90deg, #ffcec1 0%, rgba(255, 223, 214, 0.9490196078) 33%, rgba(252, 237, 233, 0.6980392157) 82%, rgba(255, 255, 255, 0) 100%);
  align-items: center;
}
@media (max-width: 1441px) {
  .restaurant-hero .hero-content,
  .vendor-hero .hero-content,
  .product-hero .hero-content {
    width: 48.5773768217vw;
    padding: 0 5.5517002082vw 0 4.1637751561vw;
  }
}
@media (max-width: 1200px) {
  .restaurant-hero .hero-content,
  .vendor-hero .hero-content,
  .product-hero .hero-content {
    width: 100%;
    height: 50%;
    padding: 7.8125vw 9.765625vw;
    background: linear-gradient(0deg, #ffcec1 0%, rgba(255, 223, 214, 0.9019607843) 30%, rgba(252, 237, 233, 0.4) 85%, rgba(255, 255, 255, 0) 100%);
    align-items: flex-end;
  }
}
@media (max-width: 576px) {
  .restaurant-hero .hero-content,
  .vendor-hero .hero-content,
  .product-hero .hero-content {
    padding: 6.9444444444vw 5.2083333333vw;
    background: linear-gradient(0deg, #ffcec1 0%, rgba(255, 223, 214, 0.9019607843) 70%, rgba(252, 237, 233, 0.4) 90%, rgba(255, 255, 255, 0) 100%);
  }
}
@media (max-width: 1024px) {
  .restaurant-hero .hero-content .title-box,
  .vendor-hero .hero-content .title-box,
  .product-hero .hero-content .title-box {
    text-align: center;
    align-items: center;
  }
}

.vendor-hero {
  background: url("../images/vendor/vendor-hero-bg-d.jpg") no-repeat center center;
  background-size: cover;
}
@media (max-width: 1024px) {
  .vendor-hero {
    background: url("../images/vendor/vendor-hero-bg-t.png") no-repeat center center;
    background-size: cover;
  }
}
@media (max-width: 576px) {
  .vendor-hero {
    background: url("../images/vendor/vendor-hero-bg-m.png") no-repeat center center;
    background-size: cover;
  }
}
.vendor-hero .hero-content {
  background: linear-gradient(90deg, #FFD77E 0%, rgba(255, 228, 169, 0.7803921569) 44%, rgba(255, 241, 211, 0.47) 86%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 1441px) {
  .vendor-hero .hero-content {
    width: 48.5773768217vw;
    padding: 0 5.5517002082vw 0 4.1637751561vw;
  }
}
@media (max-width: 1200px) {
  .vendor-hero .hero-content {
    width: 100%;
    height: 50%;
    padding: 7.8125vw 9.765625vw;
    background: linear-gradient(0deg, #FFD77E 0%, rgba(255, 228, 169, 0.7803921569) 30%, rgba(255, 241, 211, 0.47) 85%, rgba(255, 255, 255, 0) 100%);
    align-items: flex-end;
  }
}
@media (max-width: 576px) {
  .vendor-hero .hero-content {
    padding: 6.9444444444vw 5.2083333333vw;
    background: linear-gradient(0deg, #FFD77E 0%, rgba(255, 228, 169, 0.7803921569) 70%, rgba(255, 241, 211, 0.47) 90%, rgba(255, 255, 255, 0) 100%);
  }
}

.restaurant-stats,
.vendor-stats {
  background: linear-gradient(180deg, #FDF7F5 66%, #FFFFFF 100%);
}
.restaurant-stats.stats,
.vendor-stats.stats {
  padding: 80px auto 100px auto;
}
.restaurant-stats .container,
.vendor-stats .container {
  width: 100%;
  gap: 4.5rem;
  justify-content: center;
}
@media (max-width: 1024px) {
  .restaurant-stats .container,
  .vendor-stats .container {
    gap: 4.5rem;
    justify-content: center;
    padding: 0 clamp(20px, 5.859375vw, 60px);
  }
}
@media (max-width: 576px) {
  .restaurant-stats .container,
  .vendor-stats .container {
    row-gap: 3rem;
    padding: 0 clamp(20px, 6.9444444444vw, 40px);
  }
}
.restaurant-stats .title-box,
.vendor-stats .title-box {
  margin-bottom: 5rem;
  padding: 0 20px;
}
.restaurant-stats .title-box .title,
.vendor-stats .title-box .title {
  color: #323333;
  font-weight: 700;
  font-size: 36px !important;
}
.restaurant-stats .title-box .txt,
.vendor-stats .title-box .txt {
  font-size: 24px;
  color: #EB552D;
  font-size: 24px !important;
}
@media (max-width: 1024px) {
  .restaurant-stats .title-box .txt,
  .vendor-stats .title-box .txt {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .restaurant-stats .title-box .txt,
  .vendor-stats .title-box .txt {
    font-size: 20px;
  }
}
.restaurant-stats .stats-item,
.vendor-stats .stats-item {
  max-width: 220px;
  gap: 2rem;
}
@media (max-width: 576px) {
  .restaurant-stats .stats-item,
  .vendor-stats .stats-item {
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    gap: 1.5rem;
  }
}
.restaurant-stats .stats-item .icon-box,
.vendor-stats .stats-item .icon-box {
  margin: 0 !important;
  width: 140px;
  height: 140px;
  background-color: #FFFFFF;
  border-radius: 100%;
  padding: 1.6rem;
}
@media (max-width: 576px) {
  .restaurant-stats .stats-item .icon-box,
  .vendor-stats .stats-item .icon-box {
    width: 120px;
    height: 120px;
    padding: 1.5rem;
  }
}
.restaurant-stats .stats-item .icon-box img,
.vendor-stats .stats-item .icon-box img {
  width: 100%;
  height: 100%;
}
@media (max-width: 576px) {
  .restaurant-stats .stats-item .text-box,
  .vendor-stats .stats-item .text-box {
    text-align: left;
    align-items: center;
  }
}

.vendor-stats {
  background: linear-gradient(180deg, #FFFBF4 66%, #FFFFFF 100%);
}
.vendor-stats .title-box {
  margin-bottom: 5rem;
  padding: 0 20px;
}
.vendor-stats .title-box .txt {
  font-size: 24px;
  color: #F79F00;
  font-size: 24px !important;
}
@media (max-width: 1024px) {
  .vendor-stats .title-box .txt {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .vendor-stats .title-box .txt {
    font-size: 20px;
  }
}

.solution,
.pain {
  background: url(../images/restaurant/cocofont-repeat-bg.png) repeat bottom center;
  background-size: 45% auto;
  background-color: #FDF7F5;
}
@media (max-width: 1024px) {
  .solution,
  .pain {
    background: linear-gradient(to top, #FDF7F5 0%, #FDF7F5 40%, rgba(253, 247, 245, 0) 75%, rgba(253, 247, 245, 0) 100%), url("../images/restaurant/cocofont-repeat-bg.png") repeat center bottom, #FDF7F5;
    background-size: 100% 100%, 45% auto, auto;
    background-repeat: no-repeat, repeat, no-repeat;
    overflow: hidden;
  }
}
@media (max-width: 576px) {
  .solution,
  .pain {
    background: linear-gradient(to top, #FDF7F5 0%, #FDF7F5 50%, rgba(253, 247, 245, 0) 75%, rgba(253, 247, 245, 0) 100%), url("../images/restaurant/cocofont-repeat-bg.png") repeat center bottom, #FDF7F5;
    background-size: 100% 100%, 75% auto, auto;
    background-repeat: no-repeat, repeat, no-repeat;
    overflow: hidden;
  }
}
.solution .container,
.pain .container {
  max-width: 100%;
}
.solution .solution-img-bg-content,
.solution .pain-img-bg-content,
.pain .solution-img-bg-content,
.pain .pain-img-bg-content {
  background: url("../images/restaurant/solution-img-d.png") no-repeat;
  background-position: 100% 100%;
  background-size: auto 47.7604166667vw;
  padding: 6.25vw 0;
}
@media (max-width: 1441px) {
  .solution .solution-img-bg-content,
  .solution .pain-img-bg-content,
  .pain .solution-img-bg-content,
  .pain .pain-img-bg-content {
    background-position: 120% 100%;
    background-size: auto 56vw;
    padding: 8.3275503123vw 0;
  }
}
@media (max-width: 1200px) {
  .solution .solution-img-bg-content,
  .solution .pain-img-bg-content,
  .pain .solution-img-bg-content,
  .pain .pain-img-bg-content {
    background-size: auto 76.4166666667vw;
    padding: 10vw 0;
  }
}
@media (max-width: 1024px) {
  .solution .solution-img-bg-content,
  .solution .pain-img-bg-content,
  .pain .solution-img-bg-content,
  .pain .pain-img-bg-content {
    background: none;
    padding: 11.71875vw 0;
  }
}
@media (max-width: 922px) {
  .solution .solution-img-bg-content,
  .solution .pain-img-bg-content,
  .pain .solution-img-bg-content,
  .pain .pain-img-bg-content {
    padding: 13.0151843818vw 0;
  }
}
@media (max-width: 576px) {
  .solution .solution-img-bg-content,
  .solution .pain-img-bg-content,
  .pain .solution-img-bg-content,
  .pain .pain-img-bg-content {
    padding: 20.8333333333vw 0;
  }
}
.solution .solution-content,
.solution .pain-content,
.pain .solution-content,
.pain .pain-content {
  text-align: center;
  width: 46.875vw;
  margin-left: 5.2083333333vw;
}
@media screen and (max-width: 1650px) {
  .solution .solution-content,
  .solution .pain-content,
  .pain .solution-content,
  .pain .pain-content {
    width: 54.5454545455vw;
    margin-left: 1.8181818182vw;
  }
}
@media (max-width: 1441px) {
  .solution .solution-content,
  .solution .pain-content,
  .pain .solution-content,
  .pain .pain-content {
    gap: 1.5rem;
    width: 62.4566273421vw;
    margin-left: 2.0818875781vw;
  }
}
@media (max-width: 1200px) {
  .solution .solution-content,
  .solution .pain-content,
  .pain .solution-content,
  .pain .pain-content {
    width: 75vw;
    margin-left: 5vw;
  }
}
@media (max-width: 1024px) {
  .solution .solution-content,
  .solution .pain-content,
  .pain .solution-content,
  .pain .pain-content {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 1024px) {
  .solution .solution-content .solution-box,
  .solution .solution-content .pain-box,
  .solution .pain-content .solution-box,
  .solution .pain-content .pain-box,
  .pain .solution-content .solution-box,
  .pain .solution-content .pain-box,
  .pain .pain-content .solution-box,
  .pain .pain-content .pain-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
  }
}
.solution .solution-content .solution-box .title-box,
.solution .solution-content .pain-box .title-box,
.solution .pain-content .solution-box .title-box,
.solution .pain-content .pain-box .title-box,
.pain .solution-content .solution-box .title-box,
.pain .solution-content .pain-box .title-box,
.pain .pain-content .solution-box .title-box,
.pain .pain-content .pain-box .title-box {
  padding: 0 4.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 1441px) {
  .solution .solution-content .solution-box .title-box,
  .solution .solution-content .pain-box .title-box,
  .solution .pain-content .solution-box .title-box,
  .solution .pain-content .pain-box .title-box,
  .pain .solution-content .solution-box .title-box,
  .pain .solution-content .pain-box .title-box,
  .pain .pain-content .solution-box .title-box,
  .pain .pain-content .pain-box .title-box {
    margin-bottom: 2.5rem;
  }
}
@media (max-width: 1024px) {
  .solution .solution-content .solution-box .title-box,
  .solution .solution-content .pain-box .title-box,
  .solution .pain-content .solution-box .title-box,
  .solution .pain-content .pain-box .title-box,
  .pain .solution-content .solution-box .title-box,
  .pain .solution-content .pain-box .title-box,
  .pain .pain-content .solution-box .title-box,
  .pain .pain-content .pain-box .title-box {
    padding: 0 4rem;
    margin-bottom: 3rem;
  }
}
@media (max-width: 576px) {
  .solution .solution-content .solution-box .title-box,
  .solution .solution-content .pain-box .title-box,
  .solution .pain-content .solution-box .title-box,
  .solution .pain-content .pain-box .title-box,
  .pain .solution-content .solution-box .title-box,
  .pain .solution-content .pain-box .title-box,
  .pain .pain-content .solution-box .title-box,
  .pain .pain-content .pain-box .title-box {
    padding: 0 1rem;
    margin-bottom: 3rem;
  }
}
.solution .solution-content .solution-box .title-box .title,
.solution .solution-content .pain-box .title-box .title,
.solution .pain-content .solution-box .title-box .title,
.solution .pain-content .pain-box .title-box .title,
.pain .solution-content .solution-box .title-box .title,
.pain .solution-content .pain-box .title-box .title,
.pain .pain-content .solution-box .title-box .title,
.pain .pain-content .pain-box .title-box .title {
  font-size: 36px;
  color: #EB552D;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .solution .solution-content .solution-box .title-box .title,
  .solution .solution-content .pain-box .title-box .title,
  .solution .pain-content .solution-box .title-box .title,
  .solution .pain-content .pain-box .title-box .title,
  .pain .solution-content .solution-box .title-box .title,
  .pain .solution-content .pain-box .title-box .title,
  .pain .pain-content .solution-box .title-box .title,
  .pain .pain-content .pain-box .title-box .title {
    font-size: 36px;
  }
}
@media (max-width: 576px) {
  .solution .solution-content .solution-box .title-box .title,
  .solution .solution-content .pain-box .title-box .title,
  .solution .pain-content .solution-box .title-box .title,
  .solution .pain-content .pain-box .title-box .title,
  .pain .solution-content .solution-box .title-box .title,
  .pain .solution-content .pain-box .title-box .title,
  .pain .pain-content .solution-box .title-box .title,
  .pain .pain-content .pain-box .title-box .title {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .solution .solution-content .solution-box .title-box .title,
  .solution .solution-content .pain-box .title-box .title,
  .solution .pain-content .solution-box .title-box .title,
  .solution .pain-content .pain-box .title-box .title,
  .pain .solution-content .solution-box .title-box .title,
  .pain .solution-content .pain-box .title-box .title,
  .pain .pain-content .solution-box .title-box .title,
  .pain .pain-content .pain-box .title-box .title {
    font-size: 2rem;
  }
}
.solution .solution-content .solution-box .title-box .text-content,
.solution .solution-content .pain-box .title-box .text-content,
.solution .pain-content .solution-box .title-box .text-content,
.solution .pain-content .pain-box .title-box .text-content,
.pain .solution-content .solution-box .title-box .text-content,
.pain .solution-content .pain-box .title-box .text-content,
.pain .pain-content .solution-box .title-box .text-content,
.pain .pain-content .pain-box .title-box .text-content {
  font-size: 24px;
  color: #323333;
}
@media (max-width: 1024px) {
  .solution .solution-content .solution-box .title-box .text-content,
  .solution .solution-content .pain-box .title-box .text-content,
  .solution .pain-content .solution-box .title-box .text-content,
  .solution .pain-content .pain-box .title-box .text-content,
  .pain .solution-content .solution-box .title-box .text-content,
  .pain .solution-content .pain-box .title-box .text-content,
  .pain .pain-content .solution-box .title-box .text-content,
  .pain .pain-content .pain-box .title-box .text-content {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .solution .solution-content .solution-box .title-box .text-content,
  .solution .solution-content .pain-box .title-box .text-content,
  .solution .pain-content .solution-box .title-box .text-content,
  .solution .pain-content .pain-box .title-box .text-content,
  .pain .solution-content .solution-box .title-box .text-content,
  .pain .solution-content .pain-box .title-box .text-content,
  .pain .pain-content .solution-box .title-box .text-content,
  .pain .pain-content .pain-box .title-box .text-content {
    font-size: 20px;
  }
}
@media (max-width: 576px) {
  .solution .solution-content .solution-box .title-box .text-content,
  .solution .solution-content .pain-box .title-box .text-content,
  .solution .pain-content .solution-box .title-box .text-content,
  .solution .pain-content .pain-box .title-box .text-content,
  .pain .solution-content .solution-box .title-box .text-content,
  .pain .solution-content .pain-box .title-box .text-content,
  .pain .pain-content .solution-box .title-box .text-content,
  .pain .pain-content .pain-box .title-box .text-content {
    font-size: 18px;
  }
}
.solution .solution-content .solution-box .solution-img,
.solution .solution-content .solution-box .pain-img,
.solution .solution-content .pain-box .solution-img,
.solution .solution-content .pain-box .pain-img,
.solution .pain-content .solution-box .solution-img,
.solution .pain-content .solution-box .pain-img,
.solution .pain-content .pain-box .solution-img,
.solution .pain-content .pain-box .pain-img,
.pain .solution-content .solution-box .solution-img,
.pain .solution-content .solution-box .pain-img,
.pain .solution-content .pain-box .solution-img,
.pain .solution-content .pain-box .pain-img,
.pain .pain-content .solution-box .solution-img,
.pain .pain-content .solution-box .pain-img,
.pain .pain-content .pain-box .solution-img,
.pain .pain-content .pain-box .pain-img {
  justify-content: center;
  align-items: center;
}
.solution .solution-content .solution-box .solution-img img,
.solution .solution-content .solution-box .pain-img img,
.solution .solution-content .pain-box .solution-img img,
.solution .solution-content .pain-box .pain-img img,
.solution .pain-content .solution-box .solution-img img,
.solution .pain-content .solution-box .pain-img img,
.solution .pain-content .pain-box .solution-img img,
.solution .pain-content .pain-box .pain-img img,
.pain .solution-content .solution-box .solution-img img,
.pain .solution-content .solution-box .pain-img img,
.pain .solution-content .pain-box .solution-img img,
.pain .solution-content .pain-box .pain-img img,
.pain .pain-content .solution-box .solution-img img,
.pain .pain-content .solution-box .pain-img img,
.pain .pain-content .pain-box .solution-img img,
.pain .pain-content .pain-box .pain-img img {
  width: 100%;
}
.solution .solution-item-box,
.solution .pain-item-box,
.pain .solution-item-box,
.pain .pain-item-box {
  gap: 1.8rem;
  justify-content: center;
}
@media (max-width: 576px) {
  .solution .solution-item-box,
  .solution .pain-item-box,
  .pain .solution-item-box,
  .pain .pain-item-box {
    gap: 1rem;
    padding: 0 1.5rem;
    justify-content: start;
    align-items: start;
    text-align: left;
  }
}
.solution .solution-item-box .item,
.solution .pain-item-box .item,
.pain .solution-item-box .item,
.pain .pain-item-box .item {
  width: 13.0208333333vw;
  height: 13.0208333333vw;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border: 4px solid #EB552D;
  gap: 1rem;
  padding: 1.0416666667vw;
  border-radius: 20px;
}
@media screen and (max-width: 1650px) {
  .solution .solution-item-box .item,
  .solution .pain-item-box .item,
  .pain .solution-item-box .item,
  .pain .pain-item-box .item {
    padding: 1.2121212121vw;
    width: 15.1515151515vw;
    height: 15.1515151515vw;
  }
}
@media (max-width: 1441px) {
  .solution .solution-item-box .item,
  .solution .pain-item-box .item,
  .pain .solution-item-box .item,
  .pain .pain-item-box .item {
    padding: 1.387925052vw;
    width: 17.3490631506vw;
    height: 17.3490631506vw;
  }
}
@media (max-width: 1200px) {
  .solution .solution-item-box .item,
  .solution .pain-item-box .item,
  .pain .solution-item-box .item,
  .pain .pain-item-box .item {
    padding: 1.4641288433vw;
    width: 18.3016105417vw;
    height: 18.3016105417vw;
  }
}
@media (max-width: 1024px) {
  .solution .solution-item-box .item,
  .solution .pain-item-box .item,
  .pain .solution-item-box .item,
  .pain .pain-item-box .item {
    padding: 1.953125vw;
    width: 24.4140625vw;
    height: 24.4140625vw;
  }
}
@media (max-width: 922px) {
  .solution .solution-item-box .item,
  .solution .pain-item-box .item,
  .pain .solution-item-box .item,
  .pain .pain-item-box .item {
    padding: 2.169197397vw;
    width: 29.8264642082vw;
    height: 29.8264642082vw;
  }
}
@media (max-width: 576px) {
  .solution .solution-item-box .item,
  .solution .pain-item-box .item,
  .pain .solution-item-box .item,
  .pain .pain-item-box .item {
    padding: 3.4722222222vw;
    width: 100%;
    height: auto;
  }
}
.solution .solution-item-box .item .tag-h,
.solution .pain-item-box .item .tag-h,
.pain .solution-item-box .item .tag-h,
.pain .pain-item-box .item .tag-h {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 576px) {
  .solution .solution-item-box .item .tag-h,
  .solution .pain-item-box .item .tag-h,
  .pain .solution-item-box .item .tag-h,
  .pain .pain-item-box .item .tag-h {
    flex-direction: row;
    justify-content: start;
  }
}
.solution .solution-item-box .item .tag-h .icon-check,
.solution .pain-item-box .item .tag-h .icon-check,
.pain .solution-item-box .item .tag-h .icon-check,
.pain .pain-item-box .item .tag-h .icon-check {
  width: 50px;
}
@media (max-width: 576px) {
  .solution .solution-item-box .item .tag-h .icon-check,
  .solution .pain-item-box .item .tag-h .icon-check,
  .pain .solution-item-box .item .tag-h .icon-check,
  .pain .pain-item-box .item .tag-h .icon-check {
    width: 20px;
  }
}
.solution .solution-item-box .item .tag-h .s-title,
.solution .pain-item-box .item .tag-h .s-title,
.pain .solution-item-box .item .tag-h .s-title,
.pain .pain-item-box .item .tag-h .s-title {
  font-size: 24px;
  color: #EB552D;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .solution .solution-item-box .item .tag-h .s-title,
  .solution .pain-item-box .item .tag-h .s-title,
  .pain .solution-item-box .item .tag-h .s-title,
  .pain .pain-item-box .item .tag-h .s-title {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .solution .solution-item-box .item .tag-h .s-title,
  .solution .pain-item-box .item .tag-h .s-title,
  .pain .solution-item-box .item .tag-h .s-title,
  .pain .pain-item-box .item .tag-h .s-title {
    font-size: 20px;
  }
}
.solution .solution-item-box .item .txt,
.solution .pain-item-box .item .txt,
.pain .solution-item-box .item .txt,
.pain .pain-item-box .item .txt {
  font-size: 18px;
  color: #323333;
}
@media (max-width: 1024px) {
  .solution .solution-item-box .item .txt,
  .solution .pain-item-box .item .txt,
  .pain .solution-item-box .item .txt,
  .pain .pain-item-box .item .txt {
    font-size: 18px;
  }
}
@media (max-width: 576px) {
  .solution .solution-item-box .item .txt,
  .solution .pain-item-box .item .txt,
  .pain .solution-item-box .item .txt,
  .pain .pain-item-box .item .txt {
    font-size: 16px;
  }
}

.vendor .solution {
  background: url(../images/vendor/cocofont-repeat-bg-y.png) repeat bottom center;
  background-size: 45% auto;
  background-color: #FFFBF4;
}
@media (max-width: 1024px) {
  .vendor .solution {
    background: linear-gradient(to top, #FFFBF4 0%, #FFFBF4 40%, rgba(255, 251, 244, 0) 75%, rgba(255, 251, 244, 0) 100%), url("../images/vendor/cocofont-repeat-bg-y.png") repeat center bottom, #FFFBF4;
    background-size: 100% 100%, 45% auto, auto;
    background-repeat: no-repeat, repeat, no-repeat;
    overflow: hidden;
  }
}
@media (max-width: 576px) {
  .vendor .solution {
    background: linear-gradient(to top, #FFFBF4 0%, #FFFBF4 50%, rgba(255, 251, 244, 0) 75%, rgba(255, 251, 244, 0) 100%), url("../images/vendor/cocofont-repeat-bg-y.png") repeat center bottom, #FFFBF4;
    background-size: 100% 100%, 75% auto, auto;
    background-repeat: no-repeat, repeat, no-repeat;
    overflow: hidden;
  }
}
.vendor .solution-img-bg-content {
  background: url("../images/vendor/solution-img-d.png") no-repeat;
  background-position: 100% 100%;
  background-size: auto 51.8229166667vw;
  padding: 6.25vw 0;
}
@media (max-width: 1441px) {
  .vendor .solution-img-bg-content {
    background-position: 120% 100%;
    background-size: auto 60.7633587786vw;
    padding: 8.3275503123vw 0;
  }
}
@media (max-width: 1200px) {
  .vendor .solution-img-bg-content {
    background-size: auto 82.9166666667vw;
    padding: 10vw 0;
  }
}
@media (max-width: 1024px) {
  .vendor .solution-img-bg-content {
    background: none;
    padding: 11.71875vw 0;
  }
}
@media (max-width: 922px) {
  .vendor .solution-img-bg-content {
    padding: 13.0151843818vw 0;
  }
}
@media (max-width: 576px) {
  .vendor .solution-img-bg-content {
    padding: 20.8333333333vw 0;
  }
}
.vendor .solution-content .solution-box .title-box .title {
  color: #F79F00;
}
.vendor .solution-item-box .item {
  border: 4px solid #FFB42B;
}
.vendor .solution-item-box .item:last-child {
  width: 27.725vw;
}
@media screen and (max-width: 1650px) {
  .vendor .solution-item-box .item:last-child {
    width: 32.2618181818vw;
  }
}
@media (max-width: 1441px) {
  .vendor .solution-item-box .item:last-child {
    width: 36.9188063845vw;
  }
}
@media (max-width: 1200px) {
  .vendor .solution-item-box .item:last-child {
    width: 34.2606149341vw;
  }
}
@media (max-width: 1024px) {
  .vendor .solution-item-box .item:last-child {
    width: 51.953125vw;
  }
}
@media (max-width: 922px) {
  .vendor .solution-item-box .item:last-child {
    width: 63.4707158351vw;
  }
}
@media (max-width: 576px) {
  .vendor .solution-item-box .item:last-child {
    width: 100%;
  }
}
.vendor .solution-item-box .item .tag-h .s-title {
  color: #F79F00;
}

.pain {
  background: url(../images/restaurant/pin-bg.svg) no-repeat left top;
  background-size: 100% auto;
  background-color: #F3F3F3;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .pain {
    background: url(../images/restaurant/pin-bg-t.svg) no-repeat center top;
    background-size: 100% auto;
    background-color: #F3F3F3;
  }
}
@media (max-width: 576px) {
  .pain {
    background: url(../images/restaurant/pin-bg-m.svg) no-repeat center top;
    background-size: 100% auto;
    background-color: #F3F3F3;
  }
}
.pain .pain-img-bg-content {
  display: flex;
  justify-content: end;
  margin-left: 0;
  background: url("../images/restaurant/pain-img-d.png") no-repeat;
  background-position: 10.4166666667vw 100%;
  background-size: auto 43.8385416667vw;
  padding: 6.25vw 0;
}
@media (max-width: 1441px) {
  .pain .pain-img-bg-content {
    background-position: 6.9396252602vw 100%;
    background-size: auto 54.106870229vw;
    padding: 8.3275503123vw 0;
  }
}
@media (max-width: 1200px) {
  .pain .pain-img-bg-content {
    background-position: 16.6666666667vw 100%;
    background-size: auto 73.8333333333vw;
    padding: 10vw 0;
  }
}
@media (max-width: 1024px) {
  .pain .pain-img-bg-content {
    background: none;
    padding: 11.71875vw 0;
  }
}
@media (max-width: 922px) {
  .pain .pain-img-bg-content {
    padding: 13.0151843818vw 0;
  }
}
@media (max-width: 576px) {
  .pain .pain-img-bg-content {
    padding: 20.8333333333vw 0;
  }
}
.pain .pain-content {
  margin-left: 0;
  margin-right: 5.2083333333vw;
}
@media screen and (max-width: 1650px) {
  .pain .pain-content {
    margin-right: 1.8181818182vw;
  }
}
@media (max-width: 1441px) {
  .pain .pain-content {
    margin-right: 2.0818875781vw;
  }
}
@media (max-width: 1200px) {
  .pain .pain-content {
    margin-right: 2.5vw;
  }
}
@media (max-width: 1024px) {
  .pain .pain-content {
    width: 100%;
    margin-right: 0;
  }
}
.pain .pain-content .pain-box .title-box .title {
  color: #323333;
}
@media (max-width: 1024px) {
  .pain .pain-content .pain-box .pain-img {
    justify-content: center;
    width: 50.1953125vw;
  }
}
@media (max-width: 922px) {
  .pain .pain-content .pain-box .pain-img {
    justify-content: center;
    width: 55.748373102vw;
  }
}
@media (max-width: 576px) {
  .pain .pain-content .pain-box .pain-img {
    justify-content: center;
    width: 89.2361111111vw;
    padding-top: 100px;
  }
}
.pain .pain-item-box .item {
  border: 4px solid #ccc;
}
.pain .pain-item-box .item .tag-h .s-title {
  color: #323333;
}
.pain .message-box {
  width: 100%;
  transform: translate(5.2083333333vw, 0);
}
@media (max-width: 1441px) {
  .pain .message-box {
    transform: translate(3.4698126301vw, 0);
  }
}
.pain .message-box .box:nth-child(1) {
  left: 0;
  top: 10.4166666667vw;
}
@media (max-width: 1024px) {
  .pain .message-box .box:nth-child(1) {
    left: 9.765625vw;
    top: 34.1796875vw;
  }
}
@media (max-width: 576px) {
  .pain .message-box .box:nth-child(1) {
    left: 10.4166666667vw;
    top: 78.125vw;
  }
}
.pain .message-box .box:nth-child(2) {
  left: 26.0416666667vw;
  top: 4.1666666667vw;
}
@media (max-width: 1441px) {
  .pain .message-box .box:nth-child(2) {
    left: 19.4309507287vw;
    top: 2.7758501041vw;
  }
}
@media (max-width: 1024px) {
  .pain .message-box .box:nth-child(2) {
    left: unset;
    right: 12.6953125vw;
    top: 27.34375vw;
  }
}
@media (max-width: 576px) {
  .pain .message-box .box:nth-child(2) {
    left: unset;
    right: 8.6805555556vw;
    top: 60.7638888889vw;
  }
}
.pain .message-box .box:nth-child(3) {
  left: 3.6458333333vw;
  top: 23.4375vw;
}
@media (max-width: 1441px) {
  .pain .message-box .box:nth-child(3) {
    left: 3.4698126301vw;
    top: 31.2283136711vw;
  }
}
@media (max-width: 1024px) {
  .pain .message-box .box:nth-child(3) {
    left: 6.8359375vw;
    top: 58.59375vw;
  }
}
@media (max-width: 576px) {
  .pain .message-box .box:nth-child(3) {
    left: 6.9444444444vw;
    top: 52.0833333333vw;
    bottom: unset;
  }
}

.vendor .pain .pain-img-bg-content {
  background: url("../images/vendor/pain-img-d.png") no-repeat;
  background-position: 10.4166666667vw 100%;
  background-size: auto 43.8385416667vw;
  padding: 6.25vw 0;
}
@media (max-width: 1441px) {
  .vendor .pain .pain-img-bg-content {
    background-position: 1.387925052vw 100%;
    background-size: auto 52.2623178348vw;
    padding: 8.3275503123vw 0;
  }
}
@media (max-width: 1200px) {
  .vendor .pain .pain-img-bg-content {
    background-position: 16.6666666667vw 100%;
    background-size: auto 73.8333333333vw;
    padding: 10vw 0;
  }
}
@media (max-width: 1024px) {
  .vendor .pain .pain-img-bg-content {
    background: none;
    padding: 11.71875vw 0;
  }
}
@media (max-width: 922px) {
  .vendor .pain .pain-img-bg-content {
    padding: 13.0151843818vw 0;
  }
}
@media (max-width: 576px) {
  .vendor .pain .pain-img-bg-content {
    padding: 20.8333333333vw 0;
  }
}
@media (max-width: 576px) {
  .vendor .pain .pain-img {
    position: relative;
    z-index: 1;
  }
}
.vendor .pain .message-box {
  width: 100%;
  transform: translate(5.2083333333vw, 0);
}
@media (max-width: 1441px) {
  .vendor .pain .message-box {
    transform: translate(3.4698126301vw, 0);
  }
}
.vendor .pain .message-box .box:nth-child(1) {
  left: 0;
  top: 10.4166666667vw;
}
@media (max-width: 1024px) {
  .vendor .pain .message-box .box:nth-child(1) {
    left: 9.765625vw;
    top: 34.1796875vw;
  }
}
@media (max-width: 576px) {
  .vendor .pain .message-box .box:nth-child(1) {
    left: unset;
    right: 10.4166666667vw;
    top: 67.7083333333vw;
    z-index: 1;
  }
}
.vendor .pain .message-box .box:nth-child(2) {
  left: 26.0416666667vw;
  top: 4.1666666667vw;
}
@media (max-width: 1441px) {
  .vendor .pain .message-box .box:nth-child(2) {
    left: 13.8792505205vw;
    top: 2.7758501041vw;
  }
}
@media (max-width: 1024px) {
  .vendor .pain .message-box .box:nth-child(2) {
    left: unset;
    right: 32.2265625vw;
    top: 27.34375vw;
  }
}
@media (max-width: 576px) {
  .vendor .pain .message-box .box:nth-child(2) {
    right: unset;
    left: 3.4722222222vw;
    top: 62.5vw;
    z-index: 0;
  }
}
.vendor .pain .message-box .box:nth-child(3) {
  left: 31.25vw;
  top: 9.375vw;
}
@media (max-width: 1441px) {
  .vendor .pain .message-box .box:nth-child(3) {
    left: 20.8188757807vw;
    top: 10.4094378904vw;
  }
}
@media (max-width: 1024px) {
  .vendor .pain .message-box .box:nth-child(3) {
    left: unset;
    right: 22.4609375vw;
    top: 39.0625vw;
  }
}
@media (max-width: 576px) {
  .vendor .pain .message-box .box:nth-child(3) {
    left: unset;
    right: 6.9444444444vw;
    top: 86.8055555556vw;
    bottom: unset;
    z-index: 0;
  }
}

.how {
  padding: 80px 0;
  background: linear-gradient(180deg, #FDF7F5 40%, #FFFFFF 100%);
}
.how .container {
  max-width: unset;
  width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media (max-width: 1024px) {
  .how .container {
    width: 100%;
    padding: 0 1.953125vw;
  }
}
@media (max-width: 922px) {
  .how .container {
    padding: 0 4.3383947939vw;
  }
}
.how .title-box .title {
  font-size: 36px !important;
  font-weight: 700;
}
.how .title-box .text-content {
  font-size: 18px !important;
}
.how .step-list-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  margin: 2rem auto;
  flex-wrap: wrap;
}
@media (max-width: 1024px) {
  .how .step-list-box {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
  }
}
.how .step-list-box .step-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
}
.how .step-list-box .step-item .item {
  padding: 0.5rem 1rem;
  background-color: #EB552D;
  border-radius: 50px;
  text-align: center;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
}
.how .carousel {
  width: 1000px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .how .carousel {
    width: 100%;
  }
}
.how .carousel-indicators {
  margin-top: 2rem;
}
.how .product-deom-info {
  flex-direction: column;
  width: 100%;
}
.how .product-deom-info .title {
  font-weight: 700;
  font-size: 18px !important;
  color: #EB552D;
}
.how .product-deom-info .product-img {
  width: 95%;
}
.how .product-deom-info .product-img img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
  border: 1px solid #EFEFEF;
}

.how.vendor-how {
  background: linear-gradient(180deg, #FFFBF4 40%, #FFFFFF 100%);
}
.how.vendor-how .step-list-box .step-item .item {
  background-color: #FFB42B;
}
.how.vendor-how .product-deom-info .title {
  font-weight: 700;
  font-size: 18px !important;
  color: #F79F00;
}

.service-introduce {
  padding: 5.2083333333vw;
}
@media (max-width: 1024px) {
  .service-introduce {
    padding: 5.859375vw;
  }
}
.service-introduce .container {
  max-width: unset;
  width: 100%;
  display: flex;
  flex-direction: row;
}
@media (max-width: 1024px) {
  .service-introduce .container {
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }
}
.service-introduce .service-img-box {
  display: flex;
  align-items: center;
}
@media (max-width: 1024px) {
  .service-introduce .service-img-box {
    justify-content: center;
  }
}
.service-introduce .service-img-box .service-img {
  width: 37.5vw;
  border-radius: 30px;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .service-introduce .service-img-box .service-img {
    width: 70.3125vw;
  }
}
@media (max-width: 922px) {
  .service-introduce .service-img-box .service-img {
    width: 78.0911062907vw;
  }
}
@media (max-width: 576px) {
  .service-introduce .service-img-box .service-img {
    width: 125vw;
  }
}
.service-introduce .service-img-box .service-img img {
  width: 100%;
}
.service-introduce .introduce-item-content {
  display: flex;
  align-items: center;
}
.service-introduce .introduce-item-content .introduce-box {
  width: 1005px;
}
.service-introduce .introduce-item-content .title {
  color: #EB552D;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .service-introduce .introduce-item-content .title {
    text-align: center;
  }
}
.service-introduce .introduce-item-content .item-box {
  flex-direction: column;
  gap: 1rem;
}
.service-introduce .introduce-item-content .item-box .item {
  background: #FDF7F5;
  padding: 1rem 2rem 0.8rem 2rem;
  align-items: center;
  border-radius: 10px;
}
.service-introduce .introduce-item-content .item-box .item:nth-child(odd) {
  background: #FCEDE9;
}
@media (max-width: 1024px) {
  .service-introduce .introduce-item-content .item-box .item {
    flex-direction: column;
    justify-content: center;
    align-items: start;
  }
}
@media (max-width: 576px) {
  .service-introduce .introduce-item-content .item-box .item {
    padding: 1rem 1.5rem 0.5rem 1.5rem;
  }
}
.service-introduce .introduce-item-content .item-box .s-title,
.service-introduce .introduce-item-content .item-box .txt {
  font-size: 20px;
  font-weight: 700;
  margin-right: 1rem;
}
@media (max-width: 1024px) {
  .service-introduce .introduce-item-content .item-box .s-title,
  .service-introduce .introduce-item-content .item-box .txt {
    font-size: 20px;
  }
}
@media (max-width: 576px) {
  .service-introduce .introduce-item-content .item-box .s-title,
  .service-introduce .introduce-item-content .item-box .txt {
    font-size: 16px;
  }
}
.service-introduce .introduce-item-content .item-box .txt {
  font-weight: 400;
}

.vendor .introduce-item-content .title {
  color: #323333;
}
.vendor .introduce-item-content .item-box {
  flex-direction: column;
  gap: 1rem;
}
.vendor .introduce-item-content .item-box .item {
  background: #FFEFD4;
}
.vendor .introduce-item-content .item-box .item:nth-child(odd) {
  background: #FFF7EA;
}

.owl-carousel {
  position: relative;
}
.owl-carousel .owl-nav {
  width: 100%;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  width: 80px;
  height: 80px;
  background-color: rgba(252, 237, 233, 0.7) !important;
  backdrop-filter: blur(20px);
  border: 2px solid #FCEDE9 !important;
  border-radius: 100%;
}
@media (max-width: 576px) {
  .owl-carousel .owl-nav button.owl-prev,
  .owl-carousel .owl-nav button.owl-next {
    width: 50px;
    height: 50px;
  }
}
.owl-carousel .owl-nav button.owl-prev:after,
.owl-carousel .owl-nav button.owl-next:after {
  content: url(../images/svg/slider_Arrow.svg);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(3px, 3px);
}
@media (max-width: 576px) {
  .owl-carousel .owl-nav button.owl-prev:after,
  .owl-carousel .owl-nav button.owl-next:after {
    transform: translate(3px, 3px) scale(0.6);
  }
}
.owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span {
  display: none;
}
.owl-carousel .owl-nav button.owl-prev {
  transform: rotate(180deg);
}
.owl-carousel .owl-dots {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}
.owl-carousel button.owl-dot {
  width: 12px !important;
  height: 12px !important;
  background-color: #ddd !important;
  border-radius: 50%;
}
.owl-carousel button.owl-dot.active {
  background-color: #FFB42B !important;
}

.blog {
  background: #FDF7F5;
}
.blog .container {
  max-width: unset;
  width: 100%;
  padding: 80px 5.2083333333vw;
}
@media (max-width: 1024px) {
  .blog .container {
    padding: 80px 11.71875vw;
  }
}
@media (max-width: 922px) {
  .blog .container {
    padding: 80px 10.8459869848vw;
  }
}
@media (max-width: 576px) {
  .blog .container {
    padding: 80px 10.4166666667vw;
  }
}
.blog .blog-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20px;
  overflow: hidden;
}
.blog .blog-item article {
  padding: 2rem 1.5rem;
}
.blog .blog-item article .title {
  font-size: 18px !important;
  color: #323333;
  font-weight: 700;
}
.blog .blog-item article .txt {
  line-height: 1.5rem;
}
.blog button.owl-prev,
.blog button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.blog button.owl-prev {
  left: -40px;
  transform: rotate(180deg) translateY(50%) !important;
}
.blog button.owl-next {
  right: -40px;
}
@media (max-width: 1024px) {
  .blog button.owl-prev,
  .blog button.owl-next {
    top: 45%;
  }
  .blog button.owl-prev {
    left: -100px;
  }
  .blog button.owl-next {
    right: -100px;
  }
}
@media (max-width: 922px) {
  .blog button.owl-prev {
    left: -70px;
  }
  .blog button.owl-next {
    right: -70px;
  }
}
@media (max-width: 576px) {
  .blog button.owl-prev,
  .blog button.owl-next {
    top: unset;
    bottom: -40px;
  }
  .blog button.owl-prev {
    left: 0;
  }
  .blog button.owl-next {
    right: 0;
  }
}

.vendor .blog,
.product .blog {
  background: #FFFBF4;
}
.vendor .blog .owl-carousel .owl-nav button.owl-prev,
.vendor .blog .owl-carousel .owl-nav button.owl-next,
.product .blog .owl-carousel .owl-nav button.owl-prev,
.product .blog .owl-carousel .owl-nav button.owl-next {
  background-color: rgba(255, 247, 234, 0.7) !important;
  border: 2px solid #FFF7EA !important;
}
.vendor .blog .owl-carousel .owl-nav button.owl-prev:after,
.vendor .blog .owl-carousel .owl-nav button.owl-next:after,
.product .blog .owl-carousel .owl-nav button.owl-prev:after,
.product .blog .owl-carousel .owl-nav button.owl-next:after {
  content: url(../images/svg/slider_Arrow-y.svg);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(3px, 3px);
}
@media (max-width: 576px) {
  .vendor .blog .owl-carousel .owl-nav button.owl-prev:after,
  .vendor .blog .owl-carousel .owl-nav button.owl-next:after,
  .product .blog .owl-carousel .owl-nav button.owl-prev:after,
  .product .blog .owl-carousel .owl-nav button.owl-next:after {
    transform: translate(3px, 3px) scale(0.6);
  }
}

.vendor .client-carousel .title span.quantity,
.product .client-carousel .title span.quantity {
  color: #FFB42B;
}

.product .blog {
  background: #F7F7F7 !important;
}

.product-hero {
  height: 26.0416666667vw;
  min-height: 500px;
  background: url("../images/product/product-hero-bg-d.jpg") no-repeat center center;
  background-size: cover;
}
@media (max-width: 1024px) {
  .product-hero {
    background: url("../images/product/product-hero-bg-t.png") no-repeat center center;
    background-size: cover;
  }
}
@media (max-width: 576px) {
  .product-hero {
    background: url("../images/product/product-hero-bg-m.png") no-repeat center center;
    background-size: cover;
    height: 90vh;
  }
}
.product-hero .hero-content {
  width: 44.2708333333vw;
  min-height: 500px;
  background: linear-gradient(90deg, #FFF7EA 0%, #FFF7EA 33%, rgba(255, 247, 234, 0.5882352941) 82%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 1441px) {
  .product-hero .hero-content {
    width: 52.0471894518vw;
    padding: 0 5.5517002082vw 0 4.1637751561vw;
  }
}
@media (max-width: 1200px) {
  .product-hero .hero-content {
    width: 73.2421875vw;
    height: 50%;
    padding: 7.8125vw 6.34765625vw;
    background: linear-gradient(90deg, #FFF7EA 0%, #FFF7EA 25%, rgba(255, 247, 234, 0.5882352941) 70%, rgba(255, 255, 255, 0) 100%);
    align-items: center;
  }
}
@media (max-width: 1024px) {
  .product-hero .hero-content {
    width: 66%;
    background: linear-gradient(90deg, #FFF7EA 0%, #FFF7EA 35%, rgba(255, 247, 234, 0.5882352941) 90%, rgba(255, 255, 255, 0) 100%);
  }
}
@media (max-width: 576px) {
  .product-hero .hero-content {
    width: 100%;
    height: 50%;
    padding: 6.9444444444vw 5.2083333333vw;
    background: linear-gradient(0deg, #FFF7EA 0%, #FFF7EA 70%, rgba(255, 247, 234, 0.5882352941) 90%, rgba(255, 255, 255, 0) 100%);
    align-items: flex-end;
  }
}
.product-hero .hero-content .title-box {
  text-align: left;
  align-items: start;
}
.personas {
  text-align: center;
  padding: 5.2083333333vw 0;
}
@media (max-width: 1024px) {
  .personas {
    padding: 7.8125vw 5.859375vw;
  }
}
@media (max-width: 576px) {
  .personas {
    padding: 13.8888888889vw 6.9444444444vw;
  }
}
.personas .text-content {
  font-size: 24px;
  margin-bottom: 3.125vw;
}
@media (max-width: 1024px) {
  .personas .text-content {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .personas .text-content {
    font-size: 20px;
  }
}
.personas .personas-content {
  display: flex;
  justify-content: center;
  align-items: start;
  gap: 5rem;
}
@media (max-width: 1024px) {
  .personas .personas-content {
    flex-direction: column;
  }
}
.personas .personas-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 31.25vw;
}
@media (max-width: 1024px) {
  .personas .personas-box {
    width: 100%;
  }
}
.personas .personas-box .personas-img {
  width: 31.25vw;
}
@media (max-width: 1024px) {
  .personas .personas-box .personas-img {
    width: 58.59375vw;
  }
}
@media (max-width: 576px) {
  .personas .personas-box .personas-img {
    width: 100%;
  }
}
.personas .personas-box .personas-img img {
  width: 100%;
}
.personas .personas-box .title-box .title {
  font-size: 36px;
  font-weight: bold;
}
@media (max-width: 1024px) {
  .personas .personas-box .title-box .title {
    font-size: 36px;
  }
}
@media (max-width: 576px) {
  .personas .personas-box .title-box .title {
    font-size: 24px;
  }
}
.personas .personas-box .title-box .txt {
  font-size: 18px;
}
@media (max-width: 1024px) {
  .personas .personas-box .title-box .txt {
    font-size: 18px;
  }
}
@media (max-width: 576px) {
  .personas .personas-box .title-box .txt {
    font-size: 16px;
  }
}
@media (max-width: 576px) {
  .personas .personas-box .btn-box {
    width: 100%;
    flex-direction: column;
  }
}

.product-stats {
  background: unset;
}
@media (max-width: 576px) {
  .product-stats {
    padding-top: 4rem;
  }
}
@media (max-width: 1024px) {
  .product-stats .container {
    gap: 5rem 9rem;
    justify-content: center;
  }
}
@media (max-width: 576px) {
  .product-stats .container {
    gap: unset;
    row-gap: 3rem;
  }
}
.product-stats .stats-item .text-box .item-title {
  font-size: 24px;
  color: #323333;
  font-weight: 700;
  margin-bottom: unset;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .product-stats .stats-item .text-box .item-title {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .product-stats .stats-item .text-box .item-title {
    font-size: 20px;
  }
}

.product-introduce, .price-container {
  background: url("../images/vendor/cocofont-repeat-bg-y.png") repeat-x top center, linear-gradient(180deg, #FFF7EA 9%, #FFF7EA 55%, rgba(255, 255, 255, 0) 100%);
  background-repeat: repeat-x;
  background-size: 40% auto;
  background-position: top center, top center;
  padding: 3.125vw 0;
}

.shop-mall,
.quotation,
.request-payment {
  display: flex;
  padding: 4.1666666667vw 5.2083333333vw;
}
@media (max-width: 1441px) {
  .shop-mall,
  .quotation,
  .request-payment {
    padding: 5.5517002082vw 2.7758501041vw;
  }
}
@media (max-width: 1024px) {
  .shop-mall,
  .quotation,
  .request-payment {
    flex-direction: column-reverse;
    justify-content: center;
    text-align: center;
    gap: 5rem;
    padding: 7.8125vw 7.8125vw;
  }
}
@media (max-width: 576px) {
  .shop-mall,
  .quotation,
  .request-payment {
    padding: 17.3611111111vw 6.9444444444vw;
    gap: 2rem;
  }
}
.shop-mall .title-box h2.title,
.quotation .title-box h2.title,
.request-payment .title-box h2.title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 1.0416666667vw;
}
@media (max-width: 1024px) {
  .shop-mall .title-box h2.title,
  .quotation .title-box h2.title,
  .request-payment .title-box h2.title {
    font-size: 42px;
  }
}
@media (max-width: 576px) {
  .shop-mall .title-box h2.title,
  .quotation .title-box h2.title,
  .request-payment .title-box h2.title {
    font-size: 36px;
  }
}
.shop-mall .title-box p.text-content,
.quotation .title-box p.text-content,
.request-payment .title-box p.text-content {
  font-size: 18px;
  color: #323333;
}
@media (max-width: 1024px) {
  .shop-mall .title-box p.text-content,
  .quotation .title-box p.text-content,
  .request-payment .title-box p.text-content {
    font-size: 18px;
  }
}
@media (max-width: 576px) {
  .shop-mall .title-box p.text-content,
  .quotation .title-box p.text-content,
  .request-payment .title-box p.text-content {
    font-size: 16px;
  }
}

.shop-mall,
.request-payment {
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media (max-width: 1024px) {
  .shop-mall,
  .request-payment {
    flex-direction: column-reverse;
    justify-content: center;
    text-align: center;
  }
}
.shop-mall .shop-mall-img,
.shop-mall .request-payment-img,
.request-payment .shop-mall-img,
.request-payment .request-payment-img {
  padding-right: 3.125vw;
}
@media (max-width: 1441px) {
  .shop-mall .shop-mall-img,
  .shop-mall .request-payment-img,
  .request-payment .shop-mall-img,
  .request-payment .request-payment-img {
    padding-right: 2.0818875781vw;
  }
}
@media (max-width: 1024px) {
  .shop-mall .shop-mall-img,
  .shop-mall .request-payment-img,
  .request-payment .shop-mall-img,
  .request-payment .request-payment-img {
    padding-right: unset;
  }
}
.shop-mall .shop-mall-img img,
.shop-mall .request-payment-img img,
.request-payment .shop-mall-img img,
.request-payment .request-payment-img img {
  border: 1px solid #EFEFEF;
  border-radius: 20px;
  width: 100%;
}
.shop-mall .title-box,
.request-payment .title-box {
  padding-left: 3.125vw;
}
@media (max-width: 1441px) {
  .shop-mall .title-box,
  .request-payment .title-box {
    padding-left: 2.0818875781vw;
  }
}
@media (max-width: 1024px) {
  .shop-mall .title-box,
  .request-payment .title-box {
    padding-left: unset;
  }
}

@media (max-width: 1024px) {
  .request-payment {
    padding-top: 0;
    flex-direction: column !important;
  }
}
.request-payment .request-payment-img img {
  border: unset;
  border-radius: unset;
}

.quotation {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6rem;
}
@media (max-width: 1024px) {
  .quotation {
    gap: 3rem;
  }
}
.quotation .title-box {
  text-align: center;
}
.quotation .quotation-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 6rem;
}
@media (max-width: 1024px) {
  .quotation .quotation-content {
    flex-direction: column;
    gap: 3rem;
  }
}
.quotation .quotation-content .quotation-info {
  text-align: center;
}
.quotation .quotation-content .quotation-info .title {
  font-size: 18px;
  font-weight: 700;
  color: #EB552D;
}
.quotation .quotation-content .quotation-info .quotation-img img {
  width: 100%;
  border-radius: 20px;
  border: 1px solid #EFEFEF;
}

.product .how {
  background: unset;
}

.system-manage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 4.1666666667vw;
  padding: 4.1666666667vw 0vw;
}
@media screen and (max-width: 1366px) {
  .system-manage {
    padding: 5.8565153734vw 5.8565153734vw;
  }
}
@media (max-width: 1024px) {
  .system-manage {
    flex-direction: column;
    justify-content: center;
    padding: 5.8565153734vw 5.8565153734vw;
    gap: 2rem;
    align-items: center;
  }
}
@media (max-width: 576px) {
  .system-manage {
    padding: 5.5517002082vw 0;
  }
}
.system-manage .system-manage-box {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 36.4583333333vw;
  height: 36.4583333333vw;
  position: relative;
  background: url("../images/product/cocomart-manage.png") no-repeat center center;
  background-size: auto 100%;
  border-radius: 30px;
  overflow: hidden;
}
@media (max-width: 1441px) {
  .system-manage .system-manage-box {
    width: 48.5773768217vw;
    height: 48.5773768217vw;
  }
}
@media (max-width: 1200px) {
  .system-manage .system-manage-box {
    width: 51.2445095168vw;
    height: 51.2445095168vw;
  }
}
@media (max-width: 1024px) {
  .system-manage .system-manage-box {
    width: 68.359375vw;
    height: 68.359375vw;
  }
}
@media (max-width: 922px) {
  .system-manage .system-manage-box {
    width: 75.9219088937vw;
    height: 75.9219088937vw;
  }
}
@media (max-width: 576px) {
  .system-manage .system-manage-box {
    width: 100%;
    height: 121.5277777778vw;
    border-radius: 0;
  }
}
.system-manage .system-manage-box::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #FFF7EA 0%, #FFF7EA 5%, #FFF7EA 30%, rgba(255, 255, 255, 0) 100%) no-repeat;
  background-size: 120% 60%;
  background-position: 90% 106%;
}
.system-manage .system-manage-box .title-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
  z-index: 1;
  padding: 40px;
}
@media (max-width: 576px) {
  .system-manage .system-manage-box .title-box {
    padding: 20px;
  }
}
.system-manage .system-manage-box .title-box .title {
  font-size: 24px;
  font-weight: 700;
}
.system-manage .system-manage-box .title-box .txt {
  font-size: 18px;
}
.system-manage .system-manage-box:nth-child(2) {
  background: url("../images/product/cocomart-system.png") no-repeat center center;
  background-size: auto 100%;
}

.device {
  padding: 4.1666666667vw 5.2083333333vw;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
}
@media (max-width: 576px) {
  .device {
    padding: 10.4166666667vw 3.4722222222vw;
  }
  .device .title {
    font-size: 32px;
  }
}

.video {
  width: 100%;
  padding: 4.1666666667vw 5.2083333333vw;
  display: flex;
  flex-direction: row;
  gap: 5rem;
  justify-content: center;
  background: linear-gradient(0deg, #FFFBF4 30%, rgba(255, 255, 255, 0) 100%) no-repeat;
}
@media (max-width: 1024px) {
  .video {
    padding: 7.8125vw 3.90625vw;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
}
.video .video-box {
  width: 560px;
  height: 351px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 576px) {
  .video .video-box {
    width: 100%;
  }
}
.video .video-box .iframe-box {
  width: 100%;
  height: 351px;
  background: url("../images/product/video-img.jpg") no-repeat center center;
  background-size: cover;
}
.video .video-box .title-box .title {
  font-size: 18px;
  font-weight: 700;
}
.video .video-box .title-box .txt {
  font-size: 16px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

.faq {
  background: #FEFEFE;
}
.faq .faq-container {
  width: 1000px;
  padding: 5rem 0;
}
@media (max-width: 1024px) {
  .faq .faq-container {
    width: 100%;
    padding: 5rem 3rem;
  }
}
@media (max-width: 576px) {
  .faq .faq-container {
    width: 100%;
    padding: 5rem 1rem;
  }
}

.faq-title {
  font-size: 42px;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .faq-title {
    font-size: 42px;
  }
}
@media (max-width: 576px) {
  .faq-title {
    font-size: 36px;
  }
}

.nav-tab.btn-box {
  gap: 3rem;
}
@media (max-width: 576px) {
  .nav-tab.btn-box {
    gap: 1rem;
  }
  .nav-tab.btn-box .nav-item {
    width: 100%;
  }
}
.nav-tab.btn-box .btn-outline.active {
  background-color: #EB552D !important;
  border: 2px solid #EB552D;
  color: #fff;
}
.nav-tab.btn-box .btn-outline.active:hover {
  color: #fff;
}
@media (max-width: 576px) {
  .nav-tab.btn-box .btn-outline {
    width: 100%;
    min-width: unset;
  }
}

.faq-content {
  margin-top: 4rem;
}

.faq-section .tab-title {
  font-size: 24px;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .faq-section .tab-title {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .faq-section .tab-title {
    font-size: 20px;
  }
}
.faq-section .faq-accordion {
  gap: 1rem;
  display: flex;
  flex-direction: column;
}
.faq-section .faq-accordion .accordion-item {
  border: 1px solid #FFF7EA;
  border-radius: 6px;
  overflow: hidden;
}
.faq-section .faq-accordion .accordion-item .accordion-button {
  background: #FFF7EA;
  color: #323333;
  border-color: #FFF7EA;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.faq-section .faq-accordion .accordion-item .accordion-button:focus, .faq-section .faq-accordion .accordion-item .accordion-button:focus-visible, .faq-section .faq-accordion .accordion-item .accordion-button:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.faq-section .faq-accordion .accordion-item .accordion-button:after {
  margin-left: 1rem;
}

.price-container.container {
  width: 100%;
  max-width: 100%;
  padding: 7.5rem 0;
  text-align: center;
}
@media (max-width: 922px) {
  .price-container.container {
    padding: 7.5rem 2rem;
  }
}
.price-container.container .title-box {
  margin-bottom: 3rem;
}
.price-container.container .title-box .title {
  font-size: 42px;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .price-container.container .title-box .title {
    font-size: 42px;
  }
}
@media (max-width: 576px) {
  .price-container.container .title-box .title {
    font-size: 36px;
  }
}
.price-container.container .title-box .txt {
  font-size: 24px;
}
@media (max-width: 1024px) {
  .price-container.container .title-box .txt {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .price-container.container .title-box .txt {
    font-size: 20px;
  }
}

.price-container.container .price-section {
  margin-top: 9rem;
}
.price-container.container .price-section .plan-card-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 3rem;
}
@media (max-width: 576px) {
  .price-container.container .price-section .plan-card-container {
    flex-direction: column;
    gap: 6rem;
  }
}
.price-container.container .price-section .title-box {
  margin-bottom: 6rem;
}
@media (max-width: 576px) {
  .price-container.container .price-section .title-box {
    margin-bottom: 4rem;
  }
}
.price-container.container .price-section .title-box .title {
  font-size: 52px;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .price-container.container .price-section .title-box .title {
    font-size: 42px;
  }
}
@media (max-width: 576px) {
  .price-container.container .price-section .title-box .title {
    font-size: 36px;
  }
}
.price-container.container .price-section .title-box .txt {
  font-size: 24px;
}
@media (max-width: 1024px) {
  .price-container.container .price-section .title-box .txt {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .price-container.container .price-section .title-box .txt {
    font-size: 20px;
  }
}
.price-container.container .price-section .plan-card {
  min-width: 350px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border: 1px solid #EEFFEE;
  padding-top: 4rem;
  padding-bottom: 2.5rem;
  display: inline-block;
  position: relative;
}
@media (max-width: 922px) {
  .price-container.container .price-section .plan-card {
    min-width: unset;
    width: 50%;
  }
}
@media (max-width: 576px) {
  .price-container.container .price-section .plan-card {
    width: 100%;
  }
}
.price-container.container .price-section .plan-card .plan-card-badge {
  border-radius: 100px;
  font-size: 24px;
  border: 2px solid #EB552D;
  font-weight: 500;
  padding: 0.5rem 1rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
  .price-container.container .price-section .plan-card .plan-card-badge {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .price-container.container .price-section .plan-card .plan-card-badge {
    font-size: 20px;
  }
}
.price-container.container .price-section .plan-card .plan-card-badge.primary {
  background-color: #EB552D;
  color: #fff;
}
.price-container.container .price-section .plan-card .plan-card-badge.outline {
  background-color: #FCEDE9;
  color: #EB552D;
}
.price-container.container .price-section .plan-card .plan-card-divider {
  margin: 2rem 0;
}
.price-container.container .price-section .plan-card .box {
  padding: 0 30px;
}
.price-container.container .price-section .plan-card .box.info-box {
  text-align: left;
}
.price-container.container .price-section .plan-card .box.info-box .plan-card-detail-box .plan-card-detail {
  display: flex;
  justify-content: space-between;
}
.price-container.container .price-section .plan-card h3.plan-card-title,
.price-container.container .price-section .plan-card .plan-card-price span,
.price-container.container .price-section .plan-card .plan-card-summary,
.price-container.container .price-section .plan-card .plan-card-info-note,
.price-container.container .price-section .plan-card .plan-card-info-title {
  font-weight: 700;
}
.price-container.container .price-section .plan-card h3.plan-card-title {
  font-size: 24px;
}
@media (max-width: 1024px) {
  .price-container.container .price-section .plan-card h3.plan-card-title {
    font-size: 24px;
  }
}
@media (max-width: 576px) {
  .price-container.container .price-section .plan-card h3.plan-card-title {
    font-size: 20px;
  }
}
.price-container.container .price-section .plan-card .plan-card-price .plan-card-amount {
  font-size: 52px;
}
.price-container.container .price-section .plan-card .plan-card-price .plan-card-currency,
.price-container.container .price-section .plan-card .plan-card-price .plan-card-unit {
  font-size: 24px;
}
.price-container.container .price-section .plan-card .plan-card-summary,
.price-container.container .price-section .plan-card .plan-card-info-title,
.price-container.container .price-section .plan-card .plan-card-detail span {
  font-size: 18px;
}