.section-hero {
    background-image: url(../images/home/background-hero.jpg);
    height: 814px;
    justify-content: center;
    padding: 44px 0;
    background-size: cover;
    background-position: center;
}
.section-hero-wrapper {
    display: flex;
}
.section-vertical-tab-content-wrapper{
	width:1220px; 
	max-width:100%;
	padding: 0 0 100px 0;
}

.section-hero-double-q {
    position: absolute;
    top: 0;
    left: -98px;
    height: 74px;
}
.section-hero-double-q.turn-it-over {
    position: absolute;
    top: 0;
    left: unset;
    right: -100px;
    transform: rotate(180deg);
}
.section-hero-double-q img {
    width: auto;
}

.section-hero-header {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 26px;
    z-index: 1;
}
.section-hero-header-1 {
    font-size: 70px;
    color: #FF2623;
    line-height: 1.4;
}
.section-hero-paragraph {
    font-family: "sukhumvit-set-medium";
    font-size: 32px;
    color: #fff;
    line-height: 1;
}
.section-video {
    height: auto;
    max-height: fit-content;
    justify-content: center;
    background: linear-gradient(to bottom, #D81B18 50%, #CF1916 50%);
    padding-top: 40px;
}
.section-video-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}
.section-video-play {
    display: flex;
    margin-bottom: 60px;
}
.section-video-play-image {
    height: 456px;
    z-index: 1;
}
.section-video-content {
    display: flex;
    align-items: center;
    gap: 30px;
}
.section-video-content-image {
    height: 258px;
}
.section-video-content-image img {
    width: auto;
}
.section-video-content-text {
    display: flex;
    flex-direction: column;
    width: 580px;
    gap: 20px;
}
.section-video-content-header {
    display: flex;
}
.section-video-content-header-2 {
    font-family: "sukhumvit-set-semiBold";
    font-size: 32px;
    color: #fff;
    line-height: 1;
}
.section-video-content-detail {
    display: flex;
}
.section-video-content-detail-paragraph {
    font-family: "sukhumvit-set-light";
    font-size: 18px;
    color: #fff;
    line-height: 1.7;
}

.section-video-image-floating {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
}
.section-video-image-floating img {
    width: auto;
}
.section-video-image-floating.image-floating-1 {
    top: 212px;
    left: 0;
    height: 181px;
}
.section-video-image-floating.image-floating-2 {
    top: 192px;
    left: unset;
    right: 74px;
    height: 214px;

}
.section-video-image-floating.image-floating-3 {
    top: 180px;
    left: unset;
    right: 0;
    height: 102px;
}
.section-video-image-floating.image-floating-4 {
    top: 340px;
    left: 64px;
    height: 126px;
}
.section-video-image-floating.image-floating-5 {
    top: 390px;
    left: unset;
    right: 90px;
    height: 20px;
}
.section-video-image-floating.image-floating-6 {
    top: 562px;
    left: 164px;
    height: 16px;
}
.section-video-image-floating.image-floating-7 {
    top: 610px;
    left: 100px;
    height: 18px;
}

.section-brand-animation {
    height: 108px;
    justify-content: center;
    align-items: center;
}
.section-brand-animation-wrapper {
    display: flex;
    gap: 60px;
}
.section-brand-animation-image {
    height: 60px;
}
.section-brand-animation-image img {
    width: auto;
}
.section-our-products {
    height: 2300px;
    background-color: #FEF7ED;
    justify-content: center;
    padding-top: 64px;
}
.section-our-products-wrapper {
    display: flex;
    flex-direction: column;
}
.section-our-products-header-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin-bottom: 28px;
}
.section-our-products-header {
    display: flex;
}
.section-our-products-header-2 {
    width: auto;
    text-align: center;
    line-height: 1.4;
}
.section-our-products-paragraph-box {
    display: flex;
}
.section-our-products-paragraph {
    font-family: "sukhumvit-set-semiBold";
    font-size: 30px;
    color: #464C4F;
    line-height: 1.4;
    width: 900px;
    text-align: center;
}
.section-our-products-service-and-standard {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-our-products-service-wrapper {
    display: flex;
    gap: 42px;
    justify-content: center;
    margin-bottom: 46px;
}
.section-our-products-service-box {
    display: flex;
    gap: 22px;
    width: 300px;
}
.section-our-products-box {
    display: flex;
}
.section-our-products-service-image {
    height: 72px;
}
.section-our-products-service-image img {
    width: auto;
}
.section-our-products-service-text-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.section-our-products-service-text-header-box {
    display: flex;
}
.section-our-products-service-text-header {
    font-family: "sukhumvit-set-bold";
    font-size: 18px;
    color: #7A0803;
    line-height: 1.4;
}
.section-our-products-service-text-paragraph-box {
    display: flex;
}
.section-our-products-service-text-paragraph {
    font-family: "sukhumvit-set-light";
    font-size: 16px;
    color: #7A0803;
    line-height: 1.6;
}
.section-our-products-certified-standards {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 66px;
}
.section-our-products-certified-standards:before {
    content: "";
    position: absolute;
    left: 205px;
    width: 392px;
    height: 1px;
    background-color: #B5B2AE;
}
.section-our-products-certified-standards:after {
    content: "";
    position: absolute;
    right: 205px;
    width: 392px;
    height: 1px;
    background-color: #B5B2AE;
}
.section-our-products-certified-standards-paragraph {
    font-family: "sukhumvit-set-semiBold";
    font-size: 18px;
    color: #464C4F;
    line-height: 1;
}
.section-our-products-certified-standards-image-wrapper {
    display: flex;
    gap: 28px;
    margin-bottom: 64px;
}
.section-our-products-certified-standards-image {
    height: 100px;
}
.section-our-products-certified-standards-image img {
    width: auto;
}
.section-our-products-product-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.section-our-products-product-box {
    flex: 1 1 calc(480px - 10px); /* กำหนดให้แต่ละกล่องมีความกว้างประมาณ 33.33% */
    height: 600px;
    position: relative;
    background-color: #849F59;
    padding: 50px 0 0;
    cursor: pointer;
    overflow: hidden;
}
.section-our-products-product-box:nth-of-type(3),
.section-our-products-product-box:nth-of-type(5),
.section-our-products-product-box:nth-of-type(6) {
    background-image: url(../images/our-service/jagged-shape.png);
    background-size: 100% 155px;
    background-position: center bottom;
    background-repeat: no-repeat;
}
.section-our-products-product-box:nth-of-type(2),
.section-our-products-product-box:nth-of-type(5) {
    background-color: #D81B18;
}
.section-our-products-product-box:nth-of-type(3),
.section-our-products-product-box:nth-of-type(4) {
    background-color: #FD8A06;
}
.section-our-products-product-box:nth-of-type(6) {
    background-color: #464C4F;
}
.section-our-products-product-box:nth-of-type(1),
.section-our-products-product-box:nth-of-type(2),
.section-our-products-product-box:nth-of-type(3) {
    margin-bottom: 24px;
}

.section-our-products-product-header-wrapper {
	position: relative;
	z-index: 1;
    display: flex;
    flex-direction: column;
    width: 320px;
    margin-left: 40px;
    gap: 18px;
}
.section-our-products-product-header {
    display: flex;
}
.section-our-products-product-header-3 {
    font-family: "sukhumvit-set-semiBold";
    font-size: 32px;
    color: #fff;
    line-height: 1.4;
}
.section-our-products-product-paragraph-box {
    display: flex;
}
.section-our-products-product-paragraph {
    font-family: "sukhumvit-set-light";
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
}
.section-our-products-product-image {
    height: 382px;
    position: absolute;
    bottom: 0;
}
.section-our-products-product-image img {
    width: auto;
    transition:  all 0.4s ease;
}
.section-our-products-product-box:hover .section-our-products-product-image img {
    scale: 1.1;
}
.section-our-products-product-box:nth-of-type(3) .section-our-products-product-image {
    height: 392px;
    bottom: 10px;
    right: 0;
}
.section-our-products-product-box:nth-of-type(5) .section-our-products-product-image {
    height: 382px;
}
.section-our-products-product-box:nth-of-type(4) .section-our-products-product-image,
.section-our-products-product-box:nth-of-type(6) .section-our-products-product-image {
    height: 322px;
    bottom: 40px;
    right: 0;
}
.section-our-products-product-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -12px;
    right: -12px;
    width: 84px;
    height: 84px;
    background-color: #000;
    border-radius: 50%;
}
.section-our-products-product-arrow-1 {
    border: solid #fff;
    border-width: 0px 3px 3px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(-180deg);
}
.section-our-products-product-arrow-2 {
    position: absolute;
    left: 41.5px;
    top: 34px;
    width: 3px;
    height: 18px;
    background-color: #fff;
    transform: rotate(-45deg);
    transition:  all 0.4s ease;
}
.section-our-products-product-box:hover .section-our-products-product-arrow-2 {
    left: 44px;
    top: 32px;
    height: 26px;
}
.section-our-products-image-floating {
    position: absolute;
}
.section-our-products-image-floating.our-products-image-floating-1 {
    top: 340px;
    left: 30px;
    height: 22px;
}
.section-our-products-image-floating.our-products-image-floating-2 {
    height: 24px;
    right: 34px;
    top: 382px;
}
.section-our-products-image-floating.our-products-image-floating-3 {
    height: 144px;
    right: 0;
    top: 160px;
}
.section-our-products-image-floating.our-products-image-floating-4 {
    height: 130px;
    left: 50px;
    top: 370px;
}
.view-more-products-button-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 42px;
}
.view-more-products-button {
    display: flex;
    width: 294px;
    height: 58px;
    background-color: #FF2623;
    border-radius: 14px;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}
.view-more-products-button:hover {
    background-color: #464C4F;
}
.view-more-products-text {
    font-family: "sukhumvit-set-medium";
    font-size: 24px;
    color: #fff;
    line-height: 1;
}
.view-more-products-arrow-1 {
    background-color: #fff;
    height: 3px;
    width: 18px;
    position: relative;
    right: -14px;
    transition: all 0.4s ease;
}
.view-more-products-button:hover .view-more-products-arrow-1 {
    width: 28px;
}
.view-more-products-arrow-2 {
    position: relative;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(-45deg);
    transition: all 0.4s ease;
}

.section-smile-making-menu {
    height: 370px;
    justify-content: center;
    background-color: #FEF7ED;
    padding-top: 90px;
}
.section-smile-making-menu-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.section-smile-making-menu-header {
    display: flex;
}
.section-smile-making-menu-text-box {
    display: flex;
}
.section-smile-making-menu-text {
    font-family: "sukhumvit-set-semiBold";
    font-size: 30px;
    color: #464C4F;
    line-height: 1;
}
.section-smile-making-menu-paragraph-box {
    display: flex;
    width: 850px;
    text-align: center;
}
.section-smile-making-menu-paragraph {
    font-family: "sukhumvit-set-light";
    font-size: 18px;
    color: #464C4F;
    line-height: 1.6;
}

.section-smile-making-menu-image-floating {
    position: absolute;
}
.section-smile-making-menu-image-floating.smile-making-menu-floating-1 {
    height: 140px;
    top: -12px;
    left: 30px;
}
.section-smile-making-menu-image-floating.smile-making-menu-floating-2 {
    height: 136px;
    top: 170px;
    left: 110px;
    opacity: 0.1;
}
.section-smile-making-menu-image-floating.smile-making-menu-floating-3 {
    height: 140px;
    right: 0;
    bottom: 50px;
}
.section-smile-making-menu-image-floating.smile-making-menu-floating-4 {
    height: 24px;
    right: 52px;
    top: 48px;
}

.section-switch-and-slide {
    height: 658px;
    background-color: #7A0803;
    overflow: visible;
}
.section-switch-and-slide-wrappper {
    display: flex;
}
.section-switch-and-slide-product {
    display: flex;
    width: 720px;
}
.section-switch-and-slide-product-image {
    position: absolute;
}
.section-switch-and-slide-product-image img {
    width: auto;
}
.section-switch-and-slide-product-image.switch-and-slide-product-image-1 {
    height: 72px;
    top: 60px;
    left: 50px;
}
.section-switch-and-slide-product-image.switch-and-slide-product-image-2 {
    height: 140px;
    top: 2px;
    left: 90px;
}
.section-switch-and-slide-product-image.switch-and-slide-product-image-3 {
    height: 272px;
    top: -96px;
    left: 454px;
}
.section-switch-and-slide-product-image.switch-and-slide-product-image-4 {
    height: 660px;
    bottom: 0;
    left: 0;
}
.section-switch-and-slide-product-image.switch-and-slide-product-image-5 {
    height: 360px;
    bottom: 0;
    left: 0;
}
.section-switch-and-slide-product-image.switch-and-slide-product-image-6 {
    height: 228px;
    bottom: -70px;
    left: 520px;
}
.section-switch-and-slide-pig {
    display: flex;
    width: 720px;
    flex-direction: column;
    padding: 44px 0 0 90px;
}
.section-switch-and-slide-pig-image {
    display: flex;
    align-items: center;
    height: 258px;
}
.section-switch-and-slide-pig-click {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 44px;
    padding-left: 180px;
}
.section-switch-and-slide-pig-click:before {
    position: absolute;
    content: "";
    width: 476px;
    height: 1px;
    background-color: #fff;
    bottom: -20px;
    left: 0;
}
.section-switch-and-slide-pig-click-image {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 54px;
    height: 54px;
}
.section-switch-and-slide-pig-click-image img {
    height: 30px;
    width: auto;
}
.section-switch-and-slide-pig-click-text {
    display: flex;
}
.section-switch-and-slide-pig-click-text-paragraph {
    font-family: "sukhumvit-set-medium";
    font-size: 18px;
    color: #fff;
    line-height: 1;
}
.section-switch-and-slide-pig-content {
    display: flex;
    flex-direction: column;
    width: 530px;
}
.section-switch-and-slide-pig-content-header {
    display: flex;
    margin-bottom: 18px;
}
.section-switch-and-slide-pig-content-header-3 {
    font-family: "sukhumvit-set-medium";
    font-size: 30px;
    color: #fff;
    line-height: 1;
}
.section-switch-and-slide-pig-content-detail {
    display: flex;
    margin-bottom: 26px;
}
.section-switch-and-slide-pig-content-paragraph {
    font-family: "sukhumvit-set-thin";
    font-size: 18px;
    color: #fff;
    line-height: 1.6;
}
.section-switch-and-slide-pig-content-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-switch-and-slide-pig-content-bottom-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
}
.section-switch-and-slide-pig-content-bottom img {
    width: auto;
    height: 22px;
}
.section-switch-and-slide-pig-content-bottom-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.section-switch-and-slide-pig-content-bottom-header {
    display: flex;
}
.section-switch-and-slide-pig-content-bottom-header-paragraph {
    font-family: "sukhumvit-set-medium";
    font-size: 16px;
    color: #fff;
    line-height: 1;
}
.section-switch-and-slide-pig-content-bottom-paragraph-box {
    display: flex;
}
.section-switch-and-slide-pig-content-bottom-paragraph {
    font-family: "sukhumvit-set-medium";
    font-size: 16px;
    color: #fff;
    line-height: 1;
}
.section-beginning-smile {
    height: 506px;
    justify-content: center;
    padding-top: 96px;
}
.section-beginning-smile-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 24px;
}
.section-beginning-smile-header {
    display: flex;
}
.section-beginning-smile-header-2 {
    line-height: 1.5;
    text-align: center;
}
.section-beginning-smile-text-box {
    display: flex;
}
.section-beginning-smile-text {
    font-family: "sukhumvit-set-semiBold";
    font-size: 30px;
    color: #464C4F;
    line-height: 1.4;
    text-align: center;
}
.section-beginning-smile-paragraph-box {
    display: flex;
    width: 850px;
    text-align: center;
}
.section-beginning-smile-paragraph {
    font-family: "sukhumvit-set-light";
    font-size: 18px;
    color: #464C4F;
    line-height: 1.6;
}

.section-beginning-smile-image-floating {
    position: absolute;
}
.section-beginning-smile-image-floating.beginning-smile-image-floating-1 {
    height: 140px;
    left: 0;
    top: 210px;
}
.section-beginning-smile-image-floating.beginning-smile-image-floating-2 {
    height: 18px;
    right: 50px;
    bottom: 180px;
}
.section-beginning-smile-image-floating.beginning-smile-image-floating-3 {
    height: 190px;
    bottom: -30px;
    right: 50px;
}
.section-beginning-smile-image-floating.beginning-smile-image-floating-4 {
    height: 20px;
    left: 130px;
    bottom: 76px;
}
.section-history-slide {
    height: 598px;
}
.section-history-slide-wrapper {
    display: flex;
}
.section-history-slide-box {
    width: 100% !important;
    height: 100%;
    background-color: #849F59;
    padding: 80px 0 0 130px;
    background-image: url(../images/history-slide/background-history-silde-1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section-history-slide-box:nth-child(2) {
    background-image: url(../images/history-slide/background-history-silde-2.png);
}
.section-history-slide-list {
    display: flex;
    width: 920px;
}
.section-history-slide-list-box {
    display: flex;
    grid-template-columns: repeat(2, 1fr);
}
.section-history-slide-list-paragraph {
    font-family: "sukhumvit-set-medium";
    font-size: 16px;
    color: #7A0803;
    line-height: 1.4;
}
.section-history-slide-box:before {
    content: "";
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}
.section-history-slide-box:after {
    content: "";
    position: absolute;
    bottom: 46px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 50px;
    background-color: #fff;
}

.section-history-slide-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 208px;
}
.section-history-slide-header-title {
    display: flex;
    margin-bottom: 22px;
}
.section-history-slide-header-title-text {
    font-family: "sukhumvit-set-text";
    font-size: 24px;
    color: #7A0803;
    line-height: 1;
}
.section-history-slide-detail {
    display: flex;
    margin-bottom: 30px;
}
.section-history-slide-detail-text {
    font-family: "sukhumvit-set-semiBold";
    font-size: 40px;
    color: #7A0803;
    line-height: 1.4;
}
.section-history-slide-address {
    display: flex;
}
.section-history-slide-address-text {
    font-family: "sukhumvit-set-light";
    font-size: 24px;
    color: #fff;
    line-height: 1;
}

.section-history-slide-number-wrapper {
    display: flex;
    justify-content: flex-end;
    padding-right: 164px;
}
.section-history-slide-number {
    display: flex;
    gap: 28px;
}
.section-history-slide-number-paragraph-hero-box {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
}
.section-history-slide-number-paragraph-hero {
    font-family: "sukhumvit-set-semiBold";
    font-size: 36px;
    color: #fff;
    line-height: 1;
}
.section-history-slide-number-paragraph-box {
    display: flex;
    align-items: flex-end;
}
.section-history-slide-arrow {
    position: absolute !important;
    top: unset !important;
    left: unset !important;
    bottom: 102px !important;
    right: 598px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 54px !important;
    height: 54px !important;
    border: 2px solid #DAE2CD !important;
    border-radius: 50% !important;
    padding-right: 16px !important;
    cursor: pointer !important;
}
.section-history-slide-arrow:before {
    content: "" !important;
    background-color: #fff !important;
    height: 3px !important;
    width: 18px !important;
    position: relative !important;
    right: -14px !important;
    transition: all 0.4s ease !important;
}
.section-history-slide-arrow:after {
    font-family: unset !important;
    content: "" !important;
    font-size: unset !important;
    border: solid #fff !important;
    border-width: 0 3px 3px 0 !important;
    display: inline-block !important;
    padding: 6px !important;
    transform: rotate(-45deg) !important;
    transition: all 0.4s ease !important;
}

.section-history-slide-number-paragraph {
    font-family: "sukhumvit-set-light";
    font-size: 16px;
    color: #E0E7D5;
    line-height: 1;
}
/* .section-history-slide-image-slide-1 {
    position: absolute;
}
.section-history-slide-image-slide-1.history-slide-image-slide-1-1 {
    bottom: 0;
    left: 0;
    height: 242px;
}
.section-history-slide-image-slide-1.history-slide-image-slide-1-2 {
    top: 150px;
    right: 0;
    height: 306px;
    z-index: 1;
}
.section-history-slide-image-slide-1.history-slide-image-slide-1-3 {
    top: 0;
    right: 0;
    height: 434px;
    z-index: 0;
} */
.section-pay-attention-every-process-home {
    height: auto;
    justify-content: center;
    padding-top: 94px;
}
.section-pay-attention-every-process-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.section-pay-attention-every-process-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
}
.section-pay-attention-every-process-header-box {
    display: flex;
    text-align: center;
}
.section-pay-attention-every-process-header-2 {
    line-height: 1.5;
}
.section-pay-attention-every-process-paragraph-box {
    display: flex;
    width: 850px;
    text-align: center;
}
.section-pay-attention-every-process-paragraph {
    font-family: "sukhumvit-set-light";
    font-size: 18px;
    color: #464C4F;
    line-height: 1.6;
}
.section-pay-attention-every-process-content-wrapper {
    display: flex;
    width: 1220px;
    gap: 28px;
}
.section-pay-attention-every-process-content-left {
    display: flex;
    flex-direction: column;
    width: 280px;
    gap: 52px;
}
.section-pay-attention-every-process-content-left-header {
    display: flex;
}
.section-pay-attention-every-process-content-left-header-3 {
    font-family: "sukhumvit-set-semiBold";
    font-size: 30px;
    color: #FF2623;
    line-height: 1.5;
}
.section-pay-attention-every-process-content-left-header-3 span {
    font-family: "sukhumvit-set-light";
    font-size: 24px;
}
.section-pay-attention-every-process-content-left-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.section-pay-attention-every-process-content-left-select {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 14px;
    border-bottom: 1px solid #909396;
    cursor: pointer;
}
.section-pay-attention-every-process-content-left-select.active {
    border-bottom: 2px solid #464C4F;
}
.section-pay-attention-every-process-content-left-select-paragraph {
    font-family: "sukhumvit-set-light";
    font-size: 18px;
    color: #909396;
    line-height: 1;
}
.section-pay-attention-every-process-content-left-select.active .section-pay-attention-every-process-content-left-select-paragraph {
    font-family: "sukhumvit-set-semiBold";
    color: #464C4F;
}
.section-pay-attention-every-process-arrow {
    display: none;
}
.section-pay-attention-every-process-content-right-select-container {
    position: absolute;
    top: -186px;
    left: 324px;
    width: auto;
}
.section-pay-attention-every-process-content-right-select-wrapepr {
    display: flex;
    gap: 24px;
    cursor: default;
}
.section-pay-attention-every-process-content-right-select-box {
    display: flex;
    width: 206px;
    height: 360px;
    background-color: #849F59;
    border-radius: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 262px 20px 0;
}
.section-pay-attention-every-process-content-right-select-box.slide-1-1 {
    background-image: url(../images/pay-attention-every-process/Homepage-Mischstall-Paarung-Schweine.png);
}
.section-pay-attention-every-process-content-right-select-box.slide-1-2 {
    background-image: url(../images/pay-attention-every-process/Homepage-Gemischter-Stall-Zuchtbereite-Schweine.png);
}
.section-pay-attention-every-process-content-right-select-box.slide-1-3 {
    background-image: url(../images/pay-attention-every-process/Homepage-Gemischter-Stall-Abgesetzte-Ferkel.png);
}
.section-pay-attention-every-process-content-right-select-box.slide-1-4 {
    background-image: url(../images/pay-attention-every-process/Homepage-Mischstall-Schwangerschaft.png);
}
/* .section-pay-attention-every-process-content-right-select-image {
    width: 100%;
    height: 100%;
}
.section-pay-attention-every-process-content-right-select-image img {
    width: auto;
} */
.section-pay-attention-every-process-content-right-select-paragraph-box {
    display: flex;
}
.section-pay-attention-every-process-content-right-select-paragraph {
    font-family: "sukhumvit-set-light";
    font-size: 16px;
    color: #fff;
    line-height: 1.5;
}
.section-pay-attention-every-process-image-floating {
    position: absolute;
}
.section-pay-attention-every-process-image-floating img {
    width: auto;
}
.section-pay-attention-every-process-image-floating.pay-attention-every-process-image-floating-1 {
    height: 160px;
    left: 0;
    top: 330px;
}
.section-pay-attention-every-process-image-floating.pay-attention-every-process-image-floating-2 {
    height: 172px;
    right: 0;
    top: 250px;
}
.section-secrets-of-deliciousness {
    height: 1000px;
    justify-content: center;
    padding-top: 14px;
}
.section-secrets-of-deliciousness-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.section-secrets-of-deliciousness-header-box {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
    gap: 26px;
}
.section-secrets-of-deliciousness-header {
    display: flex;
    justify-content: center;
}
.section-secrets-of-deliciousness-header-2 {
    width: auto;
}
.section-secrets-of-deliciousness-header-text-box {
    display: flex;
}
.section-secrets-of-deliciousness-header-text {
    font-family: "sukhumvit-set-semiBold";
    font-size: 30px;
    color: #464C4F;
    line-height: 1.4;
    text-align: center;
}
.section-secrets-of-deliciousness-content-wrapper {
    display: flex;
    margin-bottom: 44px;
    gap: 66px;
}
.section-secrets-of-deliciousness-content-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 538px;
    gap: 16px;
}
.section-secrets-of-deliciousness-content-image {
    width: 100%;
    height: 334px;
}.section-secrets-of-deliciousness-content-image img {
    border-radius: 10px;
}
.section-secrets-of-deliciousness-content-detail {
    display: flex;
    flex-direction: column;
}
.section-secrets-of-deliciousness-content-header {
    display: flex;
    margin-bottom: 14px;
}
.section-secrets-of-deliciousness-content-header-3 {
    font-family: "sukhumvit-set-semiBold";
    font-size: 20px;
    color: #464C4F;
    line-height: 1.5;
}
.section-secrets-of-deliciousness-content-text {
    display: flex;
}
.section-secrets-of-deliciousness-content-text-paragraph {
    font-family: "sukhumvit-set-text";
    font-size: 16px;
    color: #464C4F;
    line-height: 1.5;
}
.section-secrets-of-deliciousness-content-bottom {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    gap: 150px;
}
.section-secrets-of-deliciousness-content-date-box {
    display: flex;
}
.section-secrets-of-deliciousness-content-date {
    font-family: "sukhumvit-set-text";
    font-size: 16px;
    color: #464C4F;
    line-height: 1;
}
.section-secrets-of-deliciousness-content-read-more-box {
    display: flex;
}
.section-secrets-of-deliciousness-content-read-more {
    font-family: "sukhumvit-set-semiBold";
    font-size: 16px;
    color: #464C4F;
    line-height: 1;
}
.section-secrets-of-deliciousness-content-arrow {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-secrets-of-deliciousness-content-arrow:before {
    content: "";
    background-color: #000;
    height: 2px;
    width: 13px;
    position: relative;
    right: -9px;
    transition: all 0.4s ease;
}
.section-secrets-of-deliciousness-content-arrow:after {
    content: "";
    border: solid #000;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(-45deg);
    transition: all 0.4s ease;
}
.section-secrets-of-deliciousness-button-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-secrets-of-deliciousness-button {
    display: flex;
    width: 294px;
    height: 58px;
    background-color: #FF2623;
    border-radius: 14px;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}
.section-secrets-of-deliciousness-button:hover {
    background-color: #464C4F;
}
.section-secrets-of-deliciousness-text {
    font-family: "sukhumvit-set-medium";
    font-size: 24px;
    color: #fff;
    line-height: 1;
}
.section-secrets-of-deliciousness-arrow-1 {
    background-color: #fff;
    height: 3px;
    width: 18px;
    position: relative;
    right: -14px;
    transition: all 0.4s ease;
}
.section-secrets-of-deliciousness-button:hover .section-secrets-of-deliciousness-arrow-1 {
    width: 28px;
}
.section-secrets-of-deliciousness-arrow-2 {
    position: relative;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(-45deg);
    transition: all 0.4s ease;
}
.section-secrets-of-deliciousness-image-floating {
    position: absolute;
    top: 50px;
    right: 150px;
    width: 22px;
}
.section-secrets-of-deliciousness-image-floating img {
    width: auto;
}


.section-switch-and-slide-pig-select-mobile-container.show-hide {
    display: none;
}

.section-switch-and-slide-pig-click-text-paragraph.d {
    display: block;
}
.section-switch-and-slide-pig-click-text-paragraph.m {
    display: none;
}

@media screen and (min-width: 1441px) {
    .section-hero {
        height: 56.528vw;
        padding: 3.056vw 0;
    }
    /* .section-hero-white-top {
        top: -2.5vw;
        height: 25.139vw;
    } */
    .section-hero-double-q {
        left: -6.806vw;
        height: 5.139vw;
    }
    .section-hero-double-q.turn-it-over {
        top: 0;
        right: -6.944vw;
    }
    .section-hero-header {
        gap: 1.806vw;
    }
    .section-hero-header-1 {
        font-size: 4.861vw;
    }
    .section-hero-paragraph {
        font-size: 2.222vw;
    }
    /* .section-hero-curve {
        bottom: -4.583vw;
        height: 6.806vw;
    } */
    .section-video {
        /*height: 66vw;*/
        padding-top: 2.778vw;
    }
    .section-video-wrapper {
        gap: 3.472vw;
    }
    .section-video-play-image {
        height: 31.667vw;
    }
    .section-video-content {
        gap: 2.083vw;
    }
    .section-video-content-image {
        height: 17.917vw;
    }
    .section-video-content-text {
        width: 40.278vw;
        gap: 1.389vw;
    }
    .section-video-content-header-2 {
        font-size: 2.222vw;
    }
    .section-video-content-detail-paragraph {
        font-size: 1.25vw;
    }
    .section-video-image-floating.image-floating-1 {
        top: 14.722vw;
        height: 1.25vw;
    }
    .section-video-image-floating.image-floating-2 {
        top: 13.333vw;
        right: 5.139vw;
        height: 14.861vw;
    }
    .section-video-image-floating.image-floating-3 {
        top: 12.5vw;
        height: 7.083vw;
    }
    .section-video-image-floating.image-floating-4 {
        top: 23.611vw;
        left: 4.444vw;
        height: 8.75vw;
    }
    .section-video-image-floating.image-floating-5 {
        top: 27.083vw;
        right: 6.25vw;
        height: 1.389vw;
    }
    .section-video-image-floating.image-floating-6 {
        top: 39.028vw;
        left: 11.389vw;
        height: 1.111vw;
    }
    .section-video-image-floating.image-floating-7 {
        top: 42.361vw;
        left: 6.944vw;
        height: 1.25vw;
    }
    .section-brand-animation {
        height: 7.5vw;
    }
    .section-brand-animation-wrapper {
        gap: 6.944vw;
    }
    .section-brand-animation-image {
        height: 4.167vw;
    }
    .section-our-products {
        height: 159.72vw;
        padding-top: 4.444vw;
    }
    .section-our-products-header-box {
        gap: 1.944vw;
        margin-bottom: 1.944vw;
    }
    .section-our-products-paragraph {
        font-size: 2.083vw;
    }
    .section-our-products-service-wrapper {
        gap: 2.917vw;
        margin-bottom: 3.194vw;
    }
    .section-our-products-service-box {
        gap: 1.528vw;
        width: 20.833vw;
    }
    .section-our-products-service-image {
        height: 5vw;
    }
    .section-our-products-service-text-box {
        gap: 0.694vw;
    }
    .section-our-products-service-text-header {
        font-size: 1.25vw;
    }
    .section-our-products-service-text-paragraph {
        font-size: 1.111vw;
    }
    .section-our-products-certified-standards {
        margin-bottom: 4.583vw;
    }
    .section-our-products-certified-standards:before {
        left: 14.236vw;
        width: 27.222vw;
        height: 0.069vw;
    }
    .section-our-products-certified-standards:after {
        right: 14.236vw;
        width: 27.222vw;
        height: 0.069vw;
    }
    .section-our-products-certified-standards-paragraph {
        font-size: 1.25vw;
    }
    .section-our-products-certified-standards-image-wrapper {
        gap: 1.944vw;
        margin-bottom: 4.444vw;
    }
    .section-our-products-certified-standards-image {
        height: 6.944vw;
    }
    .section-our-products-product-box {
        flex: 1 1 calc(33.333vw - 0.694vw);
        height: 45.833vw;
        padding: 3.472vw 0 0;
    }
    .section-our-products-product-box:nth-of-type(3),
    .section-our-products-product-box:nth-of-type(5),
    .section-our-products-product-box:nth-of-type(6) {
        background-size: 100% 10.764vw;
    }
    .section-our-products-product-box:nth-of-type(1),
    .section-our-products-product-box:nth-of-type(2),
    .section-our-products-product-box:nth-of-type(3) {
        margin-bottom: 1.667vw;
    }
    .section-our-products-product-header-wrapper {
        width: 22.222vw;
        margin-left: 2.778vw;
        gap: 1.25vw;
    }
    .section-our-products-product-header-3 {
        font-size: 2.222vw;
    }
    .section-our-products-product-paragraph {
        font-size: 1.111vw;
    }
    .section-our-products-product-image {
        height: 26.528vw;
    }
    .section-our-products-product-box:nth-of-type(3) .section-our-products-product-image {
        height: 27.222vw;
        bottom: 0.694vw;
        right: 0;
    }
    .section-our-products-product-box:nth-of-type(5) .section-our-products-product-image {
        height: 26.528vw;
    }
    .section-our-products-product-box:nth-of-type(4) .section-our-products-product-image,
    .section-our-products-product-box:nth-of-type(6) .section-our-products-product-image {
        height: 22.361vw;
        bottom: 2.778vw;
    }
    .section-our-products-product-arrow {
        bottom: -0.833vw;
        right: -0.833vw;
        width: 5.833vw;
        height: 5.833vw;
    }
    .section-our-products-product-arrow-1 {
        border-width: 0px 0.208vw 0.208vw 0;
        padding: 0.417vw;
    }
    .section-our-products-product-arrow-2 {
        left: 2.882vw;
        top: 2.361vw;
        width: 0.208vw;
        height: 1.25vw;
    }
    .section-our-products-product-box:hover .section-our-products-product-arrow-2 {
        left: 3.056vw;
        top: 2.222vw;
        height: 1.806vw;
    }
    .section-our-products-image-floating.our-products-image-floating-1 {
        top: 23.611vw;
        left: 2.083vw;
        height: 1.528vw;
    }
    .section-our-products-image-floating.our-products-image-floating-2 {
        height: 1.667vw;
        right: 2.361vw;
        top: 26.528vw;
    }
    .section-our-products-image-floating.our-products-image-floating-3 {
        height: 10vw;
        right: 0;
        top: 11.111vw;
    }
    .section-our-products-image-floating.our-products-image-floating-4 {
        height: 9.028vw;
        left: 3.472vw;
        top: 25.694vw;
    }
    .view-more-products-button-wrapper {
        margin-top: 2.917vw;
    }
    .view-more-products-button {
        width: 20.417vw;
        height: 4.028vw;
        border-radius: 0.972vw;
    }
    .view-more-products-text {
        font-size: 1.667vw;
    }
    .view-more-products-arrow-1 {
        height: 0.208vw;
        width: 1.25vw;
        right: -0.972vw;
    }
    .view-more-products-button:hover .view-more-products-arrow-1 {
        width: 1.944vw;
    }
    .view-more-products-arrow-2 {
        border-width: 0 0.208vw 0.208vw 0;
        padding: 0.417vw;
    }
    .section-smile-making-menu {
        height: 25.694vw;
        padding-top: 6.25vw;
    }
    .section-smile-making-menu-wrapper {
        gap: 1.389vw;
    }
    .section-smile-making-menu-text {
        font-size: 2.083vw;
    }
    .section-smile-making-menu-paragraph-box {
        width: 59.028vw;
    }
    .section-smile-making-menu-paragraph {
        font-size: 1.25vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-1 {
        height: 9.722vw;
        top: -0.833vw;
        left: 2.083vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-2 {
        height: 9.444vw;
        top: 11.806vw;
        left: 7.639vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-3 {
        height: 9.722vw;
        bottom: 3.472vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-4 {
        height: 1.667vw;
        right: 3.611vw;
        top: 3.333vw;
    }
    .section-switch-and-slide {
        height: 45.694vw;
    }
    .section-switch-and-slide-product {
        width: 50vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-1 {
        height: 5vw;
        top: 4.167vw;
        left: 3.472vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-2 {
        height: 9.722vw;
        top: 0.139vw;
        left: 6.25vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-3 {
        height: 18.889vw;
        top: -6.667vw;
        left: 31.528vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-4 {
        height: 45.833vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-5 {
        height: 25vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-6 {
        height: 15.833vw;
        bottom: -4.861vw;
        left: 36.111vw;
    }
    .section-switch-and-slide-pig {
        width: 50vw;
        padding: 3.056vw 0 0 6.25vw;
    }
    .section-switch-and-slide-pig-image {
        height: 17.917vw;
    }
    .section-switch-and-slide-pig-click {
        gap: 0.556vw;
        margin-bottom: 3.056vw;
        padding-left: 12.5vw;
    }
    .section-switch-and-slide-pig-click:before {
        width: 33.056vw;
        height: 0.069vw;
        bottom: -1.389vw;
    }
    .section-switch-and-slide-pig-click-image {
        border: 0.069vw solid #fff;
        width: 3.75vw;
        height: 3.75vw;
    }
    .section-switch-and-slide-pig-click-image img {
        height: 2.083vw;
    }
    .section-switch-and-slide-pig-click-text-paragraph {
        font-size: 1.25vw;
    }
    .section-switch-and-slide-pig-content {
        width: 36.806vw;
    }
    .section-switch-and-slide-pig-content-header {
        margin-bottom: 1.25vw;
    }
    .section-switch-and-slide-pig-content-header-3 {
        font-size: 2.083vw;
    }
    .section-switch-and-slide-pig-content-detail {
        margin-bottom: 1.806vw;
    }
    .section-switch-and-slide-pig-content-paragraph {
        font-size: 1.25vw;
    }
    .section-switch-and-slide-pig-content-bottom {
        gap: 0.694vw;
    }
    .section-switch-and-slide-pig-content-bottom-image {
        width: 3.472vw;
        height: 3.472vw;
    }
    .section-switch-and-slide-pig-content-bottom img {
        height: 1.528vw;
    }
    .section-switch-and-slide-pig-content-bottom-wrapper {
        gap: 0.556vw;
    }
    .section-switch-and-slide-pig-content-bottom-header-paragraph {
        font-size: 1.111vw;
    }
    .section-switch-and-slide-pig-content-bottom-paragraph {
        font-size: 1.111vw;
    }
    .section-beginning-smile {
        height: 35.139vw;
        padding-top: 6.667vw;
    }
    .section-beginning-smile-wrapper {
        gap: 1.667vw;
    }
    .section-beginning-smile-text {
        font-size: 2.083vw;
    }
    .section-beginning-smile-paragraph-box {
        width: 59.028vw;
    }
    .section-beginning-smile-paragraph {
        font-size: 1.25vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-1 {
        height: 9.722vw;
        top: 14.583vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-2 {
        height: 1.25vw;
        right: 3.472vw;
        bottom: 12.5vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-3 {
        height: 13.194vw;
        bottom: -2.083vw;
        right: 3.472vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-4 {
        height: 1.389vw;
        left: 9.028vw;
        bottom: 5.278vw;
    }
    .section-history-slide {
        height: 41.528vw;
    }
    .section-history-slide-box {
        width: 100vw;
        padding: 5.556vw 0 0 9.028vw;
    }
    .section-history-slide-box:before {
        bottom: 4.861vw;
        height: 0.208vw;
    }
    .section-history-slide-box:after {
        bottom: 3.194vw;
        width: 0.208vw;
        height: 3.472vw;
    }
    .section-history-slide-header {
        margin-bottom: 14.444vw;
    }
    .section-history-slide-header-title {
        margin-bottom: 1.528vw;
    }
    .section-history-slide-header-title-text {
        font-size: 1.667vw;
    }
    .section-history-slide-detail {
        margin-bottom: 2.083vw;
    }
    .section-history-slide-detail-text {
        font-size: 2.778vw;
    }
    .section-history-slide-address-text {
        font-size: 1.667vw;
    }
    .section-history-slide-number-wrapper {
        padding-right: 11.389vw;
    }
    .section-history-slide-number {
        gap: 1.944vw;
    }
    .section-history-slide-number-paragraph-hero-box {
        bottom: 7.639vw;
    }
    .section-history-slide-number-paragraph-hero {
        font-size: 2.5vw;
    }
    .section-history-slide-arrow {
        bottom: 7.083vw;
        right: 41.528vw;
        width: 3.75vw;
        height: 3.75vw;
        border: 0.139vw solid #DAE2CD;
        padding-right: 1.111vw;
    }
    .section-history-slide-arrow:before {
        height: 0.208vw;
        width: 1.25vw;
        right: -0.972vw;
    }
    .section-history-slide-arrow:after {
        border-width: 0 0.208vw 0.208vw 0;
        padding: 0.417vw;
    }
    .section-history-slide-number-paragraph {
        font-size: 1.111vw;
    }
    /* .section-history-slide-image-slide-1.history-slide-image-slide-1-1 {
        height: 16.806vw;
    }
    .section-history-slide-image-slide-1.history-slide-image-slide-1-2 {
        top: 10.417vw;
        height: 21.25vw;
    }
    .section-history-slide-image-slide-1.history-slide-image-slide-1-3 {
        height: 30.139vw;
    } */
    .section-pay-attention-every-process {
        height: 61.806vw;
        padding-top: 6.528vw;
    }
    .section-pay-attention-every-process-wrapper {
        gap: 3.472vw;
    }
    .section-pay-attention-every-process-header {
        gap: 0.833vw;
    }
    .section-pay-attention-every-process-paragraph-box {
        width: 59.028vw;
    }
    .section-pay-attention-every-process-paragraph {
        font-size: 1.25vw;
    }
    .section-pay-attention-every-process-content-wrapper {
        gap: 1.944vw;
        width: 84.722vw;
    }
    .section-pay-attention-every-process-content-left {
        width: 19.444vw;
        gap: 3.611vw;
    }
    .section-pay-attention-every-process-content-left-header-3 {
        font-size: 2.083vw;
    }
    .section-pay-attention-every-process-content-left-header-3 span {
        font-size: 1.667vw;
    }
    .section-pay-attention-every-process-content-left-select-wrapper {
        gap: 2.5vw;
    }
    .section-pay-attention-every-process-content-left-select {
        padding-bottom: 0.972vw;
        border-bottom: 0.069vw solid #909396;
    }
    .section-pay-attention-every-process-content-left-select.active {
        border-bottom: 0.139vw solid #464C4F;
    }
    .section-pay-attention-every-process-content-left-select-paragraph {
        font-size: 1.25vw;
    }
    .section-pay-attention-every-process-content-right-select-container {
        top: -12.917vw;
        left: 22.5vw;
    }
    .section-pay-attention-every-process-content-right-select-wrapepr {
        gap: 1.667vw;
    }
    .section-pay-attention-every-process-content-right-select-box {
        width: 14.306vw;
        height: 25vw;
        border-radius: 1.111vw;
        padding: 18.194vw 1.389vw 0;
    }
    /* .section-pay-attention-every-process-content-right-select-image {
        height: 15.417vw;
    } */
    .section-pay-attention-every-process-content-right-select-paragraph {
        font-size: 1.111vw;
    }
    .section-pay-attention-every-process-image-floating.pay-attention-every-process-image-floating-1 {
        height: 11.111vw;
        top: 22.917vw;
    }
    .section-pay-attention-every-process-image-floating.pay-attention-every-process-image-floating-2 {
        height: 11.944vw;
        top: 17.361vw;
    }
    .section-secrets-of-deliciousness {
        height: 69.444vw;
        padding-top: 0.972vw;
    }
    .section-secrets-of-deliciousness-header-box {
        margin-bottom: 4.167vw;
        gap: 1.806vw;
    }
    .section-secrets-of-deliciousness-header-text {
        font-size: 2.083vw;
    }
    .section-secrets-of-deliciousness-content-wrapper {
        margin-bottom: 3.056vw;
        gap: 4.583vw;
    }
    .section-secrets-of-deliciousness-content-box {
        width: 25vw;
        height: 37.361vw;
        gap: 1.111vw;
    }
    .section-secrets-of-deliciousness-content-image {
        height: 23.194vw;
    }
    .section-secrets-of-deliciousness-content-image img {
        border-radius: 0.694vw;
    }
    .section-secrets-of-deliciousness-content-header {
        margin-bottom: 0.972vw;
    }
    .section-secrets-of-deliciousness-content-header-3 {
        font-size: 1.389vw;
    }
    .section-secrets-of-deliciousness-content-text-paragraph {
        font-size: 1.111vw;
    }
    .section-secrets-of-deliciousness-content-bottom {
        gap: 10.417vw;
    }
    .section-secrets-of-deliciousness-content-date {
        font-size: 1.111vw;
    }
    .section-secrets-of-deliciousness-content-read-more {
        font-size: 1.111vw;
    }
    .section-secrets-of-deliciousness-content-arrow:before {
        height: 0.139vw;
        width: 0.903vw;
        right: -0.625vw;
    }
    .section-secrets-of-deliciousness-content-arrow:after {
        border-width: 0 0.139vw 0.139vw 0;
        padding: 0.278vw;
    }
    .section-secrets-of-deliciousness-button {
        width: 20.417vw;
        height: 4.028vw;
        border-radius: 0.972vw;
    }
    .section-secrets-of-deliciousness-text {
        font-size: 1.667vw;
    }
    .section-secrets-of-deliciousness-arrow-1 {
        height: 0.208vw;
        width: 1.25vw;
        right: -0.972vw;
    }
    .section-secrets-of-deliciousness-button:hover .section-secrets-of-deliciousness-arrow-1 {
        width: 1.944vw;
    }
    .section-secrets-of-deliciousness-arrow-2 {
        border-width: 0 0.208vw 0.208vw 0;
        padding: 0.417vw;
    }
    .section-secrets-of-deliciousness-image-floating {
        top: 3.472vw;
        right: 10.417vw;
        width: 1.528vw;
    }
}

@media screen and (max-width: 1439px) {
    .section-hero {
        height: 56.528vw;
        padding: 3.056vw 0;
    }
    /* .section-hero-white-top {
        top: -2.5vw;
        height: 25.139vw;
    } */
    .section-hero-double-q {
        left: -6.806vw;
        height: 5.139vw;
    }
    .section-hero-double-q.turn-it-over {
        top: 9.306vw;
        right: -6.944vw;
    }
    .section-hero-header {
        gap: 1.806vw;
    }
    .section-hero-header-1 {
        font-size: 4.861vw;
    }
    .section-hero-paragraph {
        font-size: 2.222vw;
    }
    /* .section-hero-curve {
        bottom: -4.583vw;
        height: 6.806vw;
    } */
    .section-video {
        /*height: 90.333vw;*/
        padding-top: 2.778vw;
    }
    .section-video-wrapper {
        gap: 3.472vw;
    }
    .section-video-play-image {
        height: 31.667vw;
    }
    .section-video-content {
        gap: 2.083vw;
    }
    .section-video-content-image {
        height: 17.917vw;
    }
    .section-video-content-text {
        width: 40.278vw;
        gap: 1.389vw;
    }
    .section-video-content-header-2 {
        font-size: 2.222vw;
    }
    .section-video-content-detail-paragraph {
        font-size: 1.25vw;
    }
    .section-video-image-floating.image-floating-1 {
        top: 14.722vw;
        height: 1.25vw;
    }
    .section-video-image-floating.image-floating-2 {
        top: 13.333vw;
        right: 5.139vw;
        height: 14.861vw;
    }
    .section-video-image-floating.image-floating-3 {
        top: 12.5vw;
        height: 7.083vw;
    }
    .section-video-image-floating.image-floating-4 {
        top: 23.611vw;
        left: 4.444vw;
        height: 8.75vw;
    }
    .section-video-image-floating.image-floating-5 {
        top: 27.083vw;
        right: 6.25vw;
        height: 1.389vw;
    }
    .section-video-image-floating.image-floating-6 {
        top: 39.028vw;
        left: 11.389vw;
        height: 1.111vw;
    }
    .section-video-image-floating.image-floating-7 {
        top: 42.361vw;
        left: 6.944vw;
        height: 1.25vw;
    }
    .section-brand-animation {
        height: 7.5vw;
    }
    .section-brand-animation-wrapper {
        gap: 6.944vw;
    }
    .section-brand-animation-image {
        height: 4.167vw;
    }
    .section-our-products {
        height: 138.611vw;
        padding-top: 4.444vw;
    }
    .section-our-products-header-box {
        gap: 1.944vw;
        margin-bottom: 1.944vw;
    }
    .section-our-products-paragraph {
        font-size: 2.083vw;
    }
    .section-our-products-service-wrapper {
        gap: 2.917vw;
        margin-bottom: 3.194vw;
    }
    .section-our-products-service-box {
        gap: 1.528vw;
        width: 20.833vw;
    }
    .section-our-products-service-image {
        height: 5vw;
    }
    .section-our-products-service-text-box {
        gap: 0.694vw;
    }
    .section-our-products-service-text-header {
        font-size: 1.25vw;
    }
    .section-our-products-service-text-paragraph {
        font-size: 1.111vw;
    }
    .section-our-products-certified-standards {
        margin-bottom: 4.583vw;
    }
    .section-our-products-certified-standards:before {
        left: 14.236vw;
        width: 27.222vw;
        height: 0.069vw;
    }
    .section-our-products-certified-standards:after {
        right: 14.236vw;
        width: 27.222vw;
        height: 0.069vw;
    }
    .section-our-products-certified-standards-paragraph {
        font-size: 1.25vw;
    }
    .section-our-products-certified-standards-image-wrapper {
        gap: 1.944vw;
        margin-bottom: 4.444vw;
    }
    .section-our-products-certified-standards-image {
        height: 6.944vw;
    }
    .section-our-products-product-box {
        flex: 1 1 calc(33.333vw - 0.694vw);
        height: 45.833vw;
        padding: 3.472vw 0 0;
    }
    .section-our-products-product-box:nth-of-type(3),
    .section-our-products-product-box:nth-of-type(5),
    .section-our-products-product-box:nth-of-type(6) {
        background-size: 100% 10.764vw;
    }
    .section-our-products-product-box:nth-of-type(1),
    .section-our-products-product-box:nth-of-type(2),
    .section-our-products-product-box:nth-of-type(3) {
        margin-bottom: 1.667vw;
    }
    .section-our-products-product-header-wrapper {
        width: 22.222vw;
        margin-left: 2.778vw;
        gap: 1.25vw;
    }
    .section-our-products-product-header-3 {
        font-size: 2.222vw;
    }
    .section-our-products-product-paragraph {
        font-size: 1.111vw;
    }
    .section-our-products-product-image {
        height: 26.528vw;
    }
    .section-our-products-product-box:nth-of-type(3) .section-our-products-product-image {
        height: 27.222vw;
        bottom: 0.694vw;
        right: 0;
    }
    .section-our-products-product-box:nth-of-type(5) .section-our-products-product-image {
        height: 26.528vw;
    }
    .section-our-products-product-box:nth-of-type(4) .section-our-products-product-image,
    .section-our-products-product-box:nth-of-type(6) .section-our-products-product-image {
        height: 22.361vw;
        bottom: 2.778vw;
    }
    .section-our-products-product-arrow {
        bottom: -0.833vw;
        right: -0.833vw;
        width: 5.833vw;
        height: 5.833vw;
    }
    .section-our-products-product-arrow-1 {
        border-width: 0px 0.208vw 0.208vw 0;
        padding: 0.417vw;
    }
    .section-our-products-product-arrow-2 {
        left: 2.882vw;
        top: 2.361vw;
        width: 0.208vw;
        height: 1.25vw;
    }
    .section-our-products-product-box:hover .section-our-products-product-arrow-2 {
        left: 3.056vw;
        top: 2.222vw;
        height: 1.806vw;
    }
    .section-our-products-image-floating.our-products-image-floating-1 {
        top: 23.611vw;
        left: 2.083vw;
        height: 1.528vw;
    }
    .section-our-products-image-floating.our-products-image-floating-2 {
        height: 1.667vw;
        right: 2.361vw;
        top: 26.528vw;
    }
    .section-our-products-image-floating.our-products-image-floating-3 {
        height: 10vw;
        right: 0;
        top: 11.111vw;
    }
    .section-our-products-image-floating.our-products-image-floating-4 {
        height: 9.028vw;
        left: 3.472vw;
        top: 25.694vw;
    }
    .view-more-products-button-wrapper {
        margin-top: 2.917vw;
    }
    .view-more-products-button {
        width: 20.417vw;
        height: 4.028vw;
        border-radius: 0.972vw;
    }
    .view-more-products-text {
        font-size: 1.667vw;
    }
    .view-more-products-arrow-1 {
        height: 0.208vw;
        width: 1.25vw;
        right: -0.972vw;
    }
    .view-more-products-button:hover .view-more-products-arrow-1 {
        width: 1.944vw;
    }
    .view-more-products-arrow-2 {
        border-width: 0 0.208vw 0.208vw 0;
        padding: 0.417vw;
    }
    .section-smile-making-menu {
        height: 25.694vw;
        padding-top: 6.25vw;
    }
    .section-smile-making-menu-wrapper {
        gap: 1.389vw;
    }
    .section-smile-making-menu-text {
        font-size: 2.083vw;
    }
    .section-smile-making-menu-paragraph-box {
        width: 59.028vw;
    }
    .section-smile-making-menu-paragraph {
        font-size: 1.25vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-1 {
        height: 9.722vw;
        top: -0.833vw;
        left: 2.083vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-2 {
        height: 9.444vw;
        top: 11.806vw;
        left: 7.639vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-3 {
        height: 9.722vw;
        bottom: 3.472vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-4 {
        height: 1.667vw;
        right: 3.611vw;
        top: 3.333vw;
    }
    .section-switch-and-slide {
        height: 45.694vw;
    }
    .section-switch-and-slide-product {
        width: 50vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-1 {
        height: 5vw;
        top: 4.167vw;
        left: 3.472vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-2 {
        height: 9.722vw;
        top: 0.139vw;
        left: 6.25vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-3 {
        height: 18.889vw;
        top: -6.667vw;
        left: 31.528vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-4 {
        height: 45.833vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-5 {
        height: 25vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-6 {
        height: 15.833vw;
        bottom: -4.861vw;
        left: 36.111vw;
    }
    .section-switch-and-slide-pig {
        width: 50vw;
        padding: 3.056vw 0 0 6.25vw;
    }
    .section-switch-and-slide-pig-image {
        height: 17.917vw;
    }
    .section-switch-and-slide-pig-click {
        gap: 0.556vw;
        margin-bottom: 3.056vw;
        padding-left: 12.5vw;
    }
    .section-switch-and-slide-pig-click:before {
        width: 33.056vw;
        height: 0.069vw;
        bottom: -1.389vw;
    }
    .section-switch-and-slide-pig-click-image {
        border: 0.069vw solid #fff;
        width: 3.75vw;
        height: 3.75vw;
    }
    .section-switch-and-slide-pig-click-image img {
        height: 2.083vw;
    }
    .section-switch-and-slide-pig-click-text-paragraph {
        font-size: 1.25vw;
    }
    .section-switch-and-slide-pig-content {
        width: 36.806vw;
    }
    .section-switch-and-slide-pig-content-header {
        margin-bottom: 1.25vw;
    }
    .section-switch-and-slide-pig-content-header-3 {
        font-size: 2.083vw;
    }
    .section-switch-and-slide-pig-content-detail {
        margin-bottom: 1.806vw;
    }
    .section-switch-and-slide-pig-content-paragraph {
        font-size: 1.25vw;
    }
    .section-switch-and-slide-pig-content-bottom {
        gap: 0.694vw;
    }
    .section-switch-and-slide-pig-content-bottom-image {
        width: 3.472vw;
        height: 3.472vw;
    }
    .section-switch-and-slide-pig-content-bottom img {
        height: 1.528vw;
    }
    .section-switch-and-slide-pig-content-bottom-wrapper {
        gap: 0.556vw;
    }
    .section-switch-and-slide-pig-content-bottom-header-paragraph {
        font-size: 1.111vw;
    }
    .section-switch-and-slide-pig-content-bottom-paragraph {
        font-size: 1.111vw;
    }
    .section-beginning-smile {
        height: 35.139vw;
        padding-top: 6.667vw;
    }
    .section-beginning-smile-wrapper {
        gap: 1.667vw;
    }
    .section-beginning-smile-text {
        font-size: 2.083vw;
    }
    .section-beginning-smile-paragraph-box {
        width: 59.028vw;
    }
    .section-beginning-smile-paragraph {
        font-size: 1.25vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-1 {
        height: 9.722vw;
        top: 14.583vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-2 {
        height: 1.25vw;
        right: 3.472vw;
        bottom: 12.5vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-3 {
        height: 13.194vw;
        bottom: -2.083vw;
        right: 3.472vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-4 {
        height: 1.389vw;
        left: 9.028vw;
        bottom: 5.278vw;
    }
    .section-history-slide {
        height: 41.528vw;
    }
    .section-history-slide-box {
        width: 100vw;
        padding: 5.556vw 0 0 9.028vw;
    }
    .section-history-slide-box:before {
        bottom: 4.861vw;
        height: 0.208vw;
    }
    .section-history-slide-box:after {
        bottom: 3.194vw;
        width: 0.208vw;
        height: 3.472vw;
    }
    .section-history-slide-header {
        margin-bottom: 14.444vw;
    }
    .section-history-slide-header-title {
        margin-bottom: 1.528vw;
    }
    .section-history-slide-header-title-text {
        font-size: 1.667vw;
    }
    .section-history-slide-detail {
        margin-bottom: 2.083vw;
    }
    .section-history-slide-detail-text {
        font-size: 2.778vw;
    }
    .section-history-slide-address-text {
        font-size: 1.667vw;
    }
    .section-history-slide-number-wrapper {
        padding-right: 11.389vw;
    }
    .section-history-slide-number {
        gap: 1.944vw;
    }
    .section-history-slide-number-paragraph-hero-box {
        bottom: 7.639vw;
    }
    .section-history-slide-number-paragraph-hero {
        font-size: 2.5vw;
    }
    .section-history-slide-arrow {
        bottom: 7.083vw;
        right: 41.528vw;
        width: 3.75vw;
        height: 3.75vw;
        border: 0.139vw solid #DAE2CD;
        padding-right: 1.111vw;
    }
    .section-history-slide-arrow:before {
        height: 0.208vw;
        width: 1.25vw;
        right: -0.972vw;
    }
    .section-history-slide-arrow:after {
        border-width: 0 0.208vw 0.208vw 0;
        padding: 0.417vw;
    }
    .section-history-slide-number-paragraph {
        font-size: 1.111vw;
    }
    /* .section-history-slide-image-slide-1.history-slide-image-slide-1-1 {
        height: 16.806vw;
    }
    .section-history-slide-image-slide-1.history-slide-image-slide-1-2 {
        top: 10.417vw;
        height: 21.25vw;
    }
    .section-history-slide-image-slide-1.history-slide-image-slide-1-3 {
        height: 30.139vw;
    } */
    .section-pay-attention-every-process {
        height: 61.806vw;
        padding-top: 6.528vw;
    }
    .section-pay-attention-every-process-wrapper {
        gap: 3.472vw;
    }
    .section-pay-attention-every-process-header {
        gap: 0.833vw;
    }
    .section-pay-attention-every-process-paragraph-box {
        width: 59.028vw;
    }
    .section-pay-attention-every-process-paragraph {
        font-size: 1.25vw;
    }
    .section-pay-attention-every-process-content-wrapper {
        gap: 1.944vw;
        width: 84.722vw;
    }
    .section-pay-attention-every-process-content-left {
        width: 19.444vw;
        gap: 3.611vw;
    }
    .section-pay-attention-every-process-content-left-header-3 {
        font-size: 2.083vw;
    }
    .section-pay-attention-every-process-content-left-header-3 span {
        font-size: 1.667vw;
    }
    .section-pay-attention-every-process-content-left-select-wrapper {
        gap: 2.5vw;
    }
    .section-pay-attention-every-process-content-left-select {
        padding-bottom: 0.972vw;
        border-bottom: 0.069vw solid #909396;
    }
    .section-pay-attention-every-process-content-left-select.active {
        border-bottom: 0.139vw solid #464C4F;
    }
    .section-pay-attention-every-process-content-left-select-paragraph {
        font-size: 1.25vw;
    }
    .section-pay-attention-every-process-content-right-select-container {
        top: -12.917vw;
        left: 22.5vw;
    }
    .section-pay-attention-every-process-content-right-select-wrapepr {
        gap: 1.667vw;
    }
    .section-pay-attention-every-process-content-right-select-box {
        width: 14.306vw;
        height: 25vw;
        border-radius: 1.111vw;
        padding: 18.194vw 1.389vw 0;
    }
    /* .section-pay-attention-every-process-content-right-select-image {
        height: 15.417vw;
    } */
    .section-pay-attention-every-process-content-right-select-paragraph {
        font-size: 1.111vw;
    }
    .section-pay-attention-every-process-image-floating.pay-attention-every-process-image-floating-1 {
        height: 11.111vw;
        top: 22.917vw;
    }
    .section-pay-attention-every-process-image-floating.pay-attention-every-process-image-floating-2 {
        height: 11.944vw;
        top: 17.361vw;
    }
    .section-secrets-of-deliciousness {
        height: 69.444vw;
        padding-top: 0.972vw;
    }
    .section-secrets-of-deliciousness-header-box {
        margin-bottom: 4.167vw;
        gap: 1.806vw;
    }
    .section-secrets-of-deliciousness-header-text {
        font-size: 2.083vw;
    }
    .section-secrets-of-deliciousness-content-wrapper {
        margin-bottom: 3.056vw;
        gap: 4.583vw;
    }
    .section-secrets-of-deliciousness-content-box {
        width: 25vw;
        height: 37.361vw;
        gap: 1.111vw;
    }
    .section-secrets-of-deliciousness-content-image {
        height: 23.194vw;
    }
    .section-secrets-of-deliciousness-content-image img {
        border-radius: 0.694vw;
    }
    .section-secrets-of-deliciousness-content-header {
        margin-bottom: 0.972vw;
    }
    .section-secrets-of-deliciousness-content-header-3 {
        font-size: 1.389vw;
    }
    .section-secrets-of-deliciousness-content-text-paragraph {
        font-size: 1.111vw;
    }
    .section-secrets-of-deliciousness-content-bottom {
        gap: 10.417vw;
    }
    .section-secrets-of-deliciousness-content-date {
        font-size: 1.111vw;
    }
    .section-secrets-of-deliciousness-content-read-more {
        font-size: 1.111vw;
    }
    .section-secrets-of-deliciousness-content-arrow:before {
        height: 0.139vw;
        width: 0.903vw;
        right: -0.625vw;
    }
    .section-secrets-of-deliciousness-content-arrow:after {
        border-width: 0 0.139vw 0.139vw 0;
        padding: 0.278vw;
    }
    .section-secrets-of-deliciousness-button {
        width: 20.417vw;
        height: 4.028vw;
        border-radius: 0.972vw;
    }
    .section-secrets-of-deliciousness-text {
        font-size: 1.667vw;
    }
    .section-secrets-of-deliciousness-arrow-1 {
        height: 0.208vw;
        width: 1.25vw;
        right: -0.972vw;
    }
    .section-secrets-of-deliciousness-button:hover .section-secrets-of-deliciousness-arrow-1 {
        width: 1.944vw;
    }
    .section-secrets-of-deliciousness-arrow-2 {
        border-width: 0 0.208vw 0.208vw 0;
        padding: 0.417vw;
    }
    .section-secrets-of-deliciousness-image-floating {
        top: 3.472vw;
        right: 10.417vw;
        width: 1.528vw;
    }
}

@media screen and (max-width: 1024px) {
    .section-hero {
        background-image: url(../images/home/background-hero.jpg);
        height: 125.581vw;
        /*padding: 8.372vw 0 0;*/
        /*background-size: 100% 75.814vw;*/
        justify-content: center;
    }
    .section-hero-white-top {
        top: 0;
        height: 70.139vw;
    }
    .section-hero-double-q {
        display: none;
    }
    .section-hero-double-q.turn-it-over {
        top: 9.306vw;
        right: -6.944vw;
    }
    .section-hero-header {
        gap: 4.186vw;
    }
    .section-hero-header-1 {
        font-size: 7.233vw;
        text-align: center;
    }
    .section-hero-paragraph {
        font-size: 4.651vw;
        color: #000;
    }
    .section-hero-curve {
        bottom: -0.093vw;
        height: 6.806vw;
    }
    .section-video {
       height: 230vw;
        padding-top: 4vw;
        overflow: visible;
    }
    .section-video-wrapper {
        gap: 9.302vw;
		height: fit-content;
    }
    .section-video-play-image {
        height: 45.116vw;
    }
    .section-video-content {
        gap: 4.186vw;
        flex-direction: column;
    }
    .section-video-content-image {
        height: 38.372vw;
        z-index: 2;
    }
    .section-video-content-text {
        width: 100%;
        gap: 4.186vw;
        padding: 0 4 6.977vw;
        text-align: center;
    }
    .section-video-content-header {
        justify-content: center;
    }
    .section-video-content-header-2 {
        font-size: 5.116vw;
    }
    .section-video-content-detail-paragraph {
        font-family: "sukhumvit-set-thin";
        font-size: 3.721vw;
    }
    .section-video-image-floating.image-floating-1 {
        top: 60.333vw;
        height: 18.861vw;
    }
    .section-video-image-floating.image-floating-2 {
        top: 60.333vw;
        right: 5.139vw;
        height: 18.861vw;
    }
    .section-video-image-floating.image-floating-3 {
        top: -11.163vw;
        right: 9.302vw;
        height: 12.326vw;
        z-index: 2;
    }
    .section-video-image-floating.image-floating-4 {
        top: 85.611vw;
        left: 3.444vw;
        height: 19.302vw;
    }
    .section-video-image-floating.image-floating-5 {
        top: 27.083vw;
        right: 6.25vw;
        height: 1.389vw;
    }
    .section-video-image-floating.image-floating-6 {
        top: 39.028vw;
        left: 11.389vw;
        height: 1.111vw;
    }
    .section-video-image-floating.image-floating-7 {
        top: 42.361vw;
        left: 6.944vw;
        height: 1.25vw;
    }
    .section-brand-animation {
        /*height: 15.814vw;*/
        height: 25.814vw;
    }
    .section-brand-animation-wrapper {
        gap: 1vw;
    }
    .section-brand-animation-image {
        height: 6.977vw;
    }
    .section-our-products {
        height: fit-content;
        padding-top: 10vw;
    }
    .section-our-products-header-box {
        gap: 4.651vw;
        margin-bottom: 10.233vw;
    }
    .section-our-products-header-2 {
        width: 84vw;
    }
    .section-our-products-paragraph {
        font-size: 4.651vw;
        line-height: 1.5;
        width: 84vw;
    }
    .section-our-products-service-wrapper {
        position: absolute;
        flex-wrap: wrap;
        top: 216vw;
        gap: 10vw;
        margin-bottom: 3.194vw;
    }
    .section-our-products-service-box {
        flex-direction: column;
        align-items: center;
        gap: 2vw;
        width: 34.488vw;
        text-align: center;
    }
    .section-our-products-service-box:nth-of-type(3) {
        width: 50vw;
    }
    .section-our-products-service-image {
        height: 16.744vw;
    }
    .section-our-products-service-text-box {
        gap: 2vw;
    }
    .section-our-products-service-text-header-box {
        justify-content: center;
    }
    .section-our-products-service-text-header {
        font-size: 4.186vw;
        line-height: 1.4;
    }
    .section-our-products-service-text-paragraph {
        font-size: 3.256vw;
    }
    .section-our-products-certified-standards {
        position: absolute;
        top: 334vw;
        margin-bottom: 4.583vw;
    }
    .section-our-products-certified-standards:before {
        left: -20vw;
        width: 16.744vw;
        height: 0.233vw;
    }
    .section-our-products-certified-standards:after {
        right: -20vw;
        width: 16.744vw;
        height: 0.233vw;
    }
    .section-our-products-certified-standards-paragraph {
        font-size: 4.186vw;
    }
    .section-our-products-certified-standards-image-wrapper {
        position: absolute;
        width: 70vw;
        flex-wrap: wrap;
        justify-content: center;
        top: 345vw;
        gap: 4vw;
        margin-bottom: 4.444vw;
    }
    .section-our-products-certified-standards-image {
        height: 11.628vw;
    }
    .section-our-products-product-box {
        flex: unset;
        height: 106.047vw;
        width: 85.116vw;
        border-radius: 1.86vw;
        padding: 9.302vw 0 0;
        background-image: url(../images/our-service/jagged-shape.png);
        background-size: 100% 26.977vw;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    .section-our-products-product-box:nth-of-type(2) {
        background-size: unset;
    }
    .section-our-products-product-box:nth-of-type(3),
    .section-our-products-product-box:nth-of-type(5),
    .section-our-products-product-box:nth-of-type(6) {
        background-size: 100% 26.977vw;
    }
    .section-our-products-product-box:nth-of-type(1),
    .section-our-products-product-box:nth-of-type(3) {
        margin-bottom: 0;
    }
    .section-our-products-product-container {
        overflow-x: scroll;
        width: 100vw;
    }
    .section-our-products-product-wrapper {
        width: max-content;
        flex-wrap: unset;
        gap: 2.791vw;
        padding: 0 6.977vw;
    }
    .section-our-products-product-header-wrapper {
        width: 100%;
        margin-left: 0;
        gap: 3.256vw;
        padding: 0 13.953vw 0 6.977vw;
    }
    .section-our-products-product-header-3 {
        font-size: 5.581vw;
    }
    .section-our-products-product-paragraph {
        font-size: 3.256vw;
    }
    .section-our-products-product-image {
        height: 50vw;
    }
    .section-our-products-product-box:nth-of-type(3) .section-our-products-product-image,
    .section-our-products-product-box:nth-of-type(4) .section-our-products-product-image,
    .section-our-products-product-box:nth-of-type(5) .section-our-products-product-image,
    .section-our-products-product-box:nth-of-type(6) .section-our-products-product-image {
        height: 55.116vw;
        bottom: 7.778vw;
    }
    .section-our-products-product-arrow {
        bottom: -0.833vw;
        right: -0.833vw;
        width: 15.116vw;
        height: 15.116vw;
    }
    .section-our-products-product-arrow-1 {
        border-width: 0px 0.508vw 0.508vw 0;
        padding: 0.917vw;
    }
    .section-our-products-product-arrow-2 {
        top: 6.5vw;
        left: 7.65vw;
        width: 0.465vw;
        height: 2.806vw;
    }
    .section-our-products-product-box:hover .section-our-products-product-arrow-2 {
        left: 7.65vw;
        top: 6.5vw;
        height: 2.806vw;
    }
    .section-our-products-image-floating.our-products-image-floating-1 {
        display: none;
        top: 23.611vw;
        left: 2.083vw;
        height: 1.528vw;
    }
    .section-our-products-image-floating.our-products-image-floating-2 {
        display: none;
        height: 1.667vw;
        right: 2.361vw;
        top: 26.528vw;
    }
    .section-our-products-image-floating.our-products-image-floating-3 {
        height: 19.279vw;
        right: 0;
        top: 12.111vw;
    }
    .section-our-products-image-floating.our-products-image-floating-4 {
        display: none;
        height: 9.028vw;
        left: 3.472vw;
        top: 25.694vw;
    }
    .view-more-products-button-wrapper {
        margin-top: 9.302vw;
    }
    .view-more-products-button {
        width: 51.163vw;
        height: 10.233vw;
        border-radius: 2.326vw;
    }
    .view-more-products-text {
        font-size: 4.186vw;
    }
    .view-more-products-arrow-1 {
        height: 0.465vw;
        width: 2.791vw;
        right: -1.6vw;
    }
    .view-more-products-button:hover .view-more-products-arrow-1 {
        width: 1.944vw;
    }
    .view-more-products-arrow-2 {
        border-width: 0px 0.508vw 0.508vw 0;
        padding: 0.717vw;
    }
    .section-smile-making-menu {
        height: 96.744vw;
        padding-top: 6vw;
    }
    .section-smile-making-menu-wrapper {
        gap: 2.791vw;
        text-align: center;
        background-color: #fff;
        padding-top: 14vw;
    }
    .section-smile-making-menu-text {
        font-size: 4.651vw;
        line-height: 1.5;
    }
    .section-smile-making-menu-paragraph-box {
        width: 100%;
        padding: 0 6.977vw;
    }
    .section-smile-making-menu-paragraph {
        font-size: 3.256vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-1 {
        height: 15.814vw;
        top: 0;
        left: 6vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-2 {
        display: none;
        height: 9.444vw;
        top: 11.806vw;
        left: 7.639vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-3 {
        display: none;
        height: 9.722vw;
        bottom: 3.472vw;
    }
    .section-smile-making-menu-image-floating.smile-making-menu-floating-4 {
        display: none;
        height: 1.667vw;
        right: 3.611vw;
        top: 3.333vw;
    }
    .section-switch-and-slide {
        height: 292.558vw;
        padding-top: 13.488vw;
    }
    .section-switch-and-slide-wrappper {
        width: 100%;
        flex-direction: column;
    }
    .section-switch-and-slide-product {
        width: 50vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-1 {
        display: none;
        height: 5vw;
        top: 4.167vw;
        left: 3.472vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-2 {
        height: 17.674vw;
        top: unset;
        bottom: 98vw;
        left: 13.5vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-3 {
        height: 36vw;
        top: -14.5vw;
        left: 64vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-4 {
        height: 108.8vw;
        /* bottom: -14vw; */
        z-index: 1;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-5 {
        height: 48vw;
        left: -7.2vw;
    }
    .section-switch-and-slide-product-image.switch-and-slide-product-image-6 {
        height: 36vw;
        bottom: -11.4vw;
        left: 68vw;
    }
    .section-switch-and-slide-pig {
        align-items: center;
        width: 100%;
        padding: 0;
    }
    .section-switch-and-slide-pig-image {
        height: 45.116vw;
        margin-bottom: 7.907vw;
    }
    .section-switch-and-slide-pig-click {
        gap: 4.651vw;
        margin-bottom: 17.209vw;
        padding-left: 0;
    }
    .section-switch-and-slide-pig-click:before {
        width: 85.116vw;
        height: 0.465vw;
        bottom: -8.5vw;
        left: -20vw;
    }
    .section-switch-and-slide-pig-click-image {
        border: unset;
        width: 5.75vw;
        height: 7.75vw;
    }
    .section-switch-and-slide-pig-click-image img {
        height: 5.75vw;
    }
    .section-switch-and-slide-pig-click-text-paragraph {
        font-size: 4.186vw;
    }
    .section-switch-and-slide-pig-select-mobile-container.show-hide {
        display: flex;
        overflow-x: scroll;
        width: 100vw;
        margin-bottom: 6.977vw;
    }
    .section-switch-and-slide-pig-select-mobile-wrapper {
        display: flex;
        width: max-content;
        gap: 1.86vw;
        padding: 0 6.977vw;
    }
    .section-switch-and-slide-pig-select-mobile-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 27.442vw;
        height: 11.628vw;
        border-radius: 6.977vw;
        border: 0.233vw solid #fff;
    }
    .section-switch-and-slide-pig-select-mobile-paragraph {
        font-family: "sukhumvit-set-light";
        font-size: 3.721vw;
        color: #fff;
        line-height: 1.6;
    }
    .section-switch-and-slide-pig-content {
        width: 100%;
        padding: 0 6.977vw;
    }
    .section-switch-and-slide-pig-content-header {
        margin-bottom: 4.651vw;
    }
    .section-switch-and-slide-pig-content-header-3 {
        font-size: 7.442vw;
    }
    .section-switch-and-slide-pig-content-detail {
        margin-bottom: 6.047vw;
    }
    .section-switch-and-slide-pig-content-paragraph {
        font-size: 4.186vw;
    }
    .section-switch-and-slide-pig-content-bottom {
        gap: 2.791vw;
    }
    .section-switch-and-slide-pig-content-bottom-image {
        width: 10vw;
        height: 10vw;
    }
    .section-switch-and-slide-pig-content-bottom img {
        height: 4.442vw;
    }
    .section-switch-and-slide-pig-content-bottom-wrapper {
        gap: 2vw;
    }
    .section-switch-and-slide-pig-content-bottom-header-paragraph {
        font-size: 3.721vw;
    }
    .section-switch-and-slide-pig-content-bottom-paragraph {
        font-size: 3.721vw;
    }
    .section-beginning-smile {
        height: 99.07vw;
        padding-top: 14.116vw;
    }
    .section-beginning-smile-wrapper {
        gap: 3.256vw;
    }
    .section-beginning-smile-text {
        font-size: 4.651vw;
        line-height: 1.5;
        text-align: center;
    }
    .section-beginning-smile-paragraph-box {
        width: 100%;
        padding: 0 6.977vw;
    }
    .section-beginning-smile-paragraph {
        font-size: 3.256vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-1 {
        display: none;
        height: 9.722vw;
        top: 14.583vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-2 {
        display: none;
        height: 1.25vw;
        right: 3.472vw;
        bottom: 12.5vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-3 {
        display: none;
        height: 13.194vw;
        bottom: -2.083vw;
        right: 3.472vw;
    }
    .section-beginning-smile-image-floating.beginning-smile-image-floating-4 {
        display: none;
        height: 1.389vw;
        left: 9.028vw;
        bottom: 5.278vw;
    }
    .section-history-slide {
        height: 116.279vw;
        justify-content: center;
        margin-bottom: 13.953vw
    }
    .section-history-slide-box {
        width: 84.884vw;
        height: 116.279vw;
        padding: 23.256vw 4.651vw;
        border-radius: 1.86vw;
    }
    .section-history-slide-box:before {
        display: none;
        bottom: 4.861vw;
        height: 0.208vw;
    }
    .section-history-slide-box:after {
        display: none;
        bottom: 3.194vw;
        width: 0.208vw;
        height: 3.472vw;
    }
    .section-history-slide-header {
        margin-bottom: 14.444vw;
    }
    .section-history-slide-header-title {
        margin-bottom: 3.256vw;
    }
    .section-history-slide-header-title-text {
        font-size: 3.721vw;
        line-height: 1.5;
    }
    .section-history-slide-detail {
        margin-bottom: 5.581vw;
    }
    .section-history-slide-detail-text {
        font-size: 4.651vw;
    }
    .section-history-slide-address-text {
        font-size: 3.721vw;
    }
    .section-history-slide-number-wrapper {
        padding-right: 11.389vw;
    }
    .section-history-slide-number {
        gap: 1.944vw;
    }
    .section-history-slide-number-paragraph-hero-box {
        position: relative;
        bottom: unset;
        left: -34vw;
        top: -72.4vw;
    }
    .section-history-slide-number-paragraph-hero {
        font-size: 8.837vw;
    }
    .section-history-slide-arrow {
        bottom: unset;
        top: 10vw;
        right: 14vw;
        width: 8.75vw;
        height: 5.75vw;
        border: unset;
        padding-right: 0;
    }
    .section-history-slide-arrow:before {
        height: 0.698vw;
        width: 4.186vw;
        right: -2.8vw;
    }
    .section-history-slide-arrow:after {
        border-width: 0 0.808vw 0.808vw 0;
        padding: 1.217vw;
    }
    .section-history-slide-number-paragraph-box {
        display: none;
    }
    .section-history-slide-number-paragraph {
        font-size: 1.111vw;
    }
    /* .section-history-slide-image-slide-1.history-slide-image-slide-1-1 {
        display: none;
        height: 16.806vw;
    }
    .section-history-slide-image-slide-1.history-slide-image-slide-1-2 {
        position: relative;
        top: unset;
        bottom: 14.6vw;
        left: -4.651vw;
        height: 41.1vw;
        width: 100vw;
    }
    .section-history-slide-image-slide-1.history-slide-image-slide-1-3 {
        display: none;
        height: 30.139vw;
    } */
    .section-pay-attention-every-process {
        height: auto;
        padding: 14.326vw 0 17.674vw;
        background-color: #FEF7ED;
    }
    .section-pay-attention-every-process-wrapper {
        gap: 14.884vw;
    }
    .section-pay-attention-every-process-header {
        gap: 2.791vw;
    }
    .section-pay-attention-every-process-paragraph-box {
        width: 100%;
        padding: 0 6.977vw;
    }
    .section-pay-attention-every-process-paragraph {
        font-size: 3.256vw;
    }
    .section-pay-attention-every-process-content-wrapper {
        width: 100%;
        gap: 1.944vw;
    }
    .section-pay-attention-every-process-content-left {
        align-items: center;
        gap: 6.977vw;
        width: 100%;
    }
    .section-pay-attention-every-process-content-left-header-3 {
        font-family: "sukhumvit-set-Bold";
        font-size: 4.651vw;
    }
    .section-pay-attention-every-process-content-left-header-3 span {
        font-family: unset;
        font-size: 4.651vw;
    }
    .section-pay-attention-every-process-content-left-select-wrapper {
        gap: 13.953vw;
    }
    .section-pay-attention-every-process-content-left-select {
        padding-bottom: unset;
        border-bottom: unset;
        gap: 6.977vw;
        align-items: center;
    }
    .section-pay-attention-every-process-content-left-select.active {
        border-bottom: unset;
    }
    .section-pay-attention-every-process-content-left-select-paragraph {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 4.651vw;
        border-bottom: 0.233vw solid #464C4F;
        padding-bottom: 5.116vw;
        width: 84vw;
    }
    .section-pay-attention-every-process-content-left-select.active .section-pay-attention-every-process-content-left-select-paragraph {
        border-bottom: 0.465vw solid #464C4F;
    }
    .section-pay-attention-every-process-arrow {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 7.907vw;
        height: 10.465vw;
        background-color: #D9D9D9;
        border-radius: 5.116vw;
        transition: all 0.4s ease;
    }
    .section-pay-attention-every-process-arrow-inner {
        position: absolute;
        border: solid #fff;
        border-width: 0 0.605vw 0.605vw 0;
        display: inline-block;
        padding: 1.07vw;
        transform: rotate(45deg);
        transition: all 0.4s ease;
    }
    .section-pay-attention-every-process-content-left-select.active .section-pay-attention-every-process-arrow {
        background-color: #D81B18;
    }
    .section-pay-attention-every-process-content-left-select.active .section-pay-attention-every-process-arrow-inner {
        transform: rotate(225deg);
    }

    .section-pay-attention-every-process-content-right-select-container {
        top: unset;
        left: unset;
        position: relative;
        overflow-x: scroll;
        width: 100vw;
    }
    .section-pay-attention-every-process-content-right-select-wrapepr {
        gap: 5.116vw;
        width: max-content;
        padding: 0 6.977vw;
    }
    .section-pay-attention-every-process-content-right-select-box {
        width: 48.372vw;
        height: 83.256vw;
        border-radius: 3.111vw;
    }
    /* .section-pay-attention-every-process-content-right-select-image {
        height: 51.86vw;
    } */
    .section-pay-attention-every-process-content-right-select-paragraph-box {
        padding: 4.651vw;
    }
    .section-pay-attention-every-process-content-right-select-paragraph {
        font-size: 3.721vw;
    }
    .section-pay-attention-every-process-image-floating.pay-attention-every-process-image-floating-1 {
        display: none;
        height: 11.111vw;
        top: 22.917vw;
    }
    .section-pay-attention-every-process-image-floating.pay-attention-every-process-image-floating-2 {
        display: none;
        height: 11.944vw;
        top: 17.361vw;
    }
    .section-secrets-of-deliciousness {
        height: fit-content;
        padding-top: 25.581vw;
    }
    .section-secrets-of-deliciousness-header-box {
        margin-bottom: 10.698vw;
        gap: 3.256vw;
        text-align: center;
    }
    .section-secrets-of-deliciousness-header-text-box {
        padding: 0 9.302vw;
    }
    .section-secrets-of-deliciousness-header-text {
        font-size: 4.651vw;
        line-height: 1.5;
    }
    .section-secrets-of-deliciousness-content-wrapper {
        margin-bottom: 11.163vw;
        gap: 10.233vw;
        flex-direction: column;
    }
    .section-secrets-of-deliciousness-content-box {
        width: 83.721vw;
        height: 125.581vw;
        gap: 3.256vw;
    }
    .section-secrets-of-deliciousness-content-image {
        height: 77.907vw;
    }
    .section-secrets-of-deliciousness-content-image img {
        border-radius: 0.694vw;
    }
    .section-secrets-of-deliciousness-content-header {
        margin-bottom: 2.791vw;
    }
    .section-secrets-of-deliciousness-content-header-3 {
        font-size: 4.651vw;
    }
    .section-secrets-of-deliciousness-content-text-paragraph {
        font-size: 3.721vw;
        color: #898C8F;
    }
    .section-secrets-of-deliciousness-content-bottom {
        gap: 40.417vw;
    }
    .section-secrets-of-deliciousness-content-date {
        font-size: 3.721vw;
        color: #898C8F;
    }
    .section-secrets-of-deliciousness-content-read-more {
        font-size: 3.721vw;
    }
    .section-secrets-of-deliciousness-content-arrow:before {
        height: 0.465vw;
        width: 2.791vw;
        right: -1.186vw;
    }
    .section-secrets-of-deliciousness-content-arrow:after {
        border-width: 0 0.465vw 0.465vw 0;
        padding: 0.558vw;
    }
    .section-secrets-of-deliciousness-button {
        width: 51.163vw;
        height: 10.233vw;
        border-radius: 2.326vw;
    }
    .section-secrets-of-deliciousness-text {
        font-size: 4.186vw;
    }
    .section-secrets-of-deliciousness-arrow-1 {
        height: 0.465vw;
        width: 2.791vw;
        right: -2.047vw;
    }
    .section-secrets-of-deliciousness-button:hover .section-secrets-of-deliciousness-arrow-1 {
        width: 1.944vw;
    }
    .section-secrets-of-deliciousness-arrow-2 {
        border-width: 0 0.465vw 0.465vw 0;
        padding: 0.93vw;
    }
    .section-secrets-of-deliciousness-image-floating {
        top: 3.472vw;
        right: 10.417vw;
        width: 20vw;
    }

    .section-switch-and-slide-pig-click-text-paragraph.d {
        display: none;
    }
    .section-switch-and-slide-pig-click-text-paragraph.m {
        display: block;
    }
}
/* --- 27/06/2025 --- */
/* Container หลัก */
.image-compare-container {
    position: relative;
    width: 100%;
    left: 9%;
    top: 10%;
    height: 90%;
    max-width: 700px;
    margin: 0 auto;
    font-family: 'Sukhumvit Set', sans-serif;
}
.image-compare-container .image-after {
    display: block; /* ทำให้รูปภาพอยู่ในผัง Layout */
    width: 100%;    /* ให้ความกว้างเต็ม 100% ของ container */
    height: 100%; /* สูง 100% ของ container ที่ได้ขนาดมาจากรูป .image-after แล้ว */
    object-fit: cover;
}

/* รูปภาพด้านหน้า (image-before) จะลอยทับอยู่ด้านบน */
.image-compare-container .image-before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* สูง 100% ของ container ที่ได้ขนาดมาจากรูป .image-after แล้ว */
    object-fit: cover; /* ใช้ cover เพื่อให้ขนาดซ้อนทับกันพอดีเป๊ะ */
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    pointer-events: none;
}
.image-compare-container .slider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
}

/* เส้นแบ่ง */
.image-compare-container .slider-line {
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: linear-gradient(
        to bottom,
        rgba(255, 38, 35, 0) 0%,  /* ปลายบนสุด: โปร่งใส */
        #ff2623 15%,              /* ค่อยๆ ทึบขึ้นจนสุดที่ 15% */
        #ff2623 85%,              /* เป็นสีทึบยาวไปจนถึง 85% */
        rgba(255, 38, 35, 0) 100% /* ปลายล่างสุด: โปร่งใส */
    );
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    transform: translateX(-50%);
}


/* ปุ่ม "เลื่อน" */
.image-compare-container .slider-button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ff2623;
    border-radius: 40px;
    color: #fff;
    padding: 6px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ข้อความ "เลื่อน" */
.image-compare-container .slider-text {
    font-weight: 600;
    font-size: 16px;
}

/* ลูกศร */
.image-compare-container .slider-arrow {
    width: 24px;
    height: 24px;
}
/* ----- Main Container ----- */
    .vector-parent {
        width: 100%;
        max-width: 468px;
        aspect-ratio: 468 / 248; 
        position: relative;
        height: 248px;
        text-align: left;
        font-size: 11px;
        color: #464c4f;
        font-family: 'Sukhumvit Set', sans-serif;
        margin: 0 auto;
        /* เพิ่ม transition เพื่อให้การปรับขนาด margin-bottom ดูนุ่มนวล */
        transition: margin-bottom 0.4s ease;
    }

    /* ----- Pork Parts Images & Hover Effects ----- */
    .vector-icon1, .vector-icon2, .vector-icon3, .vector-icon4, 
    .vector-icon5, .vector-icon6, .vector-icon7, .vector-icon8, 
    .vector-icon9, .vector-icon10, .instance-child {
        cursor: pointer;
        transition: transform 0.3s;
    }
    .vector-parent img:hover {
        transform: scale(1.05);
        filter: brightness(0) saturate(100%) invert(21%) sepia(82%) saturate(4649%) hue-rotate(348deg) brightness(101%) contrast(106%);
    }
    .vector-parent img.selected {
        filter: brightness(0) saturate(100%) invert(21%) sepia(82%) saturate(4649%) hue-rotate(348deg) brightness(101%) contrast(106%);
    }
    .vector-icon1:hover ~ .div7, .vector-icon1.selected ~ .div7,
    .vector-icon2:hover ~ .div1, .vector-icon2.selected ~ .div1,
    .vector-icon3:hover ~ .div4, .vector-icon3.selected ~ .div4,
    .vector-icon4:hover ~ .div6, .vector-icon4.selected ~ .div6,
    .vector-icon5:hover ~ .div11, .vector-icon5.selected ~ .div11,
    .vector-icon6:hover ~ .div2, .vector-icon6.selected ~ .div2,
    .vector-icon7:hover ~ .div3, .vector-icon7.selected ~ .div3,
    .vector-icon8:hover ~ .div10, .vector-icon8.selected ~ .div10,
    .vector-icon9:hover ~ .div5, .vector-icon9.selected ~ .div5,
    .vector-icon10:hover ~ .div9, .vector-icon10.selected ~ .div9,
    .instance-child:hover ~ .div8, .instance-child.selected ~ .div8 {
        color: #fff;
    }
    
    /* ----- Click Prompt (before selection) ----- */
    .section-click-pork {
        position: absolute;
        top: 100%; /* จัดวางไว้ใต้รูปภาพ */
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 40px; /* เพิ่มระยะห่างด้านบน */
    }
    .pork-prompt-main {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .section-click-pork-icon {
        width: 50px; 
        height: 50px;
    }
    .section-click-pork-text {
        line-height: 22px;
        font-size: 18px;
        color: #fff;
        font-family: 'Sukhumvit Set', sans-serif;
    }
    .section-click-line {
        width: 100%;
        height: 3px;
    }

    /* ----- Detail View (Populated by JS) - แก้ไขแล้ว ----- */
    #pork-detail-container {
        position: absolute;
        top: 100%; /* เปลี่ยนจาก bottom เป็น top เพื่อให้ยึดตำแหน่งจากด้านบน */
        left: 0;
        width: 100%;
        color: #fff;
        font-family: 'Sukhumvit Set', sans-serif;
        margin-top: 20px; /* เพิ่มระยะห่างระหว่างรูปกับกล่องข้อความ */
        display: none; /* ซ่อนไว้ก่อนจนกว่าจะมีการคลิก */
    }
    .detail-title {
        font-size: 32px;
        margin-bottom: 8px;
        color: #fff;
        font-weight: bold;
    }
    .detail-desc {
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 16px;
    }
    .detail-menu {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .detail-menu-icon {
        width: 40px; height: 40px;
    }
    .detail-menu-label {
        font-size: 18px;
        font-weight: bold;
    }
    .detail-menu-items {
        font-size: 16px;
        margin-left: 4px;
    }

    /* ----- Positions of Pork Parts & Labels (unchanged) ----- */
    .vector-icon1 { position: absolute; height: 62.04%; width: 8.12%; top: 5.94%; right: 69.44%; bottom: 32.02%; left: 22.44%; }
    .vector-icon2{position:absolute;height:25.81%;width:29.44%;top:37.08%;right:30.49%;bottom:37.12%;left:40.06%;z-index:1}.vector-icon3{position:absolute;height:17.23%;width:30.06%;top:0;right:27.77%;bottom:82.77%;left:42.16%}.vector-icon4{position:absolute;height:50.76%;width:12.56%;top:.14%;right:57.56%;bottom:49.1%;left:29.88%}.vector-icon5{position:absolute;height:41.18%;width:19.34%;top:58.8%;right:7.69%;bottom:.02%;left:72.98%}.vector-icon6{position:absolute;height:32.57%;width:34.21%;top:40.96%;right:27.59%;bottom:26.47%;left:38.2%}.vector-icon7{position:absolute;height:65.94%;width:29.89%;top:.77%;right:-.01%;bottom:33.29%;left:70.11%}.vector-icon8{position:absolute;height:16.43%;width:22.35%;top:50.25%;right:75.16%;bottom:33.32%;left:2.49%}.vector-icon9{position:absolute;height:24.96%;width:27.5%;top:16.91%;right:29.93%;bottom:58.13%;left:42.57%}.vector-icon10{position:absolute;height:44.73%;width:25.58%;top:10.27%;right:74.42%;bottom:45%;left:0}.instance-child{position:absolute;height:52.5%;width:16.52%;top:47.51%;right:58.93%;bottom:0;left:24.55%}.div1{position:absolute;top:44.16%;left:51.28%;line-height:22.4px;font-weight:500;z-index:2}.div2{position:absolute;top:61.87%;left:53.63%;line-height:22.4px;font-weight:500}.div3{position:absolute;top:28.06%;left:79.7%;line-height:22.4px;font-weight:500}.div4{position:absolute;top:3.46%;left:52.36%;line-height:22.4px}.div5{position:absolute;top:22.17%;left:53.63%;line-height:22.4px;font-weight:500}.div6{position:absolute;top:18.8%;left:34.83%;line-height:22.4px;font-weight:500}.div7{position:absolute;top:33.96%;left:26.08%;line-height:22.4px;font-weight:500;transform:rotate(-94.3deg);transform-origin:0 0}.div8{position:absolute;top:61.07%;left:30.98%;line-height:22.4px;font-weight:500}.div9{position:absolute;top:29.67%;left:13.46%;line-height:22.4px;font-weight:500}.div10{position:absolute;top:54.63%;left:14.1%;line-height:22.4px;font-weight:500}.div11{position:absolute;top:61.87%;left:81.84%;line-height:22.4px;font-weight:500}

  /* --- Slide Menu --- */
  /* ----- Main Container ----- */
  .vector-parent {
    width: 100%;
    max-width: 468px;
    aspect-ratio: 468 / 248; 
    position: relative;
    height: 248px;
    text-align: left;
    font-size: 11px;
    color: #464c4f;
    font-family: 'Sukhumvit Set', sans-serif;
    margin: 0 auto;
    /* เพิ่ม transition เพื่อให้การปรับขนาด margin-bottom ดูนุ่มนวล */
    transition: margin-bottom 0.4s ease;
}

/* ----- Pork Parts Images & Hover Effects ----- */
.vector-icon1, .vector-icon2, .vector-icon3, .vector-icon4, 
.vector-icon5, .vector-icon6, .vector-icon7, .vector-icon8, 
.vector-icon9, .vector-icon10, .instance-child {
    cursor: pointer;
    transition: transform 0.3s;
}
.vector-parent img:hover {
    transform: scale(1.05);
    filter: brightness(0) saturate(100%) invert(21%) sepia(82%) saturate(4649%) hue-rotate(348deg) brightness(101%) contrast(106%);
}
.vector-parent img.selected {
    filter: brightness(0) saturate(100%) invert(21%) sepia(82%) saturate(4649%) hue-rotate(348deg) brightness(101%) contrast(106%);
}
.vector-icon1:hover ~ .div7, .vector-icon1.selected ~ .div7,
.vector-icon2:hover ~ .div1, .vector-icon2.selected ~ .div1,
.vector-icon3:hover ~ .div4, .vector-icon3.selected ~ .div4,
.vector-icon4:hover ~ .div6, .vector-icon4.selected ~ .div6,
.vector-icon5:hover ~ .div11, .vector-icon5.selected ~ .div11,
.vector-icon6:hover ~ .div2, .vector-icon6.selected ~ .div2,
.vector-icon7:hover ~ .div3, .vector-icon7.selected ~ .div3,
.vector-icon8:hover ~ .div10, .vector-icon8.selected ~ .div10,
.vector-icon9:hover ~ .div5, .vector-icon9.selected ~ .div5,
.vector-icon10:hover ~ .div9, .vector-icon10.selected ~ .div9,
.instance-child:hover ~ .div8, .instance-child.selected ~ .div8 {
    color: #fff;
}

/* ----- Click Prompt (before selection) ----- */
.section-click-pork {
    position: absolute;
    top: 100%; /* จัดวางไว้ใต้รูปภาพ */
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 40px; /* เพิ่มระยะห่างด้านบน */
}
.pork-prompt-main {
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-click-pork-icon {
    width: 50px; 
    height: 50px;
}
.section-click-pork-text {
    line-height: 22px;
    font-size: 18px;
    color: #fff;
    font-family: 'Sukhumvit Set', sans-serif;
}
.section-click-line {
    width: 100%;
    height: 3px;
}

/* ----- Detail View (Populated by JS) - แก้ไขแล้ว ----- */
#pork-detail-container {
    position: absolute;
    top: 100%; /* เปลี่ยนจาก bottom เป็น top เพื่อให้ยึดตำแหน่งจากด้านบน */
    left: 0;
    width: 100%;
    color: #fff;
    font-family: 'Sukhumvit Set', sans-serif;
    margin-top: 20px; /* เพิ่มระยะห่างระหว่างรูปกับกล่องข้อความ */
    display: none; /* ซ่อนไว้ก่อนจนกว่าจะมีการคลิก */
}
.detail-title {
    font-size: 32px;
    margin-bottom: 8px;
    color: #fff;
    font-weight: bold;
}
.detail-desc {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 16px;
}
.detail-menu {
    display: flex;
    align-items: center;
    gap: 12px;
}
.detail-menu-icon {
    width: 40px; height: 40px;
}
.detail-menu-label {
    font-size: 18px;
    font-weight: bold;
}
.detail-menu-items {
    font-size: 16px;
    margin-left: 4px;
}
@media screen and (max-width: 1024px) {
.vector-parent {/* ไม่ต้องกำหนด height เพราะใช้ aspect-ratio แล้ว */
    margin-bottom: 60px; /* margin-bottom จะถูกคำนวณโดย JS */
    width: 37vw;
    height: 194.3px;   /* ความสูงที่ Figma ให้มา */
    position: relative;
    text-align: left;
    font-size: 8.6px;
    color: #464c4f;
    font-family: 'Sukhumvit Set', sans-serif;
}
.section-click-pork {
  margin-top: 20px;
}
.section-click-pork-icon { width: 40px; height: 40px; }
.section-click-pork-text { font-size: 16px; }

#pork-detail-container .detail-title { font-size: 24px; }
#pork-detail-container .detail-desc  { font-size: 14px; line-height: 22px; }
#pork-detail-container .detail-menu { gap: 8px; }
#pork-detail-container .detail-menu-icon { width: 30px; height: 30px; }
#pork-detail-container .detail-menu-label { font-size: 16px; }
#pork-detail-container .detail-menu-items { font-size: 14px; }

    /* 1. เลือกชิ้นหมู ให้วางซ้อนกันเป็นคอลัมน์ และกดเลื่อนดูได้ */
    .section-switch-and-slide-wrappper {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
    }
    .section-switch-and-slide-pig {
    order: 1;
  }
  .section-switch-and-slide-product {
    order: 2;
  }
    .section-switch-and-slide-product,
    .section-switch-and-slide-pig {
      width: 100%;
      margin-bottom: 60px;
    }
  
    /* 2. ปรับความสูงของ section ให้ดูสวยแบบตัวอย่าง */
    .section-switch-and-slide {
      height: auto !important;
      padding: 60px 0;
    }


    .image-compare-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 120% !important;
    left: 0 !important;
    top: 10% !important;
    z-index: 10;
  }

  /* 2. ให้ slider ครอบคลุมเต็มความสูง-กว้างของภาพ */
  .image-compare-container .slider {
   position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
  }

  /* 3. ปรับเส้นแบ่งให้ชิดบน–ชิดล่าง และอยู่ตรงกลาง */
  .image-compare-container .slider-line {
    position: absolute !important;
   top: 20%;
    bottom: 20%;
    width: 3px;
    background: linear-gradient(to bottom, rgba(255, 38, 35, 0) 0%, /* ปลายบนสุด: โปร่งใส */ #ff2623 15%, /* ค่อยๆ ทึบขึ้นจนสุดที่ 15% */ #ff2623 85%, /* เป็นสีทึบยาวไปจนถึง 85% */ rgba(255, 38, 35, 0) 100% /* ปลายล่างสุด: โปร่งใส */);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  }

  /* 4. จัดปุ่ม “เลื่อน” ให้อยู่กึ่งกลางภาพ */
  .image-compare-container .slider-button {
    position: absolute !important;
    top: 50% !important;

    padding: 4px 8px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

/* ย้าย pointer-events: none ไปไว้ที่ลูกศรและเส้นแบ่ง แทนที่ image-before */
.image-compare-container .image-before {
  pointer-events: none;  /* รูปล่างไม่ขวางการคลิก */
}

/* slider ครอบ full-container, รับ pointer/touch events */
.image-compare-container .slider {
  pointer-events: auto;
}

/* ไม่ให้เส้นแบ่งหรือปุ่มบัง event ของ .slider */
.image-compare-container .slider-line,
.image-compare-container .slider-button {
  pointer-events: none;
}



    /* ปรับตำแหน่ง detail-box ของหมู ให้เต็มความกว้าง */
    #pork-detail-container {
      position: relative;
      left: auto;
      width: 100%;
      margin: 16px 0;
      box-sizing: border-box;
      padding: 0 16px;
    }
    /* ปรับขนาดตัวอักษรให้ mobile อ่านง่าย */
    #pork-detail-container .detail-title { font-size: 20px; }
    #pork-detail-container .detail-desc  { font-size: 14px; line-height: 1.4; }
    .detail-menu-label, .detail-menu-items { font-size: 14px; }

    /* ----- Positions of Pork Parts & Labels (unchanged) ----- */
    .vector-icon1 { position: absolute; height: 62.04%; width: 8.12%; top: 5.94%; right: 69.44%; bottom: 32.02%; left: 22.44%; }
    .vector-icon2{position:absolute;height:25.81%;width:29.44%;top:37.08%;right:30.49%;bottom:37.12%;left:40.06%;z-index:1}.vector-icon3{position:absolute;height:17.23%;width:30.06%;top:0;right:27.77%;bottom:82.77%;left:42.16%}.vector-icon4{position:absolute;height:50.76%;width:12.56%;top:.14%;right:57.56%;bottom:49.1%;left:29.88%}.vector-icon5{position:absolute;height:41.18%;width:19.34%;top:58.8%;right:7.69%;bottom:.02%;left:72.98%}.vector-icon6{position:absolute;height:32.57%;width:34.21%;top:40.96%;right:27.59%;bottom:26.47%;left:38.2%}.vector-icon7{position:absolute;height:65.94%;width:29.89%;top:.77%;right:-.01%;bottom:33.29%;left:70.11%}.vector-icon8{position:absolute;height:16.43%;width:22.35%;top:50.25%;right:75.16%;bottom:33.32%;left:2.49%}.vector-icon9{position:absolute;height:24.96%;width:27.5%;top:16.91%;right:29.93%;bottom:58.13%;left:42.57%}.vector-icon10{position:absolute;height:44.73%;width:25.58%;top:10.27%;right:74.42%;bottom:45%;left:0}.instance-child{position:absolute;height:52.5%;width:16.52%;top:47.51%;right:58.93%;bottom:0;left:24.55%}.div1{position:absolute;top:44.16%;left:51.28%;line-height:22.4px;font-weight:500;z-index:2}.div2{position:absolute;top:61.87%;left:53.63%;line-height:22.4px;font-weight:500}.div3{position:absolute;top:28.06%;left:79.7%;line-height:22.4px;font-weight:500}.div4{position:absolute;top:3.46%;left:52.36%;line-height:22.4px}.div5{position:absolute;top:22.17%;left:53.63%;line-height:22.4px;font-weight:500}.div6{position:absolute;top:18.8%;left:34.83%;line-height:22.4px;font-weight:500}.div7{position:absolute;top:33.96%;left:26.08%;line-height:22.4px;font-weight:500;transform:rotate(-94.3deg);transform-origin:0 0}.div8{position:absolute;top:61.07%;left:30.98%;line-height:22.4px;font-weight:500}.div9{position:absolute;top:29.67%;left:13.46%;line-height:22.4px;font-weight:500}.div10{position:absolute;top:54.63%;left:14.1%;line-height:22.4px;font-weight:500}.div11{position:absolute;top:61.87%;left:81.84%;line-height:22.4px;font-weight:500}
  
    /* ชื่อแต่ละจุด (labels) */
    .div1   { top: 44%; left: 52%; }  /* ซี่โครง */
    .div2   { top: 62%; left: 54%; }  /* สามชั้น */
    .div3   { top: 28%; left: 80%; }  /* สะโพก */
    .div4   { top:  4%; left: 52%; }  /* สันนอก */
    .div5   { top: 22%; left: 54%; }  /* สันใน */
    .div6   { top: 19%; left: 35%; }  /* ไหล่ */
    .div7   { top: 34%; left: 26%; transform: rotate(-94deg); } /* สันคอ */
    .div8   { top: 61%; left: 31%; }  /* ขาหน้า */
    .div9   { top: 30%; left: 13%; }  /* หัวหมู */
    .div10  { top: 55%; left: 14%; }  /* คอหมู */
    .div11  { top: 62%; left: 80%; }  /* ขาหลัง */
  
    /* ซ่อน prompt เดิม (ถ้ามี) หรือปรับขนาดไอคอน/ข้อความ */
    .section-click-pork {
      margin-top: 16px;
    }
    .section-click-pork-icon { width: 36px; height: 36px; }
    .section-click-pork-text { font-size: 14px; }
  }

	@media screen and (max-width: 767px) {
		.vector-parent {
			width: 50vw;
		}
	}
	@media screen and (max-width: 616px) {
		.vector-parent {
			width: 80vw;
		}
	}

	@media screen and (max-width: 475px) {
		.vector-parent {
			width: 80vw;
		}
	}