/* #wrapBox */
#wrapBox {position:relative;z-index:2}
.wraprow {position:relative;padding:5vw 0}
.wraprow .bg {position:absolute;width:100%;height:100%;background:no-repeat 50% / cover;opacity:.3;top:0;left:0;z-index:-1}
:root {--primary:#d71920;--primary-dark:#b41017;--primary-soft:rgba(215,25,32,.09);--secondary:#242b34;--secondary-light:#34404e;--dark:#20252d;--text:#626a74;--text-light:#8b929b;--paper:#fff;--light:#f3f4f6;--light-2:#e9ebee;--line:rgba(32,37,45,.1);--line-light:rgba(255,255,255,.13);--shadow:0 26px 70px rgba(24,30,38,.11);--shadow-dark:0 28px 70px rgba(12,17,23,.22);--container:1480px;--section-space:120px}
body {color:var(--dark);font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;background:var(--paper)}
.wraprow {position:relative;width:100%}
.commonSection {position:relative;padding:var(--section-space) clamp(20px,5vw,90px)}
.commonContainer {position:relative;z-index:2;width:min(100%,var(--container));margin:0 auto}
.commonTitle {position:relative;max-width:790px;margin:0 0 52px}
.commonTitleCenter {margin-right:auto;margin-left:auto;text-align:center}
.commonTitle .titBox {margin-bottom:18px}
.commonTitleCenter .titBox {justify-content:center}
.commonTitleCenter .titBox::after {content:"";display:block;width:36px;height:2px;background:var(--primary)}
.commonTitle .mainTitle {margin:0;color:var(--dark);font-size:clamp(34px,3vw,54px);font-weight:800;line-height:1.35;letter-spacing:-.04em;text-wrap:balance}
.commonTitle .mainTitle em {color:var(--primary);font-style:normal}
.commonTitle .desc {max-width:680px;margin:22px 0 0;color:var(--text);font-size:17px;line-height:1.95;letter-spacing:.01em}
.commonTitleCenter .desc {margin-right:auto;margin-left:auto}
.titBox {position:relative;display:flex;align-items:center;gap:14px;margin:0 0 20px;color:var(--primary);font-size:14px;font-weight:700;line-height:1.5;letter-spacing:.22em}
.titBox::before {content:"";display:block;flex:0 0 auto;width:38px;height:2px;background:linear-gradient(90deg,var(--primary),#f04449)}
.h1tit {margin:0;color:var(--dark);font-size:clamp(28px,2.35vw,35px);font-weight:800;line-height:1.42;letter-spacing:-.035em;word-break:normal;overflow-wrap:break-word;text-wrap:balance}
.info article {color:var(--text);font-size:16px;line-height:1.92;letter-spacing:.01em}
.info article p {margin:0 0 17px}
.info article p:last-child {margin-bottom:0}
.info article strong {color:var(--dark);font-weight:700}
.info article img {max-width:100%;height:auto}
.info article ul,.info article ol {margin:18px 0;padding-left:1.5em}
.info article li {margin-bottom:8px}
.more {display:flex;margin-top:28px}
.more a {position:relative;display:inline-flex;align-items:center;min-height:56px;padding-left:26px;color:#fff;font-size:14px;font-weight:700;line-height:1;letter-spacing:.12em;text-decoration:none;background:linear-gradient(90deg,var(--primary),#e62930);border-radius:7px;box-shadow:0 14px 30px rgba(215,25,32,.15);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,background .35s ease}
.more a font {font:inherit}
.more a span {display:flex;align-items:center;justify-content:center;width:56px;align-self:stretch;margin-left:24px;color:#fff;background:linear-gradient(180deg,#2d3540,#20262e);transition:background .35s ease}
.more a svg {width:18px;height:18px;fill:currentColor;transform:rotate(-90deg)}
.more a:hover {color:#fff;background:linear-gradient(90deg,var(--primary-dark),var(--primary));box-shadow:0 18px 38px rgba(215,25,32,.21);transform:translateY(-2px)}
.more a:hover span {background: linear-gradient(
93deg, #2d3540, #20262e);}

/* #aboutBox */
#aboutBox,#aboutBox * {box-sizing:border-box}
#aboutBox {position:relative;padding:clamp(76px,6vw,118px) clamp(40px,5vw,92px);background:radial-gradient(circle at 91% 82%,rgba(215,25,32,.045),transparent 25%),radial-gradient(circle at 18% 16%,rgba(98,119,144,.07),transparent 29%),linear-gradient(135deg,#f3f5f7 0%,#eceef1 58%,#f8f8f9 100%);overflow:hidden;isolation:isolate}
#aboutBox::before {content:"ABOUT";position:absolute;top:15px;right:max(0vw,1rem);z-index:-1;color:rgba(34,39,46,.038);font-family:Arial,sans-serif;font-size:clamp(100px,13vw,15rem);font-weight:900;line-height:.88;letter-spacing:0.05em;white-space:nowrap;pointer-events:none}
#aboutBox::after {content:"";position:absolute;right: -8vw;bottom: -11vw;z-index:-1;width: 33vw;aspect-ratio:1;border:1px solid rgba(215,25,32,.08);border-radius:50%;box-shadow:0 0 0 52px rgba(215,25,32,.018),0 0 0 105px rgba(83,98,118,.022);pointer-events:none}
#aboutBox .aboutInner {position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(490px,1fr);align-items:center;gap:clamp(65px,6vw,70px);width:min(100%,var(--container));margin:0 auto}
#aboutBox .bg {position:absolute;top:0;bottom:0;left:0;z-index:0;width: 44vw;background:linear-gradient(135deg,#202832 0%,#2c3744 48%,#526174 100%);pointer-events:none;opacity:1}
#aboutBox .bg::before {content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:56px 56px;opacity:.6}
#aboutBox .bg::after {content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom,transparent,rgba(215,25,32,.9),transparent);box-shadow:0 0 18px rgba(215,25,32,.13)}
#aboutBox .aboutVisual {position:relative;z-index:2;min-width:0;padding-top:8px}
#aboutBox .aboutVisual::before {content:"";position:absolute;left:-115px;top:43%;width:230px;height:230px;border:1px solid rgba(255,255,255,.055);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.018);pointer-events:none}
#aboutBox .aboutVisual>.titBox {position:relative;margin:0 0 40px;padding-left:2px;color:#fff;font-size:1.75rem;letter-spacing:.15em;text-shadow:0 1px 7px rgba(0,0,0,.18)}
#aboutBox .aboutVisual>.titBox::before {background:linear-gradient(90deg,var(--primary),#ff4349);box-shadow:0 0 12px rgba(215,25,32,.25)}
#aboutBox .aboutVisual>.titBox::after {content:"";display:block;width:105px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent)}
#aboutBox .img {position:relative;width:100%;filter:drop-shadow(0 24px 50px rgba(15,20,27,.16))}
#aboutBox .img::before {content:"";position:absolute;top:-23px;left:-23px;z-index:-1;width:76%;aspect-ratio:1.35;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 55%);pointer-events:none}
#aboutBox .img::after {content:"";position:absolute;left:0;bottom:0;z-index:3;width:150px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--primary),#ef3b42);box-shadow:0 0 14px rgba(215,25,32,.2);pointer-events:none}
#aboutBox .img>div {position:relative;width:100%;aspect-ratio:4/3;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:10px;box-shadow:0 25px 58px rgba(15,20,27,.2),0 1px 0 rgba(255,255,255,.13) inset;overflow:hidden;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
#aboutBox .img>div::before {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 24%,transparent 70%,rgba(255,255,255,.035)),linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.04));pointer-events:none}
#aboutBox .img:hover>div {transform:scale(1.015)}
#aboutBox .aboutMilestones {position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:calc(100% - 50px);margin:-60px 0px 0px 25px}
#aboutBox .aboutMilestones .item {position:relative;min-width:0;padding:20px 18px 18px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,248,249,.96));border-top:3px solid var(--primary);border-radius:9px;box-shadow:0 16px 36px rgba(15,20,27,.1),0 1px 0 rgba(255,255,255,.75) inset;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
#aboutBox .aboutMilestones .item::before {content:"";position:absolute;top:0;right:0;width:48px;height:48px;background:linear-gradient(135deg,rgba(79,95,115,.09),transparent 70%)}
#aboutBox .aboutMilestones .item::after {content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px;background:linear-gradient(90deg,rgba(215,25,32,.16),transparent)}
#aboutBox .aboutMilestones .item:hover {transform:translateY(-4px);box-shadow:0 22px 44px rgba(15,20,27,.14),0 1px 0 rgba(255,255,255,.8) inset}
#aboutBox .aboutMilestones strong {display:block;margin-bottom:8px;color:var(--primary);font-family:Arial,sans-serif;font-size:18px;font-weight:800;line-height:1.3;letter-spacing:.02em;border-bottom:rgb(204 204 204 / 69%) 1px solid;padding-bottom:5px}
#aboutBox .aboutMilestones span {display:block;color:#68707a;font-size:13px;line-height:1.66}
#aboutBox .workframe {position:relative;z-index:4;min-width:0;padding:clamp(42px,2.7vw,59px);background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(249,250,251,.975));border:1px solid rgba(34,39,46,.055);border-top:3px solid var(--primary);border-radius:12px;box-shadow:0 24px 58px rgba(23,27,32,.1),0 1px 0 rgba(255,255,255,.9) inset;width: 100%;}
#aboutBox .workframe::before {content:"\201C";position:absolute;top:17px;left:31px;color:rgba(37,40,45,.1);font-family:Georgia,serif;font-size:49px;font-weight:700;line-height:1;pointer-events:none}
#aboutBox .workframe::after {content:"";position:absolute;top:24px;right:21px;width:58px;height:58px;border-top:1px solid rgba(215,25,32,.18);border-right:1px solid rgba(83,98,118,.2);pointer-events:none}
#aboutBox .workframeLabel {display:flex;align-items:center;gap:12px;margin:10px 0 17px;color:var(--primary);font-family:Arial,sans-serif;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.24em}
#aboutBox .workframeLabel::before {content:"";width:36px;height:2px;background:linear-gradient(90deg,var(--primary),#ef3b42)}
#aboutBox .h1tit {max-width:620px;margin:0 0 23px;color:#20252d;font-size:2.4rem}
#aboutBox .info {position:relative}
#aboutBox .info article {max-width:650px;color:#656d77;line-height:1.92}
#aboutBox .info article p:first-child {color:#343a42}
#aboutBox .info article .aboutLead {color:#262c34;font-size:17px;font-weight:500;line-height:1.9}
#aboutBox .info::after {content:"";position: absolute;display:block;width:180px;height:1px;margin-top: 20px;background:linear-gradient(90deg,rgba(215,25,32,.24),rgba(83,98,118,.12),transparent);right: 0;bottom: 25px;}
#aboutBox .more {margin-top:24px}
#aboutBox .plant {position:absolute;right:-40px;bottom:-65px;z-index:1;width:min(205px,13vw);opacity:.035;filter:grayscale(1) brightness(.95);pointer-events:none}
#aboutBox .plant img {display:block;width:100%;height:auto}
#aboutBox .fixTxt {position:absolute;top:1%;left:24px;z-index:2;width:17vw;opacity:.07;filter:grayscale(1) brightness(.95);pointer-events:none}
#aboutBox .fixTxt img {display:block;width:100%;height:auto}

/* #productBox */
#productBox,#productBox * {box-sizing:border-box}
#productBox {position:relative;padding:clamp(90px,7vw,145px) clamp(30px,5vw,90px);color:#fff;background:linear-gradient(135deg,#202832 0%,#2a3542 48%,#364352 100%);overflow:hidden;isolation:isolate}
#productBox::before {content:"PRODUCT";position:absolute;top:15px;right:-25px;z-index:-1;color:rgba(255,255,255,.025);font-family:Arial,sans-serif;font-size:clamp(110px,15vw,260px);font-weight:900;line-height:.9;letter-spacing:-.07em;white-space:nowrap;pointer-events:none}
#productBox::after {content:"";position:absolute;left:-230px;bottom:-310px;z-index:-1;width:620px;aspect-ratio:1;border:1px solid rgba(255,255,255,.045);border-radius:50%;box-shadow:0 0 0 65px rgba(255,255,255,.016),0 0 0 130px rgba(215,25,32,.018);pointer-events:none}
#productBox .bg {position:absolute;inset:0;z-index:-2;background-position:center;background-repeat:no-repeat;background-size:cover;opacity:.14;pointer-events:none}
#productBox .bg::before {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,32,41,.97),rgba(34,43,54,.9) 55%,rgba(41,51,64,.92))}
#productBox .bg::after {content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:58px 58px;opacity:.55}
#productBox .workframe {position:relative;z-index:2;width:min(100%,var(--container));margin:0 auto}
#productBox .producttitBox {max-width:780px}
#productBox .titBox {margin-bottom:17px;color:#fff;font-size:14px;letter-spacing:.23em}
#productBox .titBox::before {background:linear-gradient(90deg,#d71920,#ff4349);box-shadow:0 0 12px rgba(215,25,32,.3)}
#productBox .titBox::after {content:"";display:block;width:90px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.28),transparent)}
#productBox .productMainTitle {max-width:760px;color:#fff;font-size:clamp(36px,3.7vw,62px);font-weight:800;line-height:1.25;letter-spacing:-.045em;text-wrap:balance}
#productBox .productDesc {max-width:650px;margin-top:20px;color:rgba(255,255,255,.62);font-size:16px;line-height:1.9;letter-spacing:.02em}
#productBox .productHead {display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:50px}
#productBox .producttitBox {flex:1;min-width:0;max-width:780px}
#productBox .productNavWrap {display:flex;align-items:center;gap:18px;flex:0 0 auto;padding-bottom:3px}
#productBox .productNavLabel {display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
#productBox .productNavLabel span {color:rgba(255,255,255,.72);font-family:Arial,sans-serif;font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.22em}
#productBox .productNavLabel small {color:rgba(255,255,255,.32);font-family:Arial,sans-serif;font-size:9px;font-weight:600;line-height:1.3;letter-spacing:.15em}
#productBox .productNav {position:relative;display:flex;gap:17px;flex:0 0 auto;padding:9px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:999px;box-shadow:0 16px 38px rgba(7,12,18,.13),0 1px 0 rgba(255,255,255,.05) inset;flex-direction:row;align-items:center}
#productBox .productNav::before {content:"";position:absolute;top:50%;left:50%;width:1px;height:11px;transform:translate(-50%,-50%)}
#productBox .productNav .slick-arrow {position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;color:rgba(255,255,255,.78);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:50%;cursor:pointer;box-shadow:0 8px 18px rgba(7,12,18,.11);overflow:hidden;transition:color .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease;left:unset;top:unset;bottom:unset;right:unset;transform:unset}
#productBox .productNav .slick-arrow::before {content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--primary,#d71920),#ef343b);border-radius:50%;transform:scale(0);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#productBox .productNav .slick-arrow svg {position:relative;z-index:2;width:18px;height:18px;fill:currentColor}
#productBox .productNav .slick-arrow:hover {color:#fff;border-color:rgba(215,25,32,.72);box-shadow:0 12px 24px rgba(215,25,32,.2);transform:translateY(-2px)}
#productBox .productNav .slick-arrow:hover::before {transform:scale(1)}
#productBox .productNav .slick-next:hover {transform:translateY(2px)}
#productBox .productSliderWrap {position:relative}
#productBox .productSlider {margin:0 -12px;padding:0;list-style:none}
#productBox .productSlider .slick-list {overflow:visible}
#productBox .productSlider .slick-track {display:flex}
#productBox .productSlider li {height:auto;padding:0 12px}
#productBox .productSlider li>div {height:100%}
#productBox .productCard {position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:330px;padding:32px 30px 28px;color:#fff;text-decoration:none;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);border-radius:17px;box-shadow:0 22px 50px rgba(7,12,18,.14);overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),background .45s ease,border-color .45s ease,box-shadow .45s ease}
#productBox .productCard::before {content:"";position:absolute;top:-95px;right:-85px;z-index:-1;width:235px;aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 30px rgba(255,255,255,.018),0 0 0 60px rgba(255,255,255,.012);transition:transform .6s ease,border-color .45s ease}
#productBox .productCard::after {content:"";position:absolute;right:0;bottom:0;z-index:-1;width:70%;height:52%;background:linear-gradient(135deg,transparent,rgba(255,255,255,.035));clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}
#productBox .numbertag {position:relative;display:flex;align-items:center;gap:13px;color:rgba(255,255,255,.46);font-family:Arial,sans-serif;font-size:14px;font-weight:700;line-height:1;letter-spacing:.14em}
#productBox .numbertag::after {content:"";display:block;width:60px;height:1px;background:linear-gradient(90deg,var(--primary,#d71920),transparent)}
#productBox .productCardContent {display:block;margin-top:auto;padding:50px 0 10px}
#productBox .productMeta {display:block;margin-bottom:17px;color:var(--primary,#d71920);font-family:Arial,sans-serif;font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.2em}
#productBox .productName {display:block;min-height:2.8em;color:#fff;font-size:clamp(24px,1.8vw,31px);font-weight:700;line-height:1.4;letter-spacing:-.025em;word-break:normal;overflow-wrap:break-word}
#productBox .productLine {display:block;width:44px;height:3px;margin:22px 0 18px;background:linear-gradient(90deg,var(--primary,#d71920),#f03c42);border-radius:99px;transition:width .45s ease}
#productBox .productText {display:block;color:rgba(255,255,255,.48);font-size:13px;line-height:1.7}
#productBox .productArrow {position:absolute;right:25px;bottom:25px;display:flex;align-items:center;justify-content:center;width:45px;height:45px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:50%;transition:color .35s ease,background .35s ease,border-color .35s ease,transform .35s ease}
#productBox .productArrow svg {width:18px;height:18px;fill:currentColor}
#productBox .productCard:hover {background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055));border-color:rgba(255,255,255,.23);box-shadow:0 30px 65px rgba(7,12,18,.23);transform:translateY(-9px)}
#productBox .productCard:hover::before {border-color:rgba(215,25,32,.22);transform:scale(1.08)}
#productBox .productCard:hover .productLine {width:82px}
#productBox .productCard:hover .productArrow {color:#fff;background:var(--primary,#d71920);border-color:var(--primary,#d71920);transform:translateX(4px)}
#productBox .productSlider li:nth-child(2n) .productCard {background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))}
#productBox .productSlider li:nth-child(3n) .productCard::before {top:auto;right:-85px;bottom:-100px}
#productBox .productFoot {position:relative;display:grid;grid-template-columns:minmax(300px,1.15fr) minmax(160px,.85fr) auto;align-items:center;gap:35px;margin-top:44px;padding:23px 25px;background:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);border-radius:16px;box-shadow:0 18px 45px rgba(7,12,18,.12),0 1px 0 rgba(255,255,255,.035) inset;overflow:hidden}
#productBox .productFoot::before {content:"";position:absolute;top:0;left:0;width:115px;height:2px;background:linear-gradient(90deg,var(--primary,#d71920),transparent)}
#productBox .productFoot::after {content:"";position:absolute;right:150px;bottom:-95px;width:190px;aspect-ratio:1;border:1px solid rgba(255,255,255,.035);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.012);pointer-events:none}
#productBox .productFootInfo {position:relative;z-index:2;display:flex;align-items:center;gap:19px;min-width:0}
#productBox .productFootShape {position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:62px;height:62px;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 7px rgba(255,255,255,.018)}
#productBox .productFootShape::before {content:"";position:absolute;inset:6px;border-top-color:var(--primary,#d71920);border-right-color:var(--primary,#d71920);border-radius:50%;transform:rotate(25deg)}
#productBox .productFootShape::after {content:"";position:absolute;top:50%;left:50%;height:1px;background:#fff;transform:translate(-50%,-50%)}
#productBox .productFootShape i {position:relative;display:block;width:5px;height:5px;background:var(--primary,#d71920);border-radius:50%;box-shadow:0 0 12px rgba(215,25,32,.7)}
#productBox .productFootCopy {min-width:0}
#productBox .productFootCopy strong {display:block;margin-bottom:7px;color:#fff;font-family:Arial,sans-serif;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.2em}
#productBox .productFootCopy p {margin:0;color:rgba(255,255,255,.46);font-size:13px;line-height:1.7;letter-spacing:.025em}
#productBox .productDots {position:relative;z-index:2;display:flex;align-items:center;min-width:0}
#productBox .productDots::before {content:"";display:block;position:absolute;right:0;min-width:35px;width:40%;height:1px;margin-right:22px;background:linear-gradient(90deg,rgb(255 255 255 / 0%),rgb(255 255 255 / 16%))}
#productBox .productDots .slick-dots {display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:0;padding:0;list-style:none;bottom:50%;z-index:55}
#productBox .productDots .slick-dots li {width:auto;height:auto;margin:0;padding:0}
#productBox .productDots .slick-dots button {display:block;width:25px;height:3px;padding:0;font-size:0;background:rgba(255,255,255,.17);border:0;border-radius:99px;cursor:pointer;transition:width .35s ease,background .35s ease}
#productBox .productDots .slick-dots button:before {display:none}
#productBox .productDots .slick-dots .slick-active button {width:55px;background:linear-gradient(90deg,var(--primary,#d71920),#ef3b42)}
#productBox .productFoot .more {position:relative;z-index:2;flex:0 0 auto;margin:0}
#productBox .productFoot .more a {box-shadow:0 14px 30px rgba(7,12,18,.18)}
#productBox .more {flex:0 0 auto;margin:0}
#productBox .more a {box-shadow:0 16px 35px rgba(7,12,18,.2)}

/* #discount_area */
#discount_area,#discount_area * {box-sizing:border-box}
#discount_area {position:relative;padding:clamp(95px,8vw,155px) clamp(30px,5vw,90px);background:radial-gradient(circle at 12% 18%,rgba(89,105,124,.08),transparent 30%),linear-gradient(135deg,#f5f6f7 0%,rgb(236 238 241 / 12%) 58%,#f8f8f9 100%);overflow:hidden;isolation:isolate}
#discount_area::before {content:"INSIGHTS";position:absolute;top: 20px;right:max(0vw,27px);z-index:-1;color:rgba(32,40,50,.038);font-size:clamp(100px,13vw,220px);font-weight:900;line-height:.9;letter-spacing:0.025em;white-space:nowrap;pointer-events:none}
#discount_area::after {content:"";position:absolute;right:-230px;bottom:-280px;z-index:-1;width:560px;aspect-ratio:1;border:1px solid rgba(215,25,32,.07);border-radius:50%;box-shadow:0 0 0 55px rgba(215,25,32,.018),0 0 0 110px rgba(79,95,115,.018);pointer-events:none}
#discount_area>.bg {position:absolute;top:0;right:0;bottom:0;z-index:-2;width: 60.5vw;background-position:center;background-repeat:no-repeat;background-size:cover;filter:grayscale(.35) saturate(.72);pointer-events:none;opacity: 0.1;}
#discount_area>.bg::before {content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f2f3f5 0%,rgba(242,243,245,.74) 20%,rgba(31,38,47,.06) 100%)}
#discount_area>.bg::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(30,36,44,.13))}
#discount_area>.text {position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(45px,6vw,90px);width: min(100%,1480px);margin:0 auto 52px;padding:0 4px 30px}
#discount_area>.text::after {content:"";position:absolute;right:0;bottom:0;left:0;height:1px;background:linear-gradient(90deg,rgba(215,25,32,.7) 0,rgba(215,25,32,.7) 72px,rgba(32,40,50,.14) 72px,rgba(32,40,50,.06) 68%,transparent 100%)}
#discount_area .textTitle {flex:1;min-width:0;max-width:790px}
#discount_area .titleEyebrow {display:flex;align-items:center;gap:14px;margin:0 0 18px;color:#d71920;font-family:Arial,"Noto Sans TC",sans-serif;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.22em}
#discount_area .titleEyebrow::before {content:"";flex:0 0 auto;width:38px;height:2px;background:linear-gradient(90deg,#d71920,#ef3b42);box-shadow:0 0 12px rgba(215,25,32,.18)}
#discount_area .titleEyebrow small {color:#8b929b;font-size:10px;font-weight:600;letter-spacing:.15em}
#discount_area .textTitle .h2 {max-width:760px;margin:0;color:#202832;font-size:clamp(38px,4.2vw,66px);font-weight:800;line-height:1.18;letter-spacing:-.05em;text-wrap:balance}
#discount_area .textTitle .h2 em {color:#d71920;font-style:normal}
#discount_area .textTitle p {max-width:100%;margin:20px 0 0;color:#69717b;font-size:16px;line-height:1.9;letter-spacing:.015em}
#discount_area .textDecor {position:relative;display:flex;align-items:center;justify-content:flex-end;gap:24px;flex:0 0 auto;width:min(100%,300px);min-height:150px;padding:18px 0 18px 34px;border-left:1px solid rgba(32,40,50,.12)}
#discount_area .textDecor::before {content:"";position:absolute;top:50%;right:-36px;width:165px;height:92px;border-top:1px solid rgba(32,40,50,.08);border-right:1px solid rgba(215,25,32,.14);border-radius:0 56px 0 0;transform:translateY(-50%);pointer-events:none}
#discount_area .textOrbit {position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:92px;height:92px;border:1px solid rgba(32,40,50,.14);border-radius:50%;box-shadow:0 0 0 11px rgba(32,40,50,.025)}
#discount_area .textOrbit::before {content:"";position:absolute;inset:7px;border:2px solid transparent;border-top-color:#d71920;border-right-color:#d71920;border-radius:50%;transform:rotate(27deg)}
#discount_area .textOrbit::after {content:"";position:absolute;top:50%;left:-23px;width:46px;height:1px;background:linear-gradient(90deg,transparent,#d71920);transform:translateY(-50%)}
#discount_area .textOrbit span {position:relative;z-index:2;color:#202832;font-family:Arial,sans-serif;font-size:13px;font-weight:800;line-height:1;letter-spacing:.14em}
#discount_area .textDecorInfo {position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;min-width:82px}
#discount_area .textDecorInfo span {display:flex;align-items:center;gap:9px;color:#68717c;font-family:Arial,sans-serif;font-size:10px;font-weight:700;line-height:1.3;letter-spacing:.18em}
#discount_area .textDecorInfo span::before {content:"";width:18px;height:1px;background:rgba(32,40,50,.2)}
#discount_area .textDecorInfo span:first-child {color:#d71920}
#discount_area .textDecorInfo span:first-child::before {background:#d71920}
#discount_area .twoBox {position:relative;z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width: min(100%,1480px);margin:0 auto}
#discount_area .boxx {position:relative;min-width:0;min-height:245px;background:#252d38;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 24px 58px rgba(20,27,35,.15);overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease}
#discount_area .boxx::before {content:"";position:absolute;top:0;left:0;z-index:3;width:120px;height:3px;background:linear-gradient(90deg,#d71920,transparent)}
#discount_area .boxx::after {content:"";position:absolute;right:-75px;bottom:-100px;z-index:2;width:220px;aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.018),0 0 0 56px rgba(255,255,255,.01);transition:transform .55s ease,border-color .45s ease}
#discount_area .boxx:nth-child(2)::before {background:linear-gradient(90deg,#8e9aaa,transparent)}
#discount_area .boxx>a {position:absolute;inset:0;z-index:6;display:block}
#discount_area .boxx .img {position:absolute;inset:0;z-index:0;overflow:hidden}
#discount_area .boxx .img::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,30,38,.94) 0%,rgba(26,33,42,.7) 55%,rgba(22,28,36,.38) 100%)}
#discount_area .boxx:nth-child(2) .img::after {background:linear-gradient(90deg,rgba(36,43,52,.92) 0%,rgba(45,53,64,.68) 55%,rgba(30,37,46,.42) 100%)}
#discount_area .boxx .img img {display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.55) saturate(.72);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .55s ease}
#discount_area .boxx .info {position:absolute;right:0;bottom:0;left:0;z-index:4;padding:36px 42px 34px}
#discount_area .boxx .info p {display:flex;align-items:center;gap:12px;margin:0 0 15px;color:rgba(255,255,255,.68);font-size:14px;font-weight:600;line-height:1.4;letter-spacing:.12em}
#discount_area .boxx .info p::before {content:"";display:block;width:28px;height:2px;background:#d71920}
#discount_area .boxx:nth-child(2) .info p::before {background:#a8b1bd}
#discount_area .boxx .info .h3 {display:flex;align-items:center;justify-content:space-between;gap:25px;color:#fff;font-family:Arial,"Noto Sans TC",sans-serif;font-size:clamp(27px,2.25vw,38px);font-weight:600;line-height:1.25;letter-spacing:-.035em}
#discount_area .boxx .info .h3 svg {flex:0 0 auto;width:23px;height:23px;fill:#fff;transition:transform .4s ease,fill .4s ease}
#discount_area .boxx:hover {border-color:rgba(255,255,255,.22);box-shadow:0 32px 70px rgba(20,27,35,.24);transform:translateY(-7px)}
#discount_area .boxx:hover::after {border-color:rgba(215,25,32,.2);transform:scale(1.08)}
#discount_area .boxx:hover .img img {filter:grayscale(.15) saturate(.9);transform:scale(1.055)}
#discount_area .boxx:hover .info .h3 svg {fill:#ef3037;transform:translateX(8px)}

/* #NewsBox */
#NewsBox {position:relative;z-index:4;width: min(100%,1480px);margin:36px auto 0;padding:30px 34px 30px 150px;background:rgba(255,255,255,.94);border:1px solid rgba(35,42,51,.07);border-radius:17px;box-shadow:0 25px 65px rgba(30,38,47,.1),0 1px 0 rgba(255,255,255,.85) inset;backdrop-filter:blur(12px);overflow:hidden}
#NewsBox::before {content:"LATEST INSIGHTS";top:0;left:50px;width:116px;color:#202832;font-size:12px;font-weight:700;line-height:1.55;letter-spacing:.2em;position:absolute;width:auto;height:100%;webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;text-align:center}
#NewsBox::after {content:"";position:absolute;top:30px;bottom:30px;left:100px;width:1px;background:linear-gradient(to bottom,transparent,rgba(32,40,50,.14) 15%,rgba(215,25,32,.3) 50%,rgba(32,40,50,.14) 85%,transparent)}
#NewsBox .newslist {position:relative;margin:0;padding:0}
#NewsBox .newslist::before {content:"NEWS";position:absolute;right:-10px;bottom:-14px;z-index:-1;color:rgba(32,40,50,.027);font-family:Arial,sans-serif;font-size:82px;font-weight:900;line-height:1;letter-spacing:-.06em;pointer-events:none}
#NewsBox .slick-list {overflow:hidden}
#NewsBox .slick-track {display:block}
#NewsBox .listbox {position:relative!important;min-height:98px;padding:0 15px;border-bottom:1px solid rgba(32,40,50,.08);transition:background .35s ease,border-color .35s ease}
#NewsBox .listbox:last-child {border-bottom:0}
#NewsBox .listbox::before {content:"";position:absolute;top:50%;left:0;width:3px;height:0;background:linear-gradient(180deg,#d71920,#ef3b42);border-radius:99px;transform:translateY(-50%);transition:height .35s ease}
#NewsBox .info_box {position:relative;display:grid;grid-template-columns:145px minmax(0,1fr) 44px;align-items:center;gap:25px;min-height:98px;padding:10px 0}
#NewsBox .info_box::after {content:"\2192";display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#47505b;font-family:Arial,sans-serif;font-size:18px;background:#f2f3f5;border:1px solid rgba(32,40,50,.07);border-radius:50%;transition:color .35s ease,background .35s ease,border-color .35s ease,transform .35s ease}
#NewsBox .info_box p {margin:0!important;color:#8a929c;font-family:Arial,sans-serif;font-size:13px;font-weight:600;line-height:1.5;letter-spacing:.045em}
#NewsBox .info_box .h3 {min-width:0;color:#303741;font-size:16px;font-weight:500;line-height:1.65;letter-spacing:.005em;transition:color .35s ease,transform .35s ease}
#NewsBox .text-clamp {display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#NewsBox .atag_item {position:absolute;inset:0;z-index:5;display:block}
#NewsBox .listbox:hover,#NewsBox .slick-current {background:linear-gradient(90deg,rgba(215,25,32,.045),rgba(255,255,255,0))}
#NewsBox .listbox:hover::before,#NewsBox .slick-current::before {height:46px}
#NewsBox .listbox:hover .info_box .h3,#NewsBox .slick-current .info_box .h3 {color:#d71920;transform:translateX(5px)}
#NewsBox .listbox:hover .info_box::after,#NewsBox .slick-current .info_box::after {color:#fff;background:#d71920;border-color:#d71920;transform:translateX(4px)}
#NewsBox .slick-slide {opacity:.55;transition:opacity .4s ease}
#NewsBox .slick-active {opacity:1}

/* #bookBox */
#bookBox {padding:8vw 0}
#bookBox .bg {width:calc(100% - 5vw);height:calc(100% - 10vw);box-shadow:0px 15px 15px rgba(26,26,51,.1);left:5vw;top:5vw;opacity:1}
#bookBox ul {font-size:0}
#bookBox ul li {position:relative;overflow:hidden;margin:30px;width:450px;display:inline-block}
#bookBox ul li h3 {position:absolute;padding:20px;width:calc(65% - 20px);background:#fff;right:0;bottom:0}
#bookBox ul li h3 a {height:70px;font-weight:400;font-size:20px;color:#434343;-webkit-line-clamp:2}

/* #youtubeBox */
#youtubeBox {position:relative;padding:3vw 0 6vw}
#youtubeBox .bg {width:630px;height:575px;background:url(/images/35/img-aboutBg.jpg) no-repeat 50% / cover;top:-1vw;left:auto;right:0;opacity:1}
#youtubeBox iframe {margin-top:40px;width:960px;height:576px}

/* @media */
@media screen and (min-width:1281px) {
  .wraprow .more:hover a font { color: #fff }
  .wraprow .more:hover a span { right: 30px }
  .wraprow .more:hover a:after { width: 252px }
  /* #customBox */
  #customBox .btn a#prevBtn:hover { left: 10px }
  #customBox .btn a#nextBtn:hover { right: 10px }
  /* #bookBox */
  #bookBox ul li:hover a.photo { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2) }
}
@media screen and (min-width:1101px) and (max-height:900px) {
  :root { --section-space: 90px }
  /* #aboutBox */
  #aboutBox { padding: 44px clamp(35px,4vw,70px) }
  #aboutBox .aboutInner { grid-template-columns: minmax(0,1.05fr) minmax(460px,.95fr); gap: clamp(45px,4vw,70px) }
  #aboutBox .aboutVisual { padding-top: 0 }
  #aboutBox .aboutVisual>.titBox { margin-bottom: 28px; font-size: 1.5rem; }
  #aboutBox .img { max-width: 650px; margin: 0 auto }
  #aboutBox .img>div { aspect-ratio: 16/10; border-radius: 8px }
  #aboutBox .aboutMilestones { width: calc(100% - 0px); margin: -18px 0 0 0px; }
  #aboutBox .aboutMilestones .item { padding: 14px 13px; border-radius: 7px }
  #aboutBox .aboutMilestones strong { margin-bottom: 5px; font-size: 16px }
  #aboutBox .aboutMilestones span { font-size: 12px; line-height: 1.5 }
  #aboutBox .workframe { padding: 33px 38px 35px; border-radius: 9px; }
  #aboutBox .workframe::before { top: 10px; left: 27px; font-size: 42px }
  #aboutBox .workframeLabel { margin: 8px 0 12px }
  #aboutBox .h1tit { margin-bottom: 16px; font-size: 31px; line-height: 1.35 }
  #aboutBox .info article { font-size: 14px; line-height: 1.72 }
  #aboutBox .info article p { margin-bottom: 10px }
  #aboutBox .info article .aboutLead { font-size: 15px; line-height: 1.72 }
  #aboutBox .info::after { margin-top: 15px }
  #aboutBox .more { margin-top: 17px }
  #aboutBox .more a { min-height: 48px }
  #aboutBox .more a span { width: 48px }
  /* #productBox */
  #productBox { padding-top: 65px; padding-bottom: 65px }
  #productBox .productMainTitle { font-size: 45px }
  #productBox .productDesc { margin-top: 14px; font-size: 14px }
  #productBox .productCard { min-height: 290px; padding: 25px 24px }
  #productBox .productCardContent { padding-top: 45px }
  #productBox .productName { font-size: 24px }
  #productBox .productLine { margin: 17px 0 14px }
  #productBox .productHead { margin-bottom: 34px }
  #productBox .productNavWrap { gap: 14px }
  #productBox .productNav { gap: 13px; padding: 7px }
  #productBox .productNav .slick-arrow { width: 43px; height: 43px }
  #productBox .productFoot { gap: 26px; margin-top: 30px; padding: 17px 20px }
  #productBox .productFootShape { width: 52px; height: 52px }
  #productBox .productFootCopy p { font-size: 12px }
}
@media screen and (max-width:1680px) {
  /* #customBox */
  #customBox .btn a { width: 45px }
  #customBox ul li .info { width: calc(90% - 90px) }
}
@media screen and (max-width:1470px) {
  /* #aboutBox */
  #aboutBox,#productBox,#discount_area { padding: 70px 100px; }
  #aboutBox .aboutInner { grid-template-columns: minmax(0,1fr) minmax(440px,.9fr); gap: 55px }
  #aboutBox .workframe { padding: 40px 35px; }
  #aboutBox .h1tit { font-size: 35px }
  /* #productBox */
  #productBox .productMainTitle { font-size: 50px }
  #productBox .productCard { min-height: 330px; padding: 28px 26px }
  #productBox .productName { font-size: 26px }
}
@media screen and (max-width:1300px) {
  /* #discount_area */
  #discount_area { padding-right: 45px; padding-left: 45px }
  #discount_area>.bg { width: 39% }
  #discount_area .boxx .info { padding: 32px 34px }
  /* #NewsBox */
  #NewsBox { width: calc(100% - 80px) }
}
@media screen and (max-width:1100px) {
  :root { --section-space: 100px }
  /* #aboutBox */
  #aboutBox { padding: 95px 35px 105px }
  #aboutBox .aboutInner { grid-template-columns: 1fr; gap: 55px; max-width: 840px }
  #aboutBox .bg { top: 0; bottom: auto; width: 75.5%; aspect-ratio: 1.55 }
  #aboutBox .aboutVisual>.titBox { color: #fff }
  #aboutBox .img>div { aspect-ratio: 16/9 }
  #aboutBox .aboutMilestones { width: calc(100% - 30px); margin: -22px 0 0 30px }
  #aboutBox .workframe { width: 94%; margin-left: auto; padding: 52px }
  #aboutBox .h1tit { max-width: 720px; font-size: 36px }
  #aboutBox .fixTxt { display: none }
  /* #productBox */
  #productBox { padding: 95px 35px }
  #productBox .productMainTitle { font-size: 43px }
  #productBox .productDesc { font-size: 15px }
  #productBox .productSlider .slick-list { overflow: hidden }
  #productBox .productCard { min-height: 310px }
  #productBox .productHead { align-items: center; gap: 35px; margin-bottom: 40px }
  #productBox .productNavLabel { display: none }
  #productBox .productFoot { grid-template-columns: minmax(260px,1fr) auto; gap: 25px }
  #productBox .productFootInfo { grid-column: 1/2 }
  #productBox .productDots { grid-column: 1/2 }
  #productBox .productFoot .more { grid-column: 2/3; grid-row: 1/3 }
}
@media screen and (max-width:1000px) {
  /* #discount_area */
  #discount_area { padding: 95px 35px 105px }
  #discount_area>.bg { width: 55%; opacity: .32 }
  #discount_area>.text { gap: 38px; margin-bottom: 40px }
  #discount_area .textTitle .h2 { font-size: 48px }
  #discount_area .textDecor { width: 255px; padding-left: 26px }
  #discount_area .textOrbit { width: 80px; height: 80px }
  #discount_area .twoBox { grid-template-columns: 1fr }
  #discount_area .boxx { min-height: 230px }
  /* #NewsBox */
  #NewsBox { width: 100%; padding: 92px 28px 25px }
  #NewsBox::before { top: 28px; left: 28px; width: auto; display: none; }
  #NewsBox::after { top: 65px; right: 28px; bottom: auto; left: 28px; width: auto; height: 1px; background: linear-gradient(90deg,#d71920,rgba(32,40,50,.12),transparent) }
  #NewsBox .newslist::before { font-size: 68px }
}
@media screen and (max-width:980px) {
  .wraprow { padding: 10vw 0 }
}
@media screen and (max-width:767px) {
  :root { --section-space: 78px }
  .commonSection { padding: var(--section-space) 20px }
  .commonTitle { margin-bottom: 36px }
  .commonTitle .titBox { margin-bottom: 14px; font-size: 12px }
  .commonTitle .mainTitle { font-size: 31px; line-height: 1.42 }
  .commonTitle .desc { margin-top: 16px; font-size: 15px; line-height: 1.85 }
  /* #aboutBox */
  #aboutBox { padding: 75px 20px 85px }
  #aboutBox::before { top: 22px; left: 16px; font-size: 82px }
  #aboutBox::after { display: none }
  #aboutBox .aboutInner { gap: 35px }
  #aboutBox .bg { width: 100%; aspect-ratio: 1.05 }
  #aboutBox .aboutVisual::before { display: none }
  #aboutBox .aboutVisual>.titBox { margin-bottom: 18px; font-size: 20px; }
  #aboutBox .aboutVisual>.titBox::after { width: 70px }
  #aboutBox .img::before { top: -15px; left: -15px; border-radius: 7px }
  #aboutBox .img>div { aspect-ratio: 4/3; border-radius: 8px }
  #aboutBox .aboutMilestones { grid-template-columns: 1fr; width: calc(100% - 0px); gap: 7px; margin: 35px auto 0; }
  #aboutBox .aboutMilestones .item { padding: 16px 18px; border-radius: 7px }
  #aboutBox .workframe { width: 100%; margin: 0; padding: 42px 28px; border-radius: 8px }
  #aboutBox .workframe::before { top: 15px; left: 22px; font-size: 45px }
  #aboutBox .workframe::after { width: 42px; height: 42px }
  #aboutBox .h1tit { margin-bottom: 20px; font-size: 28px; line-height: 1.5 }
  #aboutBox .info article { font-size: 15px; line-height: 1.85 }
  #aboutBox .info article .aboutLead { font-size: 16px; line-height: 1.85 }
  #aboutBox .more { margin-top: 25px }
  #aboutBox .plant { right: -45px; width: 140px; opacity: .025 }
  /* #productBox */
  #productBox { padding: 78px 20px 85px }
  #productBox::before { top: 25px; font-size: 85px }
  #productBox .titBox { margin-bottom: 13px; font-size: 12px; margin-left: 0; }
  #productBox .titBox::after { display: none }
  #productBox .productMainTitle { font-size: 34px; line-height: 1.35 }
  #productBox .productDesc { margin-top: 14px; font-size: 14px; line-height: 1.8 }
  #productBox .productSlider { margin: 0 -8px }
  #productBox .productSlider li { padding: 0 8px }
  #productBox .productCard { min-height: 285px; padding: 25px 23px; border-radius: 13px }
  #productBox .productCardContent { padding-top: 40px }
  #productBox .productName { font-size: 24px }
  #productBox .productText { padding-right: 45px }
  #productBox .productHead { align-items: center; gap: 22px; margin-bottom: 32px }
  #productBox .productNav { gap: 13px; padding: 7px }
  #productBox .productNav .slick-arrow { width: 44px; height: 44px }
  #productBox .productFoot { display: grid; grid-template-columns: 1fr auto; gap: 22px; margin-top: 32px; padding: 20px }
  #productBox .productFootInfo { grid-column: 1/3 }
  #productBox .productDots { grid-column: 1/2 }
  #productBox .productFoot .more { grid-column: 2/3; grid-row: 2 }
  #productBox .productFootShape { width: 54px; height: 54px }
  #productBox .productFootCopy strong { font-size: 11px }
  #productBox .productFootCopy p { font-size: 12px }
  #productBox .productDots::before { display: none }
  /* #discount_area */
  #discount_area { padding: 78px 20px 88px }
  #discount_area::before { top: 22px; font-size: 84px }
  #discount_area::after { display: none }
  #discount_area>.bg { width: 72%; opacity: .22; opacity: 0; }
  #discount_area>.text { display: block; margin-bottom: 32px; padding-bottom: 26px }
  #discount_area .titleEyebrow { margin-bottom: 14px; font-size: 11px }
  #discount_area .textTitle .h2 { font-size: 36px; line-height: 1.3 }
  #discount_area .textTitle p { margin-top: 15px; font-size: 14px; line-height: 1.8 }
  #discount_area .textDecor { justify-content: flex-start; gap: 22px; width: 100%; min-height: 0; margin-top: 26px; padding: 20px 0 0; border-top: 1px solid rgba(32,40,50,.1); border-left: 0 }
  #discount_area .textDecor::before { top: 20px; right: 0; width: 110px; height: 46px; transform: none }
  #discount_area .textOrbit { width: 66px; height: 66px }
  #discount_area .textDecorInfo { flex-direction: row; flex-wrap: wrap; gap: 10px 17px }
  #discount_area .twoBox { gap: 15px }
  #discount_area .boxx { min-height: 205px; border-radius: 12px }
  #discount_area .boxx .info { padding: 27px 25px 25px }
  #discount_area .boxx .info p { margin-bottom: 11px; font-size: 12px }
  #discount_area .boxx .info .h3 { font-size: 26px }
  #discount_area .boxx .info .h3 svg { width: 19px; height: 19px }
  /* #NewsBox */
  #NewsBox { margin-top: 25px; padding: 80px 20px 20px; border-radius: 13px }
  #NewsBox::before { top: 24px; left: 20px }
  #NewsBox::after { top: 58px; right: 20px; left: 20px }
  #NewsBox .listbox { min-height: 105px; padding: 0 8px }
  #NewsBox .info_box { grid-template-columns: 105px minmax(0,1fr) 38px; gap: 15px; min-height: 105px }
  #NewsBox .info_box::after { width: 36px; height: 36px }
  #NewsBox .info_box .h3 { font-size: 15px }
}
@media screen and (max-width:640px) {
  .wraprow .titBox { font-size: 55px; margin-left: 30px }
  .wraprow .titBox:before { width: 50px }
  .wraprow .titBox font:last-child { margin-top: -10px; display: block; text-align: right }
  /* #bookBox */
  #bookBox ul { text-align: center }
  #bookBox ul li,#bookBox ul li:nth-child(2n) { margin: 15px 0; width: 90% }
}
@media screen and (max-width:500px) {
  /* #productBox */
  #productBox { padding: 68px 20px 75px; }
  #productBox .productMainTitle { font-size: 30px }
  #productBox .productSlider { margin: 0 }
  #productBox .productSlider li { padding: 0; margin: 0 10px; }
  #productBox .productCard { min-height: 295px }
  #productBox .more a { min-height: 50px; padding-left: 20px }
  #productBox .more a span { width: 50px; margin-left: 17px }
  #productBox .productHead { display: flex; align-items: end; margin: 0 10px 20px; flex-direction: column; }
  #productBox .productNavWrap { align-self: end }
  #productBox .productNav { gap: 10px; padding: 6px }
  #productBox .productNav::before { height: 7px }
  #productBox .productNav .slick-arrow { width: 40px; height: 40px }
  #productBox .productFoot { display: block; padding: 19px 17px }
  #productBox .productFootInfo { gap: 15px }
  #productBox .productFootShape { width: 48px; height: 48px }
  #productBox .productDots { margin: 22px 0; padding-bottom: 0 }
  #productBox .productFoot .more { display: flex; justify-content: flex-end }
  /* #discount_area */
  #discount_area { padding: 68px 20px 75px; }
  #discount_area .titleEyebrow small { display: none }
  #discount_area .textTitle .h2 { font-size: 31px }
  #discount_area .textTitle p { font-size: 13px }
  #discount_area .textDecorInfo { gap: 8px 13px }
  #discount_area .boxx { min-height: 190px }
  #discount_area .boxx .info .h3 { font-size: 23px }
  /* #NewsBox */
  #NewsBox { padding: 75px 17px 17px }
  #NewsBox .listbox { min-height: 118px }
  #NewsBox .info_box { display: grid; grid-template-columns: 1fr 36px; gap: 8px 12px; min-height: 118px; padding: 16px 0 }
  #NewsBox .info_box p { grid-column: 1/2; font-size: 12px }
  #NewsBox .info_box .h3 { grid-column: 1/2; font-size: 14px; line-height: 1.6 }
  #NewsBox .info_box::after { grid-column: 2/3; grid-row: 1/3; align-self: center }
}
@media screen and (max-width:480px) {
  /* #aboutBox */
  #aboutBox { padding: 65px 15px 70px }
  #aboutBox .workframe { padding: 38px 22px }
  #aboutBox .h1tit { font-size: 25px }
  #aboutBox .info article { font-size: 14px }
  #aboutBox .aboutMilestones strong { font-size: 17px }
  .more a { min-height: 52px; padding-left: 21px }
  .more a span { width: 52px; margin-left: 18px }
}