﻿.box{display:flex;justify-content: space-between;align-items: center;margin-bottom:20px;}
@media (min-width:769px){.box.box-fan{flex-direction: row-reverse;}}
.box>div.kche-wrap-width{width:53%;}
.kche-t46>.kche-flex-row-reverse{flex-direction: column;}
.kche-t46 .kche-item-img{max-width:100%;width:100%;}
.kche-t46 .kche-item-img img{max-width:60%;width:100%;border-radius: 15px;}
.box>div.imgbox{width:45%;display:flex;justify-content: space-between;gap:2%;}
.box>div.imgbox>div{flex:1;}
.box>div.imgbox>div img{width:100%;display:block;border-radius: 15px;}
.kche-t46>.kche-flex-row-reverse>.kche-flex-l>ul>li{margin:0;}
@media (max-width:768px){.box{flex-wrap:wrap;}
.box>div.kche-wrap-width,.box>div.imgbox{width:100%;}
.kche-t46 .kche-item-img img{max-width:100%;}}
.pagesbanner .pagesbanner-animate .p2{max-width:800px;margin:auto}



:root {--green:#2E7D32;--green-light:#4CAF50;--green-dark:#1B5E20;--green-pale:#E8F5E9;--accent:#81C784;--gray-50:#FAFAFA;--gray-100:#F5F5F5;--gray-200:#EEEEEE;--gray-300:#E0E0E0;--gray-600:#757575;--gray-800:#424242;--text:#212121;--text-light:#616161;--white:#FFFFFF;--shadow-sm:0 1px 3px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.1);--shadow-lg:0 10px 30px rgba(0,0,0,0.12);--radius-sm:8px;--radius:12px;--radius-lg:20px;--transition:0.3s cubic-bezier(0.4,0,0.2,1);}
.pagesbanner{position:relative;height:420px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.pagesbanner img {position:absolute;width:100%;height:100%;object-fit:cover;}
.pagesbanner::after {content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.55) 100%);z-index:1;}
.banner-content {position:relative;z-index:2;text-align:center;color:var(--white);padding:0 20px;}
.banner-content h1 {font-family:'Poppins',sans-serif;font-size:clamp(32px,5vw,56px);font-weight:800;line-height:1.2;margin-bottom:12px;letter-spacing:-0.5px;}
.banner-content p {font-size:clamp(16px,2vw,20px);opacity:0.9;max-width:600px;margin:0 auto;}
/* ===== Breadcrumbs ===== */.breadcrumbs {background:var(--white);border-bottom:1px solid var(--gray-200);padding:16px 0;}
.breadcrumbs .container {max-width:1280px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.breadcrumbs .path {font-size:14px;color:var(--gray-600);}
.breadcrumbs .path a {color:var(--green);transition:var(--transition)}
.breadcrumbs .path a:hover {color:var(--green-dark)}
.breadcrumbs .path span {color:var(--gray-600)}
.breadcrumbs h2 {font-family:'Oswald',sans-serif;font-size:20px;color:var(--green-dark);letter-spacing:0.5px;}
/* ===== Category Nav (sticky) ===== */.cat-nav-wrap {background:var(--white);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.cat-nav {max-width:1280px;margin:0 auto;padding:0 40px;display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.cat-nav::-webkit-scrollbar {display:none}
.cat-nav a {display:flex;align-items:center;gap:8px;padding:16px 20px;font-size:14px;font-weight:600;white-space:nowrap;color:var(--gray-600);border-bottom:3px solid transparent;transition:var(--transition);position:relative;}
.cat-nav a:hover {color:var(--green);background:var(--green-pale)}
.cat-nav a .nav-dot {width:8px;height:8px;border-radius:50%;background:var(--gray-300);transition:var(--transition);flex-shrink:0;}
.cat-nav a:hover .nav-dot,.cat-nav a.active .nav-dot {background:var(--green-light)}
main .container {max-width:1280px;margin:0 auto;padding:0 40px}
.section {padding:80px 0}
.section-alt {background:var(--gray-50)}
/* ===== App Section Layout ===== */.app-section {}
.app-grid {display:grid;grid-template-columns:2.5fr 1fr;gap:60px;align-items:center;}
.app-grid.reverse {direction:rtl}
.app-grid.reverse .app-text {direction:ltr}
.app-grid.reverse .app-image {direction:ltr}
.app-image .main-img {width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transition:var(--transition);}
.app-image .main-img:hover {transform:scale(1.02)}
.app-text {}
.app-tag {display:inline-block;background:var(--green-pale);color:var(--green-dark);font-size:12px;font-weight:700;padding:4px 14px;border-radius:20px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;}
.app-text h3 {font-family:'Oswald',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:600;color:var(--text);margin-bottom:16px;line-height:1.3;}
.app-text .desc {font-size:16px;color:var(--text-light);line-height:1.8;margin-bottom:24px;}
/* ===== Advantage Cards ===== */.adv-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.adv-card {display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);transition:var(--transition);box-shadow:var(--shadow-sm);}
.section-alt .adv-card {background:var(--white)}
.adv-card:hover {border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.adv-icon {width:42px;height:42px;border-radius:10px;background:var(--green-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;}
.adv-card:hover .adv-icon {background:var(--green-light);color:var(--white)}
.adv-info {flex:1;min-width:0}
.adv-info strong {display:block;font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;}
.adv-info span {font-size:12px;color:var(--gray-600);}
/* ===== Ideal For ===== */.ideal-for {display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap;}
.ideal-for .label {font-size:13px;font-weight:700;color:var(--green-dark);}
.ideal-for .tags {display:flex;flex-wrap:wrap;gap:6px;}
.ideal-for .tag {font-size:12px;padding:4px 12px;background:var(--gray-100);border-radius:20px;color:var(--gray-800);transition:var(--transition);}
.ideal-for .tag:hover {background:var(--green-pale);color:var(--green-dark);}
/* ===== Gallery Grid ===== */.gallery {margin-top:40px;}
.gallery-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gallery-col2 {grid-template-columns:repeat(2,1fr)}
.gallery-item {position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/3;transition:var(--transition);}
.gallery-item img {width:100%;height:100%;object-fit:contain;transition:transform 0.5s ease;}
.gallery-item:hover img {transform:scale(1.08)}
.gallery-item:hover {box-shadow:var(--shadow-lg)}
.gallery-item::after {content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,0.4) 100%);opacity:0;transition:var(--transition);}
.gallery-item:hover::after {opacity:1}
/* ===== Why Choose ===== */.why-choose {background:linear-gradient(135deg,var(--green-dark) 0%,#1a4a2e 100%);color:var(--white);padding:80px 0;}
.why-header {text-align:center;margin-bottom:60px;}
.why-header h2 {font-family:'Poppins',sans-serif;font-size:clamp(28px,4vw,42px);font-weight:700;margin-bottom:12px;}
.why-header p {font-size:18px;opacity:0.85;max-width:600px;margin:0 auto;}
.why-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.why-card {text-align:center;padding:36px 24px;background:rgba(255,255,255,0.08);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(10px);transition:var(--transition);}
.why-card:hover {background:rgba(255,255,255,0.15);transform:translateY(-6px);border-color:rgba(255,255,255,0.3);}
.why-icon {width:64px;height:64px;margin:0 auto 20px;background:rgba(255,255,255,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;transition:var(--transition);}
.why-card:hover .why-icon {background:var(--accent);transform:scale(1.1);}
.why-card h4 {font-family:'Oswald',sans-serif;font-size:20px;font-weight:600;margin-bottom:8px;}
.why-card p {font-size:14px;opacity:0.75;line-height:1.6;}
/* ===== FAQ Accordion ===== */.faq-section {padding:80px 0}
.faq-header {text-align:center;margin-bottom:48px;}
.faq-header h2 {font-family:'Poppins',sans-serif;font-size:clamp(28px,4vw,42px);font-weight:700;margin-bottom:8px;}
.faq-header p {color:var(--text-light);font-size:16px}
.faq-list {max-width:800px;margin:0 auto}
.faq-item {margin-bottom:12px;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;transition:var(--transition);}
.faq-item.active {border-color:var(--accent);box-shadow:var(--shadow-md)}
.faq-q {display:flex;justify-content:space-between;align-items:center;padding:20px 24px;cursor:pointer;background:var(--white);font-weight:600;font-size:16px;transition:var(--transition);user-select:none;gap:16px;}
.faq-item.active .faq-q {background:var(--green-pale);color:var(--green-dark);}
.faq-q .faq-icon {width:24px;height:24px;flex-shrink:0;position:relative;transition:transform var(--transition);}
.faq-item.active .faq-q .faq-icon {transform:rotate(45deg)}
.faq-q .faq-icon::before,.faq-q .faq-icon::after {content:'';position:absolute;background:var(--green);border-radius:2px;}
.faq-q .faq-icon::before {width:100%;height:2px;top:50%;left:0;transform:translateY(-50%);}
.faq-q .faq-icon::after {width:2px;height:100%;left:50%;top:0;transform:translateX(-50%);}
.faq-a {max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease;background:var(--white);}
.faq-item.active .faq-a {max-height:300px;padding:0 24px 20px;}
.faq-a p {font-size:15px;color:var(--text-light);line-height:1.8;}
.faq-a a {color:var(--green);font-weight:600;}
.faq-a a:hover {text-decoration:underline}
/* ===== CTA Section ===== */.cta-section {background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);color:var(--white);padding:70px 40px;text-align:center;border-radius:var(--radius-lg);margin:40px auto;max-width:1280px;position:relative;overflow:hidden;}
.cta-section::before {content:'';position:absolute;width:300px;height:300px;background:rgba(255,255,255,0.05);border-radius:50%;top:-80px;right:-80px;}
.cta-section::after {content:'';position:absolute;width:200px;height:200px;background:rgba(255,255,255,0.05);border-radius:50%;bottom:-60px;left:-60px;}
.cta-section>* {position:relative;z-index:1}
.cta-section h2 {font-family:'Poppins',sans-serif;font-size:clamp(26px,4vw,36px);font-weight:700;margin-bottom:12px;}
.cta-section p {font-size:17px;opacity:0.9;max-width:550px;margin:0 auto 30px;}
.cta-btn {display:inline-block;padding:16px 40px;background:var(--white);color:var(--green-dark);font-size:16px;font-weight:700;border-radius:50px;transition:var(--transition);box-shadow:0 4px 20px rgba(0,0,0,0.15);letter-spacing:0.5px;}
.cta-btn:hover {transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.25);background:#f0f0f0;}
/* ===== Section Divider ===== */.section-divider {width:60px;height:4px;background:linear-gradient(90deg,var(--green-light),var(--accent));border-radius:2px;margin-bottom:24px;}
/* ===== Responsive ===== */@media(max-width:1024px) {main .container {padding:0 20px}
.cat-nav {padding:0 24px}
.app-grid {grid-template-columns:1fr;gap:40px}
.app-grid.reverse {direction:ltr}
.why-grid {grid-template-columns:repeat(2,1fr)}
.section {padding:56px 0}
}
@media(max-width:768px) {.page-banner {height:280px}
.adv-grid {grid-template-columns:1fr}
.gallery-grid {grid-template-columns:repeat(2,1fr)}
.why-grid {grid-template-columns:1fr}
.why-card {padding:28px 20px}
.breadcrumbs .container {flex-direction:column;align-items:flex-start}
.section {padding:44px 0}
.cta-section {padding:50px 24px;border-radius:0;margin:0}
}
@media(max-width:480px) {.container {padding:0 16px}
.cat-nav a {padding:12px 14px;font-size:13px}
.gallery-grid {grid-template-columns:1fr}
.app-text h3 {font-size:22px}
}
/* ===== Animation ===== */.fade-up {opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease;}
.fade-up.visible {opacity:1;transform:translateY(0);}

main {overflow-x:hidden;font-family:'Lato',sans-serif;color:var(--text);line-height:1.7;background:var(--white);-webkit-font-smoothing:antialiased}
.breadcrumbs{margin-bottom:0}
.page-box>.container{max-width:100%;padding:0}
.adv-info strong {margin:revert-layer;line-height:1.4;}
.adv-card {align-items:center;}
.app-smtit {font-family:'Oswald',sans-serif;font-weight:500;margin-bottom:10px;font-size:var(--fontsize22);}
.section-alt {position:relative;}
.section-alt>* {position:relative;}
.section-alt:before {content:'';width:100vw;height:100%;background:var(--gray-50);position:absolute;top:0;left:50%;transform:translateX(-50%);}
.why-choose{position:relative;background:none}
.why-choose>* {position:relative;}
.why-choose:before {content:'';width:100vw;height:100%;background:linear-gradient(135deg,var(--green-dark) 0%,#1a4a2e 100%);position:absolute;top:0;left:50%;transform:translateX(-50%);}
.cta-btn:hover{color:var(--green-dark)}
@media (max-width:768px){.faq-header{margin-bottom:20px}
.faq-section,.why-choose{padding:40px 0}}