.home-hero { position: relative; min-height: clamp(535px, 43vw, 690px); overflow: hidden; isolation: isolate; background: #d8eaf2; }
.home-hero__image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-hero__wash { display: none; }
.home-hero__value-backdrop { position: absolute; z-index: 0; bottom: 0; left: 0; width: min(920px, 59vw); height: 160px; background: linear-gradient(90deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 88%) 58%, rgb(255 255 255 / 54%) 78%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 18%) 18%, rgb(0 0 0 / 68%) 47%, #000 75%); mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 18%) 18%, rgb(0 0 0 / 68%) 47%, #000 75%); }
.home-hero__content { position: relative; z-index: 1; display: flex; min-height: inherit; flex-direction: column; justify-content: space-between; padding-top: clamp(55px, 6vw, 112px); padding-bottom: 18px; }
.home-hero__copy { position: relative; z-index: 0; max-width: 740px; }
.home-hero__copy::before { position: absolute; z-index: -1; top: -72px; left: -100px; width: min(860px, 65vw); height: 360px; background: radial-gradient(ellipse at 29% 45%, rgb(255 255 255 / 87%) 0%, rgb(255 255 255 / 64%) 37%, rgb(255 255 255 / 20%) 64%, transparent 79%); content: ""; pointer-events: none; }
.home-hero h1 { margin: 0; color: #084025; font-size: clamp(2.5rem, 4vw, 4.55rem); font-weight: 800; letter-spacing: -.055em; line-height: .99; }
.home-hero h1 span { color: #17943d; }
.home-hero__copy p { max-width: 570px; margin: 24px 0 0; color: #203d2e; font-size: clamp(1rem, 1.18vw, 1.32rem); font-weight: 500; line-height: 1.38; }
.home-hero__buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 999px; min-width: 166px; padding: 13px 23px; font-size: .93rem; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { box-shadow: 0 12px 23px rgb(10 78 29 / 23%); transform: translateY(-2px); }
.button--primary { color: #fff; background: #12923a; box-shadow: 0 8px 18px rgb(5 86 24 / 22%), 0 2px 5px rgb(5 86 24 / 10%); }
.button--primary:hover { background: #08772e; }
.button--secondary { border-color: #d3d885; color: #41712a; background: rgb(255 255 229 / 82%); box-shadow: 0 7px 16px rgb(79 97 32 / 13%), 0 2px 4px rgb(79 97 32 / 7%); }
.home-value-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(640px, 45vw); margin: 0 0 0 -16px; padding: 0; list-style: none; }
.home-value-list__item { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #17452d; font-size: .7rem; font-weight: 800; line-height: 1.13; text-align: center; }
.home-value-list__item img { width: 34px; height: 34px; object-fit: contain; }
.home-value-list__item span { padding: 0; }
.product-shortcuts { position: relative; z-index: 2; padding: 23px 0 16px; background: #fff; }
.product-shortcuts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-category-card { position: relative; display: flex; overflow: hidden; align-items: center; min-height: 126px; border-radius: 10px; color: #103d25; background: #ebf4d2; box-shadow: 0 10px 24px rgb(36 95 45 / 15%), 0 2px 5px rgb(36 95 45 / 8%); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.home-category-card:hover { box-shadow: 0 15px 30px rgb(36 95 45 / 20%), 0 3px 7px rgb(36 95 45 / 10%); transform: translateY(-3px); }
.home-category-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.home-category-card:hover > img { transform: scale(1.04); }
.home-category-card__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 69 31 / 10%) 0%, transparent 58%); }
.home-category-card--feed .home-category-card__overlay { background: linear-gradient(90deg, rgb(10 69 31 / 8%) 0%, transparent 58%); }
.home-category-card--bee .home-category-card__overlay { background: linear-gradient(90deg, rgb(10 69 31 / 8%) 0%, transparent 58%); }
.home-category-card__content { position: relative; z-index: 1; display: flex; align-self: stretch; flex: 0 0 67%; flex-direction: column; justify-content: center; padding: 18px 78px 18px 28px; background: linear-gradient(90deg, rgb(255 255 242 / 70%) 0%, rgb(255 255 242 / 55%) 72%, rgb(255 255 242 / 8%) 100%); clip-path: polygon(0 0, 87% 0, 100% 50%, 87% 100%, 0 100%); }
.home-category-card__content strong { display: block; font-size: clamp(1.05rem, 1.25vw, 1.42rem); letter-spacing: -.035em; line-height: 1.03; }
.home-category-card__content small { display: block; margin-top: 8px; color: #617256; font-size: .75rem; font-weight: 700; line-height: 1.18; }
.home-category-card__arrow { position: absolute; z-index: 2; right: 24px; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #2ca242; line-height: 0; transform: translateY(-50%); }
.home-category-card__arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.8; }
.about-services { padding: 26px 0 26px; background: #fff; }
.about-services__grid { display: grid; grid-template-columns: minmax(0, .97fr) minmax(380px, 1.08fr) minmax(310px, .87fr); grid-template-rows: clamp(360px, 27vw, 420px); gap: clamp(24px, 2.5vw, 42px); align-items: stretch; }
.about-annong { display: flex; height: 100%; flex-direction: column; justify-content: center; padding: 12px 0; }
.section-eyebrow { margin: 0 0 12px; color: #198d38; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.about-annong h2, .services-card h2 { margin: 0; color: #0b4227; font-size: clamp(1.7rem, 2.05vw, 2.6rem); letter-spacing: -.05em; line-height: 1.03; }
.about-annong p:not(.section-eyebrow) { max-width: 560px; margin: 22px 0 28px; color: #58685d; font-size: .93rem; line-height: 1.58; }
.about-annong__button { align-self: flex-start; min-width: 0; padding: 12px 21px; font-size: .82rem; }
.about-annong__image { height: 100%; margin: 0; overflow: hidden; border-radius: 10px; background: #e6f2fa; box-shadow: 0 12px 28px rgb(25 76 48 / 15%), 0 2px 6px rgb(25 76 48 / 7%); }
.about-annong__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.services-card { display: flex; height: 100%; flex-direction: column; padding: clamp(26px, 2.3vw, 38px); border-radius: 11px; background: linear-gradient(135deg, #f0fbef 0%, #f9fdf6 66%, #eef9ed 100%); box-shadow: 0 12px 28px rgb(25 76 48 / 12%), 0 2px 6px rgb(25 76 48 / 6%); }
.services-card h2 { font-size: clamp(1.65rem, 1.85vw, 2.25rem); }
.services-card > p { margin: 8px 0 26px; color: #607164; font-size: .82rem; }
.services-card__grid { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.service-item { display: grid; grid-template-rows: 47px minmax(2.16em, auto); min-height: 0; place-items: center; align-content: center; row-gap: 11px; padding: 12px 10px; color: #16472c; text-align: center; }
.service-item:nth-child(odd) { border-right: 1px solid #dcebd9; }
.service-item:nth-child(-n+2) { border-bottom: 1px solid #dcebd9; }
.service-item img { width: 47px; height: 47px; object-fit: contain; }
.service-item strong { font-size: .86rem; line-height: 1.08; }
.core-products { padding: 16px 0; background: #fff; }
.core-products__heading { display: grid; grid-template-columns: auto 46px minmax(0, 1fr); align-items: end; gap: 17px; padding: 0 6px 14px; border-bottom: 1px solid #e7eee6; }
.core-products__heading .section-eyebrow { margin-bottom: 7px; }
.core-products__heading h2 { margin: 0; color: #0b4227; font-size: clamp(1.62rem, 2.05vw, 2.42rem); letter-spacing: -.05em; line-height: 1.05; }
.core-products__accent { width: 43px; height: 3px; margin-bottom: 8px; border-radius: 99px; background: #f2c928; }
.core-products__heading > p { justify-self: end; max-width: 470px; margin: 0 0 7px; color: #667367; font-size: .72rem; font-weight: 600; line-height: 1.35; text-align: right; }
.core-products__rows { display: grid; gap: 12px; }
.core-product-row { display: grid; grid-template-columns: minmax(285px, 31%) minmax(0, 1fr); min-height: 170px; overflow: hidden; border: 1px solid #e7eee6; border-radius: 9px; background: #fff; box-shadow: 0 7px 18px rgb(19 73 39 / 7%); }
.core-product-row__intro { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; }
.core-product-row__intro > img { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.core-product-row__intro:hover > img { transform: scale(1.05); }
.core-product-row__intro-shape { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.core-product-row__intro::after { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 9%; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 100%); content: ""; }
.core-product-row__intro-content { position: relative; z-index: 3; display: flex; height: 100%; flex-direction: column; justify-content: center; padding: 17px 64px 17px 36.5%; }
.core-product-row__intro-content > strong { color: #fff; font-size: clamp(1.16rem, 1.55vw, 1.72rem); letter-spacing: -.045em; line-height: 1.04; }
.core-product-row__points { display: grid; gap: 5px; margin-top: 11px; color: #e9f7b9; font-size: .65rem; font-weight: 600; line-height: 1.15; }
.core-product-row__points > span { position: relative; padding-left: 17px; }
.core-product-row__points > span::before { position: absolute; top: .07em; left: 0; display: grid; width: 11px; height: 11px; place-items: center; border: 1px solid #cae974; border-radius: 50%; color: #e7f6a4; content: "✓"; font-size: .52rem; font-weight: 800; line-height: 1; }
.core-product-row__arrow { position: absolute; z-index: 4; right: 25px; top: 50%; display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #fff; background: #75c645; box-shadow: 0 5px 11px rgb(5 79 28 / 20%); transform: translateY(-50%); }
.core-product-row__arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.8; }
.core-product-row__items, .core-product-row--bee .core-product-row__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 8px; padding: 8px 10px; }
.core-product-item { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px 5px; border-radius: 9px; color: #213d2c; text-align: center; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
.core-product-item:hover { background: #fff; box-shadow: 0 8px 18px rgb(21 77 40 / 12%); transform: translateY(-3px); }
.core-product-item__image { display: block; width: 100%; height: 118px; object-fit: contain; }
.core-product-item strong { font-size: .67rem; line-height: 1.08; }
.core-product-item--placeholder { color: #7c9281; }
.core-product-item--placeholder:hover { box-shadow: none; transform: none; }
.core-product-item__placeholder { display: grid; width: min(86%, 140px); height: 118px; place-items: center; border: 1px dashed #d4e5d5; border-radius: 9px; background: #f7faf6; color: #a8c3ac; font-size: 1.8rem; font-weight: 300; }
@media (max-width: 760px) { .core-product-item__placeholder { height: 116px; } }
.showcase-solutions { padding: 28px 0 19px; background: #fff; }
.factory-strength { padding: 19px 0; background: #fff; }
.global-cooperation { padding: 20px 0 68px; background: #fff; }
.showcase-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.showcase-heading h2 { display: flex; align-items: center; gap: 17px; margin: 0; color: #0b4227; font-size: clamp(1.35rem, 1.75vw, 2rem); letter-spacing: -.045em; line-height: 1.05; }
.showcase-heading h2 span { display: inline-block; width: 36px; height: 2px; border-radius: 99px; background: #7ac877; }
.showcase-heading > p { margin: 0 4px 2px 0; color: #68766d; font-size: .7rem; font-weight: 600; line-height: 1.35; text-align: right; }
.showcase-heading--with-link a { margin: 0 4px 2px 0; color: #198d38; font-size: .72rem; font-weight: 800; text-decoration: none; }
.showcase-heading--with-link a b { margin-left: 4px; font-size: 1rem; }
.solution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.solution-card { position: relative; display: flex; overflow: hidden; align-items: end; min-height: 126px; border-radius: 8px; color: #fff; box-shadow: 0 8px 20px rgb(23 82 41 / 15%); text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; }
.solution-card:hover { box-shadow: 0 13px 27px rgb(23 82 41 / 20%); transform: translateY(-3px); }
.solution-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.solution-card:hover > img { transform: scale(1.04); }
.solution-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(4 60 28 / 85%) 0%, rgb(5 77 31 / 42%) 45%, transparent 85%); }
.solution-card strong { position: relative; z-index: 1; max-width: calc(100% - 54px); padding: 0 16px 14px; font-size: .73rem; line-height: 1.14; }
.solution-card__arrow { position: absolute; z-index: 2; right: 13px; bottom: 11px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: #75c645; box-shadow: 0 4px 9px rgb(5 68 26 / 24%); }
.solution-card__arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.8; }
.factory-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.factory-card { min-width: 0; margin: 0; }
.factory-card img { display: block; width: 100%; aspect-ratio: 1.52; border-radius: 7px; box-shadow: 0 7px 17px rgb(25 70 42 / 12%); object-fit: cover; }
.factory-card figcaption { padding: 7px 2px 0; color: #304637; font-size: .68rem; font-weight: 700; line-height: 1.18; text-align: center; }
.cooperation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cooperation-card { min-width: 0; margin: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 8px 19px rgb(25 70 42 / 13%); }
.cooperation-card img { display: block; width: 100%; aspect-ratio: 1.62; object-fit: cover; object-position: center 36%; transition: transform .35s ease; }
.cooperation-card:hover img { transform: scale(1.04); }
.why-annong { padding: 18px 0 13px; background: linear-gradient(105deg, #fbfffb 0%, #f0faef 54%, #f7fcf5 100%); }
.cooperation-process { padding: 17px 0 14px; background: #fff; }
.global-market { padding: 14px 0 24px; background: #fff; }
.compact-heading { margin-bottom: 13px; }
.compact-heading h2 { display: flex; align-items: center; gap: 17px; margin: 0; color: #0b4227; font-size: clamp(1.32rem, 1.72vw, 1.95rem); letter-spacing: -.045em; line-height: 1.05; }
.compact-heading h2 span { display: inline-block; width: 36px; height: 2px; border-radius: 99px; background: #7ac877; }
.advantage-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.advantage-item { min-width: 0; padding: 0 16px 5px; border-right: 1px solid #dbeada; text-align: center; }
.advantage-item:last-child { border-right: 0; }
.advantage-item img { display: block; width: 47px; height: 47px; margin: 0 auto 8px; object-fit: contain; }
.advantage-item h3 { margin: 0; color: #17472d; font-size: .75rem; line-height: 1.15; }
.advantage-item p { margin: 8px 0 0; color: #748177; font-size: .62rem; font-weight: 600; line-height: 1.23; }
.process-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 25px; margin: 0; padding: 0 12px; list-style: none; }
.process-step { position: relative; display: flex; min-width: 0; align-items: center; gap: 10px; }
.process-step:not(:last-child)::after { position: absolute; top: 50%; right: -21px; color: #168f39; content: "→"; font-size: 1.55rem; font-weight: 500; line-height: 1; transform: translateY(-50%); }
.process-step img { width: 57px; height: 57px; flex: 0 0 auto; object-fit: contain; }
.process-step__copy { display: grid; gap: 3px; color: #244934; font-size: .62rem; font-weight: 700; line-height: 1.15; }
.process-step__copy b { color: #19933d; font-size: .82rem; }
.global-market__grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(360px, .95fr); align-items: stretch; gap: 22px; background: linear-gradient(90deg, rgb(249 254 248 / 96%) 0%, rgb(250 255 250 / 70%) 36%, rgb(255 255 255 / 8%) 100%), url('../images/home/global-market-map.png') center / cover no-repeat; }
.global-market__visual { position: relative; min-height: 245px; overflow: hidden; }
.global-market__visual > img { display: none; }
.global-market__copy { position: relative; z-index: 1; width: 170px; min-width: 0; padding: 23px 0 0; }
.global-market__copy h2 { margin: 0; color: #0b4227; font-size: clamp(1.5rem, 2.05vw, 2.4rem); letter-spacing: -.05em; line-height: 1.02; }
.global-market__copy > span { display: block; width: 39px; height: 2px; margin: 12px 0 14px; background: #17933a; }
.global-market__copy p { margin: 0; color: #627065; font-size: .68rem; font-weight: 600; line-height: 1.42; }
.inquiry-card { position: relative; overflow: hidden; padding: 20px 22px 15px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, rgb(11 105 37 / 87%) 0%, rgb(5 82 28 / 79%) 100%); box-shadow: 0 10px 25px rgb(21 83 37 / 18%); }
.inquiry-card::before { position: absolute; inset: 0; background: linear-gradient(110deg, rgb(0 58 20 / 8%) 0%, transparent 53%, rgb(196 224 80 / 20%) 100%); content: ""; pointer-events: none; }
.inquiry-card > * { position: relative; z-index: 1; }
.inquiry-card h2 { margin: 0; font-size: clamp(1.3rem, 1.55vw, 1.9rem); line-height: 1; }
.inquiry-card > p { margin: 6px 0 11px; color: rgb(255 255 255 / 83%); font-size: .62rem; font-weight: 600; }
.inquiry-card__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.inquiry-card label { display: block; }
.inquiry-card input, .inquiry-card select, .inquiry-card textarea { box-sizing: border-box; width: 100%; border: 1px solid rgb(255 255 255 / 45%); border-radius: 6px; padding: 7px 10px; color: #31553a; background: #fff; font: inherit; font-size: .63rem; outline: none; }
.inquiry-card select { appearance: auto; }
.inquiry-card textarea { min-height: 52px; resize: vertical; }
.inquiry-card__message { grid-column: 1 / -1; }
.inquiry-card__submit { min-width: 184px; margin-top: 10px; border: 0; border-radius: 999px; padding: 9px 19px; color: #1a4926; background: #f4ce25; box-shadow: 0 6px 14px rgb(0 51 19 / 21%); font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.inquiry-card__submit:hover { box-shadow: 0 9px 18px rgb(0 51 19 / 25%); transform: translateY(-2px); }
@media (max-width: 1050px) { .home-hero__copy::before { left: -55px; width: min(720px, 72vw); } .home-hero__value-backdrop { width: min(760px, 68vw); height: 128px; } .home-value-list { width: min(580px, 54vw); } .home-value-list__item { font-size: .66rem; } .product-shortcuts__grid { gap: 14px; } .home-category-card__content { padding-left: 20px; } .about-services__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .95fr); grid-template-rows: auto; } .services-card { grid-column: 1 / -1; min-height: 360px; } .services-card__grid { max-width: 580px; } }
@media (max-width: 760px) { .home-hero { min-height: 650px; } .home-hero__image { object-position: 62% center; } .home-hero__content { padding-top: 58px; padding-bottom: 7px; } .home-hero__copy::before { top: -46px; left: -42px; width: min(660px, 118vw); height: 350px; background: radial-gradient(ellipse at 27% 45%, rgb(255 255 255 / 88%) 0%, rgb(255 255 255 / 65%) 43%, rgb(255 255 255 / 16%) 72%, transparent 88%); } .home-hero__value-backdrop { width: 100%; height: 208px; background: linear-gradient(to bottom, transparent 0%, rgb(255 255 255 / 20%) 26%, rgb(255 255 255 / 62%) 74%, rgb(255 255 255 / 78%) 100%); -webkit-mask-image: none; mask-image: none; } .home-hero h1 { font-size: clamp(2.35rem, 10.2vw, 3.75rem); } .home-hero__copy p { font-size: 1rem; } .home-value-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; width: min(100%, 460px); margin-left: 0; padding: 0 8px; } .home-value-list__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; justify-content: initial; gap: 9px; font-size: .73rem; line-height: 1.14; text-align: left; } .home-value-list__item img { width: 32px; height: 32px; } .home-value-list__item span { max-width: none; } .product-shortcuts__grid, .about-services__grid { grid-template-columns: 1fr; grid-template-rows: auto; } .home-category-card { min-height: 118px; } .about-services { padding: 28px 0 54px; } .about-annong { padding-top: 0; } .about-annong h2 { font-size: 2rem; } .about-annong__image { min-height: 0; height: auto; aspect-ratio: 4 / 3; } .services-card { grid-column: auto; min-height: 0; padding: 25px 18px; } .services-card__grid { max-width: none; } .service-item { min-height: 112px; padding: 13px 6px; } }
@media (max-width: 430px) { .home-hero { min-height: 645px; } .home-hero__content { padding-top: 47px; } .home-hero h1 { font-size: 2.2rem; } .home-hero__buttons { gap: 10px; margin-top: 24px; } .button { min-width: 145px; padding: 12px 16px; font-size: .84rem; } .home-value-list__item { gap: 7px; font-size: .66rem; } .home-value-list__item img { width: 27px; height: 27px; } }
@media (max-width: 1050px) { .core-product-row { grid-template-columns: minmax(260px, 33%) minmax(0, 1fr); min-height: 164px; } .core-product-row__intro-content { padding-right: 54px; } .core-product-row__intro-content > strong { font-size: 1.22rem; } .core-product-row__points { margin-top: 10px; font-size: .61rem; } .core-product-row__arrow { right: 17px; } .core-product-item__image { height: 106px; } .core-product-item strong { font-size: .6rem; } }
@media (max-width: 760px) { .core-products { padding: 14px 0 16px; } .core-products__heading { grid-template-columns: 1fr; gap: 7px; padding: 0 0 13px; } .core-products__heading h2 { font-size: 1.7rem; } .core-products__accent { margin: 0; } .core-products__heading > p { justify-self: start; margin: 0; text-align: left; } .core-product-row { grid-template-columns: 1fr; min-height: 0; } .core-product-row__intro { min-height: 170px; } .core-product-row__intro-content { padding-left: 36.5%; } .core-product-row__intro-content > strong { font-size: 1.42rem; } .core-product-row__points { font-size: .68rem; } .core-product-row__items, .core-product-row--bee .core-product-row__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; padding: 12px 8px; } .core-product-item { min-height: 151px; padding: 4px; } .core-product-item__image { height: 116px; } .core-product-item strong { font-size: .66rem; } }
@media (max-width: 1050px) { .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .factory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cooperation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .showcase-solutions { padding: 22px 0 15px; } .factory-strength { padding: 15px 0; } .global-cooperation { padding: 18px 0 46px; } .showcase-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 12px; } .showcase-heading h2 { font-size: 1.45rem; } .showcase-heading > p, .showcase-heading--with-link a { margin: 0; text-align: left; } .solution-grid { grid-template-columns: 1fr; gap: 12px; } .solution-card { min-height: 158px; } .solution-card strong { font-size: .82rem; } .factory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 10px; } .factory-card figcaption { font-size: .66rem; } .cooperation-grid { gap: 10px; } .cooperation-card img { aspect-ratio: 1.25; } }
@media (max-width: 1050px) { .advantage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; } .advantage-item:nth-child(3n) { border-right: 0; } .advantage-item:nth-child(4) { border-right: 1px solid #dbeada; } .process-list { gap: 16px; padding: 0; } .process-step { gap: 7px; } .process-step:not(:last-child)::after { right: -14px; } .process-step img { width: 48px; height: 48px; } .global-market__grid { grid-template-columns: minmax(0, 1fr) minmax(330px, .88fr); gap: 14px; } }
@media (max-width: 760px) { .why-annong { padding: 18px 0 16px; } .cooperation-process { padding: 17px 0; } .global-market { padding: 12px 0 20px; } .compact-heading { margin-bottom: 12px; } .compact-heading h2 { font-size: 1.42rem; } .advantage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } .advantage-item { padding: 0 10px 3px; } .advantage-item:nth-child(2n) { border-right: 0; } .advantage-item:nth-child(3n), .advantage-item:nth-child(4) { border-right: 1px solid #dbeada; } .advantage-item:nth-child(6) { border-right: 0; } .advantage-item img { width: 42px; height: 42px; } .process-list { grid-template-columns: 1fr; gap: 9px; padding: 0 4px; } .process-step { padding: 7px 0; } .process-step:not(:last-child)::after { display: none; } .process-step img { width: 54px; height: 54px; } .process-step__copy { font-size: .7rem; } .global-market__grid { grid-template-columns: 1fr; gap: 0; } .global-market__visual { min-height: 295px; } .global-market__visual > img { left: 112px; width: calc(100% - 112px); } .global-market__copy { width: 145px; padding: 28px 0 0; } .inquiry-card { border-radius: 12px; padding: 24px 18px 18px; } .inquiry-card__fields { gap: 7px; } }
@media (max-width: 760px) { .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 10px; padding: 0; } .process-step { min-height: 60px; padding: 4px 8px; gap: 9px; } .process-step:last-child { grid-column: 1 / -1; width: 100%; justify-content: center; justify-self: stretch; } .process-step img { width: 48px; height: 48px; } .process-step__copy { font-size: .68rem; } .process-step__copy b { font-size: .78rem; } }
.home-catalogues { padding: 38px 0 44px; background: #f1f8ee; }
.home-catalogues__heading { text-align: center; margin-bottom: 22px; }
.home-catalogues__heading h2 { margin: 5px 0 8px; color: #084c2b; font-size: clamp(1.6rem, 2.2vw, 2.25rem); }
.home-catalogues__heading > p:last-child { margin: 0; color: #526d5b; line-height: 1.5; }
.home-catalogue { display: grid; grid-template-columns: 102px minmax(0, 1fr) auto; align-items: center; gap: 28px; max-width: 970px; margin: auto; padding: 26px 32px; border: 1px solid #dbe9dc; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(7, 63, 33, .06); }
.home-catalogue__icon { display: flex; align-items: center; justify-content: flex-start; border-right: 1px solid #dbe9dc; color: #c90000; }
.home-catalogue__icon svg { width: 70px; height: 80px; }
.home-catalogue__choice { min-width: 0; }
.home-catalogue__choice label { display: block; margin-bottom: 9px; color: #084c2b; font-weight: 700; }
.home-catalogue__choice select { display: block; width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #c7d5c8; border-radius: 5px; background: #fff; color: #254935; font: inherit; }
.home-catalogue__choice p { margin: 7px 0 0; color: #68766c; font-size: .83rem; line-height: 1.4; }
.home-catalogue__download { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 7px; background: #148d30; color: white; font-weight: 700; text-decoration: none; white-space: nowrap; }
.home-catalogue__download:not(.is-disabled):hover { background: #087323; color: white; }
.home-catalogue__download svg { width: 22px; height: 22px; }
.home-catalogue__download.is-disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 760px) { .home-catalogues { padding: 30px 0; } .home-catalogue { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; padding: 20px; } .home-catalogue__icon svg { width: 48px; height: 60px; } .home-catalogue__download { grid-column: 1 / -1; width: 100%; box-sizing: border-box; } }