:lang(en) [class$="phinx"] h1, :lang(en) [class$="phinx"] h2, :lang(en) [class$="phinx"] h3, :lang(en) [class$="phinx"] h4, :lang(en) [class$="phinx"] h5, :lang(en) [class$="phinx"] h6, :lang(en) [class$="phinx"] p.counter { font-family: Baskerville; } :lang(en) [class$="phinx"] p, :lang(en) [class$="phinx"] a, :lang(en) [class$="phinx"] span, :lang(en) [class$="phinx"] li, :lang(en) [class$="phinx"] input, :lang(en) [class$="phinx"] textarea, :lang(en) [class$="phinx"] button { font-family: "Source Serif Variable"; } :lang(th) [class$="phinx"] h1, :lang(th) [class$="phinx"] h2, :lang(th) [class$="phinx"] h3, :lang(th) [class$="phinx"] h4, :lang(th) [class$="phinx"] h5, :lang(th) [class$="phinx"] h6, :lang(th) [class$="phinx"] p, :lang(th) [class$="phinx"] a, :lang(th) [class$="phinx"] span, :lang(th) [class$="phinx"] li, :lang(th) [class$="phinx"] input, :lang(th) [class$="phinx"] textarea, :lang(th) [class$="phinx"] button, :lang(th) [class$="phinx"] p.counter { font-family: Prompt; } [class$="phinx"] h1, [class$="phinx"] h2, [class$="phinx"] h3, [class$="phinx"] h4, [class$="phinx"] p, [class$="phinx"] ul { margin: 0; } [class$="phinx"]h1 { font-size: 48px; font-style: normal; font-weight: 700; line-height: 150%; } [class$="phinx"]h2 { font-size: 32px; font-style: normal; font-weight: regular; line-height: 150%; } [class$="phinx"]h4 { font-size: 24px; font-style: normal; font-weight: 400; line-height: 150%; } [class$="phinx"] p { font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; } @media (max-width: 767.98px) { [class$="phinx"] h1 { font-size: 40px; } [class$="phinx"] h2 { font-size: 32px; } [class$="phinx"] h1 { font-size: 24px; } } p.body1 { font-size: 18px; } p.body2 { font-size: 16px; } p.body3 { font-size: 14px; } .home__banner_collection__phinx { padding: 60px 0px 24px; } .home__banner_collection__phinx .container-fluid { max-width: 1320px; margin: 0 auto; } .home__banner_collection__phinx .collection-grid { display: flex; gap: 24px; } .home__banner_collection__phinx .collection-col { display: flex; flex-direction: column; gap: 24px; flex: 1; } .home__banner_collection__phinx .collection-card { position: relative; overflow: hidden; } .home__banner_collection__phinx .collection-card.small { width: 648px; height: 352px; max-width: 100%; } .home__banner_collection__phinx .collection-card.large { width: 648px; height: 728px; max-width: 100%; } .home__banner_collection__phinx .collection-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .home__banner_collection__phinx .collection-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 24px; gap: 24px; background: transparent; } .home__banner_collection__phinx .collection-overlay::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 45, 44, 0) 40.18%, #082D2C 100%); opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; z-index: 0; } .home__banner_collection__phinx .collection-overlay > * { position: relative; z-index: 1; } .home__banner_collection__phinx .collection-card:hover .collection-overlay::before { opacity: 1; } .home__banner_collection__phinx span { font-size: 16px; } .home__banner_collection__phinx .collection-overlay i { width: 24px; height: 24px; align-content: center; text-align: center; } .home__banner_collection__phinx .collection-overlay h2 { font-size: 36px; font-weight: 400; } .home__banner_collection__phinx .collection-overlay h2, .home__banner_collection__phinx .collection-overlay a { color: white; opacity: 1; text-transform: uppercase; } .home__banner_collection__phinx .collection-overlay a { font-size: 16px; display: flex; align-items: center; gap: 2px; text-decoration: none; } .home__banner_collection__phinx .collection-overlay a > img{ height: 11.095px; width: 14.714px; object-fit: contain; } @media (min-width: 768px) and (max-width: 1024px) { .home__banner_collection__phinx { padding: 60px 24px; } .home__banner_collection__phinx .collection-card.small, .home__banner_collection__phinx .collection-card.large { width: 100%; } .home__banner_collection__phinx .collection-card.small { height: 280px; } .home__banner_collection__phinx .collection-card.large { height: 584px; } } @media (max-width: 767.98px) { .home__banner_collection__phinx { padding: 40px 16px 16px; } .home__banner_collection__phinx .collection-grid { flex-direction: column; gap: 16px; } .home__banner_collection__phinx .collection-col { gap: 16px; align-items: center; } .home__banner_collection__phinx .collection-overlay h2 { font-size: 32px; } .home__banner_collection__phinx .collection-card.small { width: 100%; height: 194px; } .home__banner_collection__phinx .collection-card.large { width: 100%; height: 402px; } .home__banner_collection__phinx .collection-overlay h2, .home__banner_collection__phinx .collection-overlay a { opacity: 1; } .home__banner_collection__phinx .collection-overlay:hover::before { opacity: 1; } } .home__banner_collection2__phinx { position: relative; padding: 0; } .home__banner_collection2__phinx .container-fluid { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; } .home__banner_collection2__phinx .img-mobile { display: none; } .home__banner_collection2__phinx .img-desktop { display: block; } .home__banner_collection2__phinx .carousel-card { width: 100% !important; position: relative; } .home__banner_collection2__phinx .carousel-card img { width: 100%; height: 520px; object-fit: cover; } .home__banner_collection2__phinx .collection-info { position: absolute; bottom: 86px; display: flex; flex-direction: column; text-align: center; padding: 0 16px; } .home__banner_collection2__phinx .collection-info h2 { font-size: 36px; color: #FFF; padding-bottom: 20px; } .home__banner_collection2__phinx .collection-info span { color: #fff; font-size: 16px; line-height: 150%; width: 70%; align-self: center; } .home__banner_collection2__phinx .carousel-slider.slick-dotted.slick-slider { margin-bottom: 0; } .home__banner_collection2__phinx .carousel-slider .slick-slide { margin: 0; float: left; } .home__banner_collection2__phinx .carousel-slider .slick-list { margin: 0; } .home__banner_collection2__phinx .carousel-slider .slick-track { display: flex; } .home__banner_collection2__phinx .custom-dots { display: flex; padding: 0; position: absolute; align-self: center; bottom: 40px; } .home__banner_collection2__phinx .custom-dots .slick-dots { position: relative; bottom: 0; display: flex !important; padding: 0; margin: 0; list-style: none; } .home__banner_collection2__phinx .custom-dots .slick-dots li { margin-inline: 4px; } .home__banner_collection2__phinx .custom-dots .slick-dots li button { padding: 0; border: none; font-size: 0; cursor: pointer; background: transparent; } .home__banner_collection2__phinx .custom-dots .slick-dots li button:before { content: ""; display: block; } .home__banner_collection2__phinx .custom-dots .slick-dots li, .home__banner_collection2__phinx .custom-dots .slick-dots li button, .home__banner_collection2__phinx .custom-dots .slick-dots li button:before { width: 6px; height: 6px; background: #DEDEDE; border-radius: 3px; opacity: 1; } .home__banner_collection2__phinx .custom-dots .slick-dots li.slick-active, .home__banner_collection2__phinx .custom-dots .slick-dots li.slick-active button, .home__banner_collection2__phinx .custom-dots .slick-dots li.slick-active button:before { width: 6px; height: 6px; background: #771A49; border-radius: 3px; opacity: 1; } @media (min-width: 768px) and (max-width: 1024px) { .home__banner_collection2__phinx .carousel-card img { height: 100%; } .home__banner_collection2__phinx .collection-info span { width: 100%; } .home__banner_collection2__phinx .collection-info { padding: 0 24px; } } @media (max-width: 767.98px) { .home__banner_collection2__phinx { padding: 0; } .home__banner_collection2__phinx .img-desktop { display: none; } .home__banner_collection2__phinx .collection-info h2{ font-size: 32px; } .home__banner_collection2__phinx .collection-info span { width: 100%; } .home__banner_collection2__phinx .img-mobile { display: block; } .home__banner_collection2__phinx .carousel-card img { height: 100%; } .home__banner_collection2__phinx .collection-info { padding: 0 16px; } .home__banner_collection2__phinx .custom-dots { bottom: 40px; align-self: center; } } .home__brand_category__phinx { padding: 80px 0 40px; } .home__brand_category__phinx .container-fluid { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; } .home__brand_category__phinx .header_section { text-align: center; padding-bottom: 40px; } .home__brand_category__phinx .header_section h2 { font-size: 36px; margin: 0; text-transform: uppercase; } .home__brand_category__phinx .partner-card { padding: 0 12px; transition: all 0.3s ease; } .home__brand_category__phinx .partner-card img { width: 100%; height: 245px; object-fit: cover; transition: box-shadow 0.3s ease; } .home__brand_category__phinx .partner-card:hover img { box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15); } .home__brand_category__phinx .partner-grid.slick-dotted.slick-slider { margin-bottom: 0; } .home__brand_category__phinx .partner-grid .slick-list { margin: 0 -12px; } .home__brand_category__phinx .partner-grid .slick-slide { margin: 0; } .home__brand_category__phinx .partner-grid .slick-track { display: flex; padding-bottom: 40px; } .home__brand_category__phinx .custom-dots { display: flex; justify-content: center; width: 100%; } .home__brand_category__phinx .custom-dots .slick-dots { position: relative; bottom: 0; display: flex !important; padding: 0; margin: 0; list-style: none; } .home__brand_category__phinx .custom-dots .slick-dots li { margin-inline: 4px; } .home__brand_category__phinx .custom-dots .slick-dots li button { padding: 0; border: none; font-size: 0; cursor: pointer; background: transparent; } .home__brand_category__phinx .custom-dots .slick-dots li button:before { content: ""; display: block; } .home__brand_category__phinx .custom-dots .slick-dots li, .home__brand_category__phinx .custom-dots .slick-dots li button, .home__brand_category__phinx .custom-dots .slick-dots li button:before { width: 6px; height: 6px; background: #DEDEDE; border-radius: 3px; opacity: 1; } .home__brand_category__phinx .custom-dots .slick-dots li.slick-active, .home__brand_category__phinx .custom-dots .slick-dots li.slick-active button, .home__brand_category__phinx .custom-dots .slick-dots li.slick-active button:before { width: 6px; height: 6px; background: #771A49; border-radius: 3px; opacity: 1; } @media (min-width: 768px) and (max-width: 1024px) { .home__brand_category__phinx { padding: 40px 24px; } .home__brand_category__phinx .partner-card img { height: 171px; } } @media (max-width: 767.98px) { .home__brand_category__phinx { padding: 40px 16px; } .home__brand_category__phinx .header_section h2 { font-size: 32px; } .home__brand_category__phinx .partner-card { padding: 0 8px; } .home__brand_category__phinx .partner-grid .slick-list { margin: 0 -8px; } .home__brand_category__phinx .partner-card img { height: 171px; } } .home_image_gallery__phinx { position: relative; padding: 60px 0; overflow: hidden; } .home_image_gallery__phinx > .background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .home_image_gallery__phinx .container-fluid { position: relative; z-index: 1; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; } .home_image_gallery__phinx .header_section { padding-bottom: 40px; max-width: 1320px; align-self: center; } .home_image_gallery__phinx .header_section h2 { margin: 0; color: #fff; padding-bottom: 24px; font-size: 36px; text-transform: uppercase; } .home_image_gallery__phinx .header_section p { margin: 0 auto; color: #fff; font-size: 16px; line-height: 150%; } .home_image_gallery__phinx .gallery-slider { overflow: hidden; } .home_image_gallery__phinx .slide-track { display: flex; gap: 24px; width: calc((566px + 24px) * 8); animation: galleryScroll__phinx 20s linear infinite; } .home_image_gallery__phinx .slide-track:hover { animation-play-state: paused; } @keyframes galleryScroll__phinx { 0% { transform: translateX(0); } 100% { transform: translateX(calc((566px + 24px) * -4)); } } .home_image_gallery__phinx .gallery-card { flex-shrink: 0; } .home_image_gallery__phinx .gallery-card img { width: 566px; height: 566px; object-fit: cover; display: block; } @media (min-width: 768px) and (max-width: 1024px) { .home_image_gallery__phinx { padding: 60px 24px; } } @media (max-width: 767.98px) { .home_image_gallery__phinx { padding: 60px 0; } .home_image_gallery__phinx .header_section { padding-left: 16px; padding-right: 16px; } .home_image_gallery__phinx .header_section h2 { font-size: 32px; } .home_image_gallery__phinx .slide-track { gap: 16px; width: calc((100vw - 30px + 16px) * 8); animation-name: none; animation: galleryScrollMobile__phinx 15s linear infinite; } @keyframes galleryScrollMobile__phinx { 0% { transform: translateX(0); } 100% { transform: translateX(calc((100vw - 30px + 16px) * -4)); } } .home_image_gallery__phinx .gallery-card img { width: calc(100vw - 30px); height: calc(100vw - 30px); } } .home_banner_contact__phinx { position: relative; height: 700px; overflow: hidden; } .home_banner_contact__phinx > .background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .home_banner_contact__phinx > .background.img-mobile { display: none; } .home_banner_contact__phinx > .background.img-desktop { display: block; } .home_banner_contact__phinx .container-fluid { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: center; } .home_banner_contact__phinx .text_section { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; max-width: 800px; } .home_banner_contact__phinx .text_section h2 { font-size: 36px; margin: 0; color: #fff; text-transform: uppercase; } .home_banner_contact__phinx .text_section p { margin: 0; color: #fff; font-size: 16px; font-weight: 400; line-height: 150%; } .home_banner_contact__phinx .button.primary { display: inline-block; padding: 9px 32.5px; background-color: #082D2C; color: #fff; text-decoration: none; border: none; cursor: pointer; transition: background-color 0.3s ease; } .home_banner_contact__phinx .button.primary:hover { background-color: #094B49; } @media (min-width: 768px) and (max-width: 1024px) { .home_banner_contact__phinx { height: 500px; } .home_banner_contact__phinx .text_section { padding: 0 24px; } } @media (max-width: 767.98px) { .home_banner_contact__phinx { height: 500px; padding: 0 16px; } .home_banner_contact__phinx > .background.img-desktop { display: none; } .home_banner_contact__phinx > .background.img-mobile { display: block; } .home_banner_contact__phinx .text_section { width: 80%; } .home_banner_contact__phinx .text_section h2{ font-size: 32px; } } .about_about_us__phinx { padding: 80px 0; } .about_about_us__phinx .container-fluid { display: flex; flex-direction: column; max-width: 1320px; margin: 0 auto; } .about_about_us__phinx .row{ display: flex; flex-direction: row; } .about_us_text_section__phinx { display: flex; flex-direction: column; text-align: center; align-items: center; } .about_us_text_section__phinx, .about_us_img_section__phinx { padding-bottom: 80px; } .about_us_text_section__phinx h1 { font-size: 48px; padding-bottom: 24px; text-transform: uppercase; } .about_us_text__phinx h2 { padding-bottom: 40px; } .about_us_text_section__phinx p{ font-size: 16px; } .about_us_text_section__phinx .body1 { padding-bottom: 16px; } .about_us_text__phinx p{ font-size: 16px; } .about_us_img_section__phinx img { width: 100%; height: 493px; object-fit: cover; } .about_about_us__phinx .row { align-items: center; } .about_about_us__phinx .row .col-lg-6 img { width: 100%; height: 763px; object-fit: cover; } .about_us_detail__phinx { display: flex; flex-direction: column; gap: 40px; padding-left: 60px; } .about_us_text__phinx { display: flex; flex-direction: column; } .about_us_numbering__phinx { display: flex; flex-direction: row; gap: 24px; justify-content: space-around; } .about_us_numbering__phinx .numbering-item { display: flex; flex-direction: column; gap: 10px; width: 100%; } .about_us_text__phinx h2, .about_us_numbering__phinx .counter { font-size: 36px; font-weight: 400; line-height: 150%; } .about_us_numbering__phinx .label { font-size: 16px; } @media (min-width: 768px) and (max-width: 1024px) { .about_about_us__phinx { padding: 40px 24px; } .about_about_us__phinx .row{ flex-direction: column; gap: 40px; } .about_us_text_section__phinx, .about_us_img_section__phinx { padding-bottom: 40px; } .about_us_text_section__phinx h1 { font-size: 40px; padding-bottom: 24px; } .about_us_text__phinx h2 { padding-bottom: 40px; } .about_us_detail__phinx { padding-left: 0px; gap: 30px; } .about_us_img_section__phinx img { height: auto; } .about_about_us__phinx .row .col-lg-6 img { height: auto; } .about_us_text__phinx h2, .about_us_numbering__phinx .counter { font-size: 32px; } } @media (max-width: 767.98px) { .about_about_us__phinx { padding: 40px 16px; } .about_us_text_section__phinx, .about_us_img_section__phinx { padding-bottom: 40px; } .about_us_text_section__phinx h1 { font-size: 40px; padding-bottom: 24px; } .about_us_text__phinx h2 { padding-bottom: 40px; } .about_us_detail__phinx { padding-left: 0; gap: 40px; } .about_us_img_section__phinx img { height: calc(100vw - 256px) !important; } .about_about_us__phinx .row .col-lg-6 img { height: calc(100vw - -24px) !important; } .about_us_numbering__phinx { justify-content: space-between; } .about_us_text__phinx h2, .about_us_numbering__phinx .counter { font-size: 32px; } .about_about_us__phinx .row{ flex-direction: column; gap: 40px; } .about_us_text_section__phinx h1 br{ display: none; } } .about_3keypoint__phinx { padding: 80px 0; position: relative; } .about_3keypoint__phinx .image-desktop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; object-fit: cover; } .about_3keypoint__phinx .image-mobile { display: none; } .about_3keypoint__phinx .col-md-4{ padding: 0; } .about_3keypoint__phinx .container-fluid { max-width: 1320px; margin: 0 auto; } .about_3keypoint__phinx .keypoint-card { display: flex; flex-direction: column; gap: 40px; height: 100%; } .about_3keypoint__phinx .col-md-4:first-child .keypoint-card { padding-right: 24px; } .about_3keypoint__phinx .col-md-4:nth-child(2) .keypoint-card { padding-left: 24px; padding-right: 24px; } .about_3keypoint__phinx .col-md-4:last-child .keypoint-card { padding-left: 24px; } .about_3keypoint__phinx .col-md-4 + .col-md-4 .keypoint-card { position: relative; } .about_3keypoint__phinx .col-md-4 + .col-md-4 .keypoint-card::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 244px; background-color: #B59823; } .about_3keypoint__phinx .keypoint-card h2 { font-size: 36px; font-weight: 400; line-height: 150%; color: #fff; text-align: center; } .about_3keypoint__phinx .keypoint-card p { font-size: 16px; font-weight: 400; line-height: 150%; color: #fff; text-align: center; } @media (min-width: 768px) and (max-width: 1024px) { .about_3keypoint__phinx { padding: 60px 24px; } .about_3keypoint__phinx .keypoint-card { padding: 30px 24px; } .about_3keypoint__phinx .keypoint-card h2 { font-size: 32px; } } @media (max-width: 767.98px) { .about_3keypoint__phinx { padding: 40px 16px; } .about_3keypoint__phinx .image-desktop { display: none; } .about_3keypoint__phinx .image-mobile { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -10; } .about_3keypoint__phinx .col-md-4 + .col-md-4 .keypoint-card::before { width: 244px; height: 1px; left: 50%; top: 0; transform: translateX(-50%); } .about_3keypoint__phinx .keypoint-card h2 { font-size: 32px; } .about_3keypoint__phinx .col-md-4:first-child .keypoint-card { padding: 0px 0px 24px 0px; } .about_3keypoint__phinx .col-md-4:nth-child(2) .keypoint-card { padding: 24px 0px; } .about_3keypoint__phinx .col-md-4:last-child .keypoint-card { padding: 24px 0px 0px 0px; } } .about_designer__phinx { padding: 80px 0; } .about_designer__phinx .container-fluid { max-width: 1320px; margin: 0 auto; } .about_designer__phinx .row { align-items: center; } .about_designer__phinx .col-lg-6 { padding: 0; } .about_designer__phinx .col-lg-6 img { width: 100%; height: 100%; object-fit: cover; } .about_designer_detail__phinx { display: flex; flex-direction: column; gap: 16px; padding-right: 60px; text-align: center; } .about_designer_detail__phinx h2 { font-size: 36px; font-weight: 400; line-height: 150%; text-transform: uppercase; letter-spacing: 2px; } .about_designer_detail__phinx .body1 { font-size: 18px; font-weight: 400; line-height: 150%; text-transform: uppercase; } .about_designer_detail__phinx p { font-size: 16px; font-weight: 400; line-height: 150%; } @media (min-width: 768px) and (max-width: 1024px) { .about_designer__phinx { padding: 60px 24px; } .about_designer_detail__phinx { padding-right: 30px; } .about_designer_detail__phinx h2 { font-size: 32px; } } @media (max-width: 767.98px) { .about_designer__phinx { padding: 40px 16px; } .about_designer__phinx .row { flex-direction: column-reverse; gap: 40px; } .about_designer_detail__phinx { padding-right: 0; } .about_designer_detail__phinx h2 { font-size: 32px; } .about_designer_detail__phinx .body1 { font-size: 16px; } .about_designer__phinx .col-lg-6 img { height: calc(100vw - -84.08px); } } .about_faq__phinx { padding: 100px 0; position: relative; } .about_faq__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -10; } .container_faq__phinx { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; } .about_faq_header__phinx h2 { font-size: 36px; font-weight: 400; line-height: 150%; text-align: center; color: #fff; letter-spacing: 2px; } .about_faq_accordion__phinx { display: flex; flex-direction: column; } .about_faq_card__phinx { border-bottom: 1px solid #fff; } .about_faq_card__phinx:first-child .about_faq_btn__phinx { padding-top: 0; } .about_faq_card__phinx .about_faq_btn__phinx{ text-transform: uppercase; } .about_faq_btn__phinx { display: flex; align-items: center; gap: 20px; width: 100%; padding: 20px 0; background: none; border: none; cursor: pointer; text-align: left; } .about_faq_btn__phinx h4 { font-size: 24px; font-weight: 400; line-height: 150%; color: #fff; margin: 0; } .about_faq_icon__phinx { position: relative; width: 42px; height: 42px; flex-shrink: 0; } .about_faq_icon__phinx::before, .about_faq_icon__phinx::after { content: ""; position: absolute; background-color: #B59823; transition: transform 0.3s ease; } .about_faq_icon__phinx::before { width: 24px; height: 2px; top: 50%; left: 9px; transform: translateY(-50%); } .about_faq_icon__phinx::after { width: 2px; height: 24px; left: 50%; top: 9px; transform: translateX(-50%); } .about_faq_btn__phinx:not(.collapsed) .about_faq_icon__phinx::after { transform: translateX(-50%) rotate(90deg); } .about_faq_card_body__phinx { padding: 0 40px 20px 62px; } .about_faq_card_body__phinx p { font-size: 18px; font-weight: 400; line-height: 150%; color: #fff; } @media (min-width: 768px) and (max-width: 1024px) { .about_faq__phinx { padding: 60px 24px; } .container_faq__phinx { gap: 40px; } .about_faq_header__phinx h2 { font-size: 32px; } } @media (max-width: 767.98px) { .about_faq__phinx { padding: 60px 16px; } .container_faq__phinx { gap: 40px; } .about_faq_header__phinx h2 { font-size: 32px; } .about_faq_btn__phinx { padding: 20px 0; gap: 20px; } .about_faq_card_body__phinx { padding: 0 40px 20px 62px; } } .contact_form__phinx { padding: 60px 0; } .contact_form__phinx .container { max-width: 1320px; } .contact_form__phinx .contact_form_row__phinx { align-items: stretch; gap: 24px; flex-flow: nowrap; } .contact_form__phinx .col-lg-6 { padding: 0; } .contact_form_detail__phinx { display: flex; flex-direction: column; height: 100%; } .contact_form_text__phinx { display: flex; flex-direction: column; gap: 20px; } .contact_form_text__phinx h1 { font-size: 48px; font-weight: 500; line-height: 150%; color: #000; } .contact_form_text__phinx p { font-size: 16px; font-weight: 400; line-height: 150%; color: #000; } .contact_form_form__phinx { margin-top: 40px; } .contact_form_image__phinx { padding-left: 100px; height: 100%; } .contact_form_image__phinx img { width: 100%; height: 747px; object-fit: cover; } @media (min-width: 1025px) and (max-width: 1200px) { .contact_form__phinx { padding: 60px 24px; } .contact_form_image__phinx { padding-left: 60px; } } @media (min-width: 768px) and (max-width: 1024px) { .contact_form__phinx { padding: 50px 24px; } .contact_form_image__phinx { padding-left: 0; } .contact_form_image__phinx img { height: 100%; } .contact_form_text__phinx h1 { font-size: 40px; } } @media (max-width: 767.98px) { .contact_form__phinx { padding: 40px 16px; } .contact_form__phinx .contact_form_row__phinx { flex-direction: column; } .contact_form_text__phinx h1 { font-size: 40px; } .contact_form_image__phinx { padding-left: 0; padding-top: 40px; } .contact_form_image__phinx img { height: calc(100vw - -98px); } } .contact_info_map__phinx { padding: 80px 0; position: relative; } .contact_info_map__phinx > .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; object-fit: cover; } .contact_info_map__phinx .container-fluid { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; } .contact_info__phinx .col-md-4 { padding: 0; } .contact_info__phinx .info-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; height: 244px; position: relative; } .contact_info__phinx .info-card img { width: 60px; height: 60px; object-fit: contain; } .contact_info__phinx .info-card p.body1 { font-size: 18px; font-weight: 700; line-height: 150%; color: #fff; } .contact_info__phinx .info-card p { font-size: 16px; font-weight: 400; line-height: 150%; color: #fff; } .contact_info__phinx .col-md-4:first-child .info-card { padding-right: 24px; } .contact_info__phinx .col-md-4:nth-child(2) .info-card { padding-left: 24px; padding-right: 24px; } .contact_info__phinx .col-md-4:last-child .info-card { padding-left: 24px; } .contact_info__phinx .col-md-4 + .col-md-4 .info-card { position: relative; } .contact_info__phinx .col-md-4 + .col-md-4 .info-card::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 244px; background-color: #B59823; } .contact_map__phinx { width: 100%; overflow: hidden; padding-top: 40px; } .contact_map__phinx iframe { width: 100%; height: 300px; border: none; display: block; } @media (min-width: 768px) and (max-width: 1024px) { .contact_info_map__phinx { padding: 60px 24px; } .contact_info__phinx .col-md-4 + .col-md-4 .info-card::before { height: 244px; } } @media (max-width: 767.98px) { .contact_info_map__phinx { padding: 40px 16px; } .contact_info__phinx .info-card { height: 100%; } .contact_info__phinx .col-md-4:first-child .info-card { padding: 0 0 24px 0; } .contact_info__phinx .col-md-4:nth-child(2) .info-card { padding: 24px 0; } .contact_info__phinx .col-md-4:last-child .info-card { padding: 24px 0 0 0; } .contact_info__phinx .col-md-4 + .col-md-4 .info-card::before { width: 244px; height: 1px; left: 50%; top: 0; transform: translateX(-50%); } } .product-description-section{ padding: 0; } .faq_accordion__ctpn { width: 100%; } .faq__card__ctpn { border-bottom: 1px solid #000; } .faq__header__ctpn { padding: 20px 0; } .faq__btn__ctpn { width: 100%; text-align: left; font-size: 24px; font-weight: 500; letter-spacing: 0.05em; color: #000; background: none; border: none; cursor: pointer; padding: 0; outline: none !important; box-shadow: none !important; display: flex; align-items: center; gap: 20px; } .faq__icon__ctpn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; padding: 9px; } .faq__icon__ctpn img { width: 100%; height: 100%; object-fit: contain; } .faq__btn__ctpn:not(.collapsed) .faq__icon--minus { display: block; } .faq__btn__ctpn:not(.collapsed) .faq__icon--plus { display: none; } .faq__btn__ctpn.collapsed .faq__icon--minus { display: none; } .faq__btn__ctpn.collapsed .faq__icon--plus { display: block; } .faq__body__ctpn { padding: 0 0 20px 62px; font-weight: 400; color: #000; font-size: 18px; line-height: 1.8; } @media (max-width: 767.98px) { .faq__body__ctpn{ padding: 0 40px 20px 62px; }} .collection-detail-1 { .container { padding: 0; } display: flex; padding: 80px 0 40px 0; flex-direction: column; .collection-detail-1-content { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 1320px; margin: 0 auto; .collection-detail-1-content-title { color: #000; font-family: Baskerville; font-size: 36px; font-style: normal; font-weight: 400; line-height: 150%; text-transform: uppercase; } .collection-detail-1-content-description { color: #000; font-size: 16px; font-style: normal; font-weight: 389; line-height: 150%; } } } @media (min-width: 768px) and (max-width: 1200px) { .collection-detail-1 { display: flex; padding: 40px 16px; flex-direction: column; align-items: center; gap: 40px; align-self: stretch; } .collection-detail-1-content-title { font-size: 32px; } } @media all and (max-width: 767px) { .collection-detail-1 { display: flex; padding: 40px 16px; flex-direction: column; align-items: center; gap: 40px; align-self: stretch; } .collection-detail-1-content-title { font-size: 32px; } } .collection-detail-2 { box-sizing: border-box; overflow: hidden; padding: 40px 0; } .collection-detail-2 .container-fluid { padding: 0; max-width: 100%; box-sizing: border-box; } .collection-detail-2 .collection-detail-2-content { display: flex; flex-direction: column; box-sizing: border-box; } .collection-detail-2 .collection-detail-2-left { width: 100%; min-width: 0; } .collection-detail-2 .collection-detail-2-left img { width: 100%; height: auto; display: block; object-fit: cover; vertical-align: top; } .collection-detail-2 .collection-detail-2-right { width: 100%; min-width: 0; } .collection-detail-2 .collection-detail-2-right-inner { display: flex; padding: 40px 16px; flex-direction: column; justify-content: center; align-items: center; gap: 40px; box-sizing: border-box; } .collection-detail-2 .collection-detail-2-right-img { width: 100%; height: 436px; align-self: stretch; aspect-ratio: 163/103; overflow: hidden; min-width: 0; } .collection-detail-2 .collection-detail-2-right-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .collection-detail-2 .collection-detail-2-right-title { color: #000; text-align: center; font-family: Baskerville, serif; font-size: 36px; font-weight: 400; line-height: 150%; text-transform: uppercase; margin: 0; } .collection-detail-2 .collection-detail-2-right-description { color: #000; text-align: center; font-size: 16px; font-style: normal; font-weight: 389; line-height: 150%; margin: 0; } .collection-detail-2 .collection-detail-2-right-btn { display: flex; width: 160px; height: 42px; padding: 0 32px; justify-content: center; align-items: center; gap: 8px; background: #082D2C; color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; text-decoration: none; text-transform: uppercase; box-sizing: border-box; } @media (min-width: 768px) { .collection-detail-2 { padding: 0; } .collection-detail-2 .collection-detail-2-content { flex-direction: row; align-items: stretch; flex-wrap: nowrap; } .collection-detail-2 .collection-detail-2-left { width: 50%; flex: 0 0 50%; min-width: 0; min-height: 0; position: relative; } .collection-detail-2 .collection-detail-2-left img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-height: 100%; object-fit: cover; } .collection-detail-2 .collection-detail-2-right { width: 50%; flex: 0 0 50%; min-width: 0; display: flex; } .collection-detail-2 .collection-detail-2-right-inner { padding: 80px 100px; flex: 1 1 auto; align-self: stretch; min-width: 0; } .collection-detail-2 .collection-detail-2-right-img { height: 436px; flex-shrink: 0; } } .collection-detail-3 { display: flex; padding: 40px 0 80px 0; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; overflow: hidden; } .collection-detail-3 .container { padding-left: 16px; padding-right: 16px; box-sizing: border-box; max-width: 100%; } .collection-detail-3 .collection-detail-3-content { display: flex; flex-direction: row; width: 100%; max-width: 1320px; margin: 0 auto; box-sizing: border-box; min-width: 0; } .collection-detail-3 .collection-detail-3-content-left { display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: center; padding-right: 60px; text-align: center; min-width: 0; } .collection-detail-3 .collection-detail-3-content-left-title { color: #000; font-size: 36px; font-weight: 400; line-height: 150%; text-transform: uppercase; } .collection-detail-3 .collection-detail-3-content-left-title-2 { color: #000; text-align: center; font-family: Baskerville, serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; text-transform: uppercase; } .collection-detail-3 .collection-detail-3-content-left-description { color: #000; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; } .collection-detail-3 .collection-detail-3-content-right { display: flex; min-width: 0; flex: 1 1 0; } .collection-detail-3 .collection-detail-3-content-right img { width: 100%; max-width: 100%; height: auto; display: block; object-fit: cover; } @media (min-width: 1201px) { .collection-detail-3 .collection-detail-3-content-left { flex: 0 0 50%; width: 50%; } .collection-detail-3 .collection-detail-3-content-right { flex: 0 0 50%; width: 50%; min-width: 0; } .collection-detail-3 .collection-detail-3-content-right img { width: 100%; max-width: 100%; height: auto; display: block; object-fit: cover; } } @media (min-width: 768px) and (max-width: 1200px) { .collection-detail-3 .collection-detail-3-content { flex-direction: column; } .collection-detail-3 .collection-detail-3-content-left { padding-right: 0; padding-top: 40px; } .collection-detail-3 .collection-detail-3-content-right { width: 100%; max-width: 100%; order: -1; } } @media all and (max-width: 767px) { .collection-detail-3 { padding: 40px 0 40px 0; } .collection-detail-3 .container { padding-left: 16px; padding-right: 16px; } .collection-detail-3 .collection-detail-3-content { flex-direction: column; } .collection-detail-3 .collection-detail-3-content-left { padding-right: 0; padding-top: 40px; } .collection-detail-3 .collection-detail-3-content-right { width: 100%; max-width: 100%; order: -1; } } .collection-detail-4 { position: relative; min-height: 500px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; } .collection-detail-4 .collection-detail-4-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; } .collection-detail-4 .collection-detail-4-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .collection-detail-4 .collection-detail-4-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; max-width: 650px; box-sizing: border-box; } .collection-detail-4 .collection-detail-4-title { color: #FFF; font-family: Baskerville, serif; font-size: 36px; font-weight: 400; line-height: 150%; text-transform: uppercase; text-align: center; margin: 0; } .collection-detail-4 .collection-detail-4-description { color: #FFF; font-family: Baskerville, serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; text-align: center; margin: 0; } .collection-detail-4 .collection-detail-4-button { display: flex; height: 42px; padding: 0 32px; justify-content: center; align-items: center; gap: 8px; background: #082D2C; color: #FFF; font-size: 16px; font-weight: 400; line-height: 150%; text-decoration: none; text-transform: uppercase; box-sizing: border-box; } .collection-detail-4 .collection-detail-4-button:hover { opacity: 0.9; } @media (min-width: 768px) { .collection-detail-4 { min-height: 500px; } .collection-detail-4 .collection-detail-4-content { padding: 242px 16px; gap: 24px; } .collection-detail-4 .collection-detail-4-title { font-size: 36px; } } @media (max-width: 767px) { .collection-detail-4 { min-height: 500px; } .collection-detail-4 .collection-detail-4-content { padding: 96px 16px; } } @keyframes zoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideRight { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes zoomOut { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } } @keyframes flipX { from { opacity: 0; transform: perspective(600px) rotateX(30deg); } to { opacity: 1; transform: perspective(600px) rotateX(0); } } @keyframes flipY { from { opacity: 0; transform: perspective(600px) rotateY(40deg); } to { opacity: 1; transform: perspective(600px) rotateY(0); } } .zoom-in, .zoom-out, .fade-in, .slide-up, .slide-down, .slide-left, .slide-right, .flip-x, .flip-y { opacity: 0; } .zoom-in.is-visible { animation: zoomIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .zoom-out.is-visible { animation: zoomOut 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .fade-in.is-visible { animation: fadeIn 0.8s ease both; } .slide-up.is-visible { animation: slideUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .slide-down.is-visible { animation: slideDown 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .slide-left.is-visible { animation: slideLeft 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .slide-right.is-visible { animation: slideRight 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .flip-x.is-visible { animation: flipX 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } .flip-y.is-visible { animation: flipY 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @media (prefers-reduced-motion: reduce) { .zoom-in, .zoom-out, .fade-in, .slide-up, .slide-down, .slide-left, .slide-right, .flip-x, .flip-y { opacity: 1 !important; animation: none !important; } }