@-webkit-keyframes Gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @-moz-keyframes Gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes Gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .content_50-50-section { font-family: "Noto Sans Thai", sans-serif; padding: 80px 0px 0px 0px; background-image: url("/files/media/Mediac0b536cd1dee332fe585a4e89707364e.png"); background-size: cover; background-position: center; background-repeat: no-repeat; } .content_50-50-section .container { padding-left: 0px; padding-right: 0px; } .content_50-50-section-headline { font-family: "Playfair"; color: #000; font-size: 40px; font-weight: 700; margin-bottom: 20px; } .content_50-50-section-text { font-size: 16px; line-height: 1.7; color: #333; } .content_50-50-section-img, .content_50-50-section-vision-img { border-radius: 0px; max-width: 100%; height: auto; } @media (max-width: 767.98px) { .content_50-50-section { padding: 50px 20px 20px; } .content_50-50-section-title { font-size: 28px; } .content_50-50-section-sub-title { font-size: 20px; } .content_50-50-section-headline { font-size: 28px; } .content_50-50-section-text { font-size: 15px; } } .content_50-50-section .btn-button-wui { display: inline-flex; justify-content: center; align-items: center; padding: 10px 20px; font-size: 18px; font-weight: 500; line-height: 150%; cursor: pointer; border-radius: 0; background-color: #152942; color: #f2cba3; text-decoration: none; font-family: "Playfair", sans-serif; margin-bottom: 20px; } .content_50-50-section .btn-button-wui:hover { background-color: #254C74; } .section-the-Founder { font-family: "Anuphan", sans-serif; background-color: #fff; position: relative; } .section-the-Founder .custom-container { max-width: 1320px; margin: auto; padding: 60px 40px; } @media screen and (max-width: 992px) { .section-the-Founder .custom-container { padding: 0px 0px 60px 0px; } } .section-the-Founder .custom-container .the-founder-title .section-subtitle { font-size: 32px; font-weight: 700; line-height: 150%; margin-bottom: 24px; color: #222222; font-family: "Playfair", sans-serif; } .section-the-Founder .custom-container .the-founder-title .section-title { font-size: 16px; font-weight: 400; line-height: 150%; color: #222222; font-family: "Noto Sans Thai", sans-serif; } .section-the-Founder .custom-container .the-founder-title .btn-button { display: inline-flex; justify-content: center; align-items: center; padding: 10px 20px; font-size: 18px; font-weight: 500; line-height: 150%; cursor: pointer; border-radius: 0; background-color: #152942; color: #f2cba3; text-decoration: none; font-family: "Playfair", sans-serif; } .wui-contact-section { background: url(/files/media/Mediaf0aa9926b9cbc63a7a5834d46c6c0f40.jpg) center/cover no-repeat; min-height: 500px; padding: 60px 0; font-family: "Anuphan", sans-serif; color: #fff; } .wui-contact-section .container { width: 1920px; } .wui-contact-title { font-family: "Playfair", sans-serif; font-size: 48px; font-weight: 700; margin-bottom: 20px; } .wui-contact-text { font-size: 16px; line-height: 1.6; margin-bottom: 30px; } .wui-contact-btn { display: inline-flex; gap: 6px; justify-content: center; align-items: center; padding: 10px 20px; font-size: 18px; font-weight: 500; line-height: 150%; cursor: pointer; border-radius: 0; background-color: #fff; color: #152942; text-decoration: none; font-family: "Playfair", sans-serif; } .wui-contact-btn:hover { background-color: #EAF3F7; text-decoration: none; } @media (max-width: 991.98px) { .wui-contact-section { background: url(/files/media/Media45d77f082e61dd64e80eb392906bd0f5.jpg) center/cover no-repeat; } .wui-contact-section .container { padding-left: 30px; padding-right: 30px; } .wui-contact-title { font-size: 32px; } .wui-contact-text { font-size: 14px; } } .wui-banner-custom { background: url(/files/media/Media589b5b702419c5c25ada7eca37f34e77.jpg) center/cover no-repeat; min-height: 360px; } .wui-title { color: var(--White, #FFF); font-family: Playfair; font-size: 62px; font-style: normal; font-weight: 300; line-height: 100%; } .wui-text { color: var(--White, #FFF); font-family: Playfair; font-size: 92px; font-style: normal; font-weight: 300; line-height: 120%; } @media (max-width: 991.98px) { .wui-banner-custom { background: url(/files/media/Mediafcf1d7d14cd869f81829fb707788f47c.jpg) center/cover no-repeat; } .wui-banner-custom .container { padding-left: 30px; padding-right: 30px; } .wui-title { text-align: center; font-size: 20px; } .wui-text { font-size: 48px; } } .section-collection { font-family: "Noto Sans Thai", sans-serif; background-color: #fff; position: relative; } .section-collection .custom-container { display: flex; width: 1320px; padding: 60px 0; flex-direction: column; justify-content: center; align-items: center; gap: 60px; margin: auto; } @media screen and (max-width: 1320px) { .section-collection .custom-container { display: flex; padding: 40px 16px; flex-direction: column; justify-content: center; align-items: center; gap: 24px; align-self: stretch; width: 100%; } } .section-collection .custom-container .section-subtitle { color: #25282A; font-family: "Playfair", sans-serif; font-size: 40px; font-style: normal; font-weight: 700; line-height: 150%; margin: 0; } .section-collection .custom-container .section-title { color: #25282A; text-align: center; font-family: "Noto Sans Thai", sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; margin: 0; } .section-collection .custom-container .items-3 .section-title { font-size: 16px; font-weight: 400; line-height: 150%; color: #222222; font-family: "Noto Sans Thai", sans-serif; margin-bottom: 24px; margin-top: 24px; text-align: left; } @media screen and (max-width: 576px) { .section-collection .custom-container { gap: 24px; } .section-collection .custom-container .items-3 .section-title { margin-bottom: 24px; margin-top: 24px; } } .section-collection .custom-container .image-custom { border-radius: 0; overflow: hidden; width: 100%; height: auto; flex: 1; } .section-collection .custom-container .display-grid-2 { display: flex; flex-direction: row; width: 100%; height: 100%; gap: 8px; } @media screen and (min-width: 1320px) { .section-collection .custom-container .display-grid-2 { width: 100%; } } .section-collection .custom-container .supa-collection-detail-phoy-row { display: flex; flex-wrap: wrap; margin-left: 0; margin-right: 0; } .section-collection .custom-container .items-3 { display: flex; flex-direction: column; gap: 8px; width: 100%; } @media screen and (min-width: 1320px) { .section-collection .custom-container .items-3 { flex-direction: row; width: 1320px; gap: 8px; } .section-collection .custom-container .items-3 .supa-collection-detail-phoy-col-lg-6 { flex: 0 0 calc(50% - 4px); max-width: calc(50% - 4px); } } .section-collection .custom-container .supa-collection-detail-phoy-row:nth-child(2) { display: flex; flex-direction: column; gap: 8px; width: 100%; } @media screen and (min-width: 1320px) { .section-collection .custom-container .supa-collection-detail-phoy-row:nth-child(2) { flex-direction: row; width: 1320px; gap: 8px; } .section-collection .custom-container .supa-collection-detail-phoy-row:nth-child(2) .supa-collection-detail-phoy-col-lg-6 { flex: 0 0 calc(50% - 4px); max-width: calc(50% - 4px); } } .section-collection .custom-container .supa-collection-detail-phoy-row:first-child { display: flex; width: 1320px; flex-direction: column; align-items: center; gap: 16px; } @media screen and (max-width: 1320px) { .section-collection .custom-container .supa-collection-detail-phoy-row:first-child { width: 100%; } } .section-collection .custom-container .supa-collection-detail-phoy-col-lg-6 { flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; } @media screen and (min-width: 1320px) { .section-collection .custom-container .supa-collection-detail-phoy-col-lg-6 { flex: 0 0 50%; max-width: 50%; } } .section-collection .custom-container .supa-collection-detail-phoy-text-center { text-align: center; } .section-collection .custom-container .supa-collection-detail-phoy-m-0 { margin: 0; gap: 8px; } .section-collection .custom-container .supa-collection-detail-phoy-d-flex { display: flex; } .section-collection .custom-container .supa-collection-detail-phoy-justify-content-center { justify-content: center; } .section-collection .custom-container .supa-collection-detail-phoy-img-fluid { max-width: 100%; height: auto; display: block; } .section-collection .custom-container .supa-collection-detail-phoy-flex-column { flex-direction: column; } .section-collection .custom-container .supa-collection-detail-phoy-order-first { order: -1; } @media screen and (min-width: 992px) { .section-collection .custom-container .supa-collection-detail-phoy-order-lg-last { order: 2; } } .collection-sub-banner { width: 100%; align-self: stretch; overflow: hidden; position: relative; margin: 0; padding: 0; } .sub-banner-container { position: relative; width: 100%; margin: 0; padding: 0; } .collection-sub-banner { width: 100%; height: auto; display: block; } .collection-sub-banner-desktop-image { display: block; } .collection-sub-banner-mobile-image { display: none; } @media (min-width: 769px) { .collection-sub-banner { width: 100%; margin: 0; padding: 0; } .collection-sub-banner-desktop-image { display: block; } .collection-sub-banner-mobile-image { display: none; } } .collection-image-gallery { display: flex; flex-direction: column; align-items: center; padding: 60px 0; } .collection-image-gallery-container { display: flex; flex-direction: column; align-items: center; max-width: 1320px; width: 100%; } .collection-image-gallery-logos { margin-top: 60px; } .collection-image-gallery-logos-container { display: flex; width: 1320px; flex-direction: column; align-items: center; gap: 8px; } .collection-image-gallery-logos-grid { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; justify-content: center; } .collection-image-gallery-logo-item { width: 324px; height: 486px; overflow: hidden; background: white; display: flex; align-items: center; justify-content: center; } .collection-image-gallery-logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; } @media (max-width: 1024px) and (min-width: 769px) { .collection-image-gallery-logos-container { width: 100%; max-width: 100%; padding: 0 20px; } .collection-image-gallery-logos-grid { justify-content: center; gap: 8px; } .collection-image-gallery-logo-item { width: calc(33.333% - 14px); height: 110px; max-width: 200px; } } @media (max-width: 768px) { .collection-image-gallery { padding: 40px 16px; } .collection-image-gallery-container { max-width: 100%; } .collection-image-gallery-logos-container { width: 100%; max-width: 100%; } .collection-image-gallery-logos-grid { justify-content: center; gap: 8px; } .collection-image-gallery-logo-item { width: calc(50% - 8px); height: 100%; max-width: 175px; } } .wui-banner-customs-page { background: url(/files/media/Mediab50d91c95fa03561c083662e42a820c4.jpg) center/cover no-repeat; min-height: 360px; } .wui-banner-customs-page .container { padding-left: 230px; padding-right: 230px; } .wui-title { color: var(--White, #FFF); font-family: Playfair; font-size: 62px; font-style: normal; font-weight: 300; line-height: 52%; } .wui-text { color: var(--White, #FFF); font-family: Playfair; font-size: 92px; font-style: normal; font-weight: 300; line-height: 120%; } @media (max-width: 991.98px) { .wui-banner-customs-page { background: url(/files/media/Media957142bd9ee9e735c7fa8f621f7ce63d.jpg) center/cover no-repeat; } .wui-banner-customs-page .container { padding-left: 30px; padding-right: 30px; } .wui-title { text-align: center; font-size: 20px; } .wui-text { font-size: 48px; } } .section-customize { font-family: "Noto Sans Thai", sans-serif; background-color: #152942; position: relative; } .section-customize .gradient-text { background: linear-gradient(180deg, rgb(2, 124, 83) 10%, rgb(26, 63, 115) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } .section-customize .custom-container { max-width: 1320px; margin: auto; padding: 60px 40px; } @media screen and (max-width: 992px) { .section-customize .custom-container { padding: 60px 0px; } } .section-customize .custom-container .header-title .section-subtitle { font-size: 32px; font-weight: 700; line-height: 150%; margin-bottom: 24px; font-family: "Playfair", sans-serif; } .section-customize .custom-container .header-title .section-title { font-size: 16px; font-weight: 400; line-height: 150%; color: white; font-family: "Noto Sans Thai", sans-serif; } .section-customize .custom-container .header-title .btn-white { display: inline-flex; justify-content: center; align-items: center; padding: 10px 20px; font-size: 18px; font-weight: 500; line-height: 150%; cursor: pointer; border-radius: 0; background-color: white; color: #152942; text-decoration: none; font-family: "Playfair", sans-serif; } .section-customize .custom-container .services-slick .slick-prev, .section-customize .custom-container .services-slick .slick-next { border: none; border-radius: 50%; width: 40px; height: 40px; z-index: 1000; } .section-customize .custom-container .services-slick .slick-prev { left: -40px; color: #fff; } .section-customize .custom-container .services-slick .slick-next { right: -40px; color: #fff; } .section-customize .custom-container .services-slick .slick-prev i, .section-customize .custom-container .services-slick .slick-next i { color: #fff; font-size: 24px; } .section-customize .custom-container .services-slick .slick-prev::before, .section-customize .custom-container .services-slick .slick-next::before { display: none !important; } .section-customize .custom-container .services-slick .slick-track { overflow: visible !important; } @media screen and (max-width: 991px) { .section-customize .custom-container .services-slick .slick-prev { left: 12px; } .section-customize .custom-container .services-slick .slick-next { right: 12px; } } @media screen and (max-width: 576px) { .section-customize .custom-container .services-slick .slick-list { margin-left: 16px; } .section-customize .custom-container .services-slick .slick-slide { width: 244px !important; } .section-customize .custom-container .services-slick .slick-prev { left: 8px; } .section-customize .custom-container .services-slick .slick-next { right: 8px; } } .section-customize .custom-container .services-slick .slick-dots { bottom: -36px; } .section-customize .custom-container .services-slick .slick-dots li { width: 12px; height: 12px; } .section-customize .custom-container .services-slick .slick-dots li button { width: 12px; height: 12px; background: #E6E7E8; border-radius: 20px; } .section-customize .custom-container .services-slick .slick-dots li button::before { font-size: 0px; } .section-customize .custom-container .services-slick .slick-dots li.slick-active { width: 12px; height: 12px; } .section-customize .custom-container .services-slick .slick-dots li.slick-active button { width: 12px; height: 12px; background: #027C53; border-radius: 20px; } .section-customize .custom-container .services-slick .slick-dots li.slick-active button::before { font-size: 0px; } .section-customize .custom-container .services-slick .services-items { position: relative; border-radius: 0; overflow: hidden; width: 305px; height: 457px; margin: 0 8px; } .section-customize .custom-container .services-slick .services-items img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .wui-how-it-work { font-family: "Noto Sans Thai", sans-serif; background-color: #fff; } .wui-how-it-work .how-icon { width: 60px; height: auto; } .wui-how-it-work h2 { color: #222; text-align: center; font-family: Playfair; font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; } .wui-how-it-work h5 { color: #222; text-align: center; font-family: "Noto Sans Thai"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; } .wui-how-it-work p { color: #222; text-align: center; font-family: "Noto Sans Thai"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } @media (max-width: 767.98px) { .wui-how-it-work h2 { font-size: 22px; } .wui-how-it-work h5 { font-size: 16px; } .wui-how-it-work .how-icon { width: 50px; } } .wui-banner-Story { background: url(/files/media/Media65355ab8e5c1cdf0a95c6aa47571a335.jpg) center/cover no-repeat; min-height: 360px; } .wui-banner-Story .container { padding-left: 230px; padding-right: 230px; } .wui-title { color: var(--White, #FFF); font-family: Playfair; font-size: 62px; font-style: normal; font-weight: 300; line-height: 52%; } .wui-text { color: var(--White, #FFF); font-family: Playfair; font-size: 92px; font-style: normal; font-weight: 300; line-height: 120%; } @media (max-width: 991.98px) { .wui-banner-Story { background: url(/files/media/Media0a13bc0bb86b1f0cd1b31088f312da66.jpg) center/cover no-repeat; } .wui-banner-Story .container { padding-left: 30px; padding-right: 30px; } .wui-title { text-align: center; font-size: 20px; } .wui-text { font-size: 48px; } } .section-story { font-family: "Noto Sans Thai", sans-serif; background-color: #fff; position: relative; } .section-story .custom-container { max-width: 1320px; margin: auto; padding: 0px 40px 60px 40px; } @media screen and (max-width: 992px) { .section-story .custom-container { padding: 60px 0px; } } .section-story .custom-container .header-title .section-subtitle { font-size: 32px; font-weight: 700; line-height: 150%; margin-bottom: 24px; color: #222222; font-family: "Playfair", sans-serif; } .section-story .custom-container .header-title .section-title { font-size: 16px; font-weight: 400; line-height: 150%; color: #222222; font-family: "Noto Sans Thai", sans-serif; } .section-story .custom-container .header-title .btn-button { display: inline-flex; justify-content: center; align-items: center; padding: 10px 20px; font-size: 18px; font-weight: 500; line-height: 150%; cursor: pointer; border-radius: 0; background-color: #152942; color: #f2cba3; text-decoration: none; font-family: "Playfair", sans-serif; } .wui-our-passion { background: url('/files/media/Media7a90ef3774faa6772e6e425d5fbfda8e.jpg') center/cover no-repeat; padding: 120px 0; color: #fff; text-align: center; font-family: "Prompt", sans-serif; } .wui-our-passion-title { font-size: 32px; font-weight: 700; margin-bottom: 20px; } .wui-our-passion-text { max-width: 900px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: #fff; } @media (max-width: 767.98px) { .wui-our-passion { background: url('/files/media/Media9a5712157f750444ea5a837a5e3ea5c2.jpg') center/cover no-repeat; padding: 80px 20px; } .wui-our-passion-title { font-size: 24px; } .wui-our-passion-text { font-size: 14px; } } .content_70-50-section { padding: 80px 0; } .content_70-50-section .container { padding-left: 0px; padding-right: 0px; } .content_70-50-section-sub-title { color: #486284; font-size: 24px; font-weight: 500; margin-bottom: 10px; } .content_70-50-section-headline { color: var(--Black, #222); font-family: Playfair; font-size: 40px; font-style: normal; font-weight: 700; line-height: 150%; } .content_70-50-section-text { color: var(--Black, #222); font-family: "Noto Sans Thai"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } .content_70-50-section-img, .content_70-50-section-vision-img { border-radius: 0px; max-width: 100%; height: auto; } @media (max-width: 767.98px) { .content_70-50-section { padding: 50px 20px; } .content_70-50-section-title { font-size: 28px; } .content_70-50-section-sub-title { font-size: 20px; } .content_70-50-section-headline { font-size: 28px; margin-top: 20px; margin-bottom: 20px; } .content_70-50-section-text { font-size: 15px; margin-top: 20px; margin-bottom: 20px; } } .contact-section-ployy { position: relative; display: flex; padding: 60px 0; flex-direction: column; align-items: center; gap: 10px; align-self: stretch; min-height: 100vh; } .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .container-ployy { display: flex; width: 1320px; padding: 60px; align-items: center; gap: 24px; background: rgba(255, 255, 255, 0.82); border-radius: 8px; z-index: 1; } .left-section-ployy { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; align-self: stretch; flex: 1; } .content-ployy { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; align-self: stretch; } .address-block-ployy, .follow-block-ployy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; } .title-ployy { color: var(--Black, #222); font-family: "Noto Sans Thai"; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; } .description-ployy { color: var(--Black, #222); font-family: "Noto Sans Thai"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } .social-icons-ployy { display: flex; align-items: flex-end; gap: 24px; } .social-icons-ployy i { width: 21px; height: 21px; flex-shrink: 0; color: var(--Black, #222); font-size: 21px; } .map-container-ployy { flex: 1 0 0; align-self: stretch; } .map-container-ployy iframe { width: 100%; height: 180px; border: none; border-radius: 4px; } .right-section-ployy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; align-self: stretch; flex: 1; } .form-title-ployy { color: var(--Primary05, #203D5C); font-family: Playfair; font-size: 40px; font-style: normal; font-weight: 700; line-height: 150%; } .form-description-ployy { color: var(--Black, #222); font-family: Anuphan; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } @media (max-width: 1024px) and (min-width: 768px) { .container-ployy { width: 90%; max-width: 900px; padding: 40px; gap: 20px; } .left-section-ployy { gap: 30px; } .content-ployy { gap: 30px; } .map-container-ployy iframe { height: 160px; } } @media (max-width: 767px) { .contact-section-ployy { padding: 40px 16px; align-items: center; gap: 10px; align-self: stretch; } .container-ployy { padding: 24px 16px; flex-direction: column; justify-content-ployy: center; align-items: flex-start; gap: 40px; width: 100%; max-width: 100%; } .left-section-ployy { order: 2; gap: 30px; } .right-section-ployy { order: 1; gap: 16px; } .content-ployy { gap: 30px; } .map-container-ployy iframe { height: 150px; } .form-title-ployy { font-size: 32px; } }