a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*,:after,:before{box-sizing:border-box}body{font-family:Noto Sans TC,sans-serif;line-height:1.5}html{font-size:16px}img{vertical-align:bottom;max-width:100%;object-fit:cover}a{color:#212529;text-decoration:none}a,h1,h2,h3,h4,h5,h6,li,p,span{letter-spacing:.05em}h1,h2,h3,h4,h5,h6{font-weight:700}.container{padding-left:12px;padding-right:12px;margin:auto}.btn,.d-flex{display:flex}.btn{font-family:Noto Sans TC,sans-serif;line-height:1.5;font-size:16px;font-weight:500;letter-spacing:.05em;padding:8px 16px;border-radius:4px;text-wrap:nowrap;border:0;transition:.25s;justify-content:center;align-items:center;gap:8px;cursor:pointer}@media(min-width:768px){.btn{padding:12px 24px}}.btn .btn-icon svg{display:block;width:20px;height:20px}.btn .btn-text{display:block}.btn:has(.btn-icon){container-type:inline-size;container-name:button}.btn:has(.btn-icon) .btn-text{display:none}@container (min-width: 50px){.btn:has(.btn-icon) .btn-text{display:block}}.btn-dark{color:#fff;background-color:#212529}.btn-dark:hover{filter:opacity(80%);transition:filter .3s}.btn-white{color:#212529;background-color:#fff;border:1px solid #fff}@media(min-width:1200px){.btn-white{border:1px solid #212529}}.btn-white:hover{filter:opacity(50%);transition:filter .3s}.btn-primary{display:inline-block;color:#212529;background-color:#c0fa73}.btn-primary:hover{filter:opacity(80%)}.btn-outline-primary{color:#212529;border:1px solid #dee2e6;background-color:#fff;padding:12px 24px}.btn-outline-primary:hover{border:1px solid #6c757d}.btn-outline-primary.active{border:1px solid #212529}.btn-outline-primary.disabled{border:1px solid #dee2e6;color:#dee2e6;cursor:not-allowed}.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:32px 0 16px}@media(min-width:1200px){.pagination{padding:48px 0 32px}}.pagination .pagination-item{display:flex;justify-content:center;align-items:center;width:40px;height:40px;cursor:pointer}.pagination .pagination-item:hover{background-color:#f8f9fa}.pagination>li:first-child{margin-right:4px;font-size:20px;color:#6c757d}.pagination>li:last-child{margin-left:4px;font-size:20px}.pagination>li:nth-child(2){background-color:#c0fa73;font-weight:500}.breadcrumb{display:flex;align-items:center;font-size:14px;font-weight:500;margin-top:16px}.breadcrumb .breadcrumb-item{color:#6c757d}.breadcrumb li:last-child .breadcrumb-item{color:#212529;pointer-events:none}.breadcrumb li+li:before{content:"/";margin:0 8px;color:#dee2e6;font-weight:700}@media(min-width:768px){.breadcrumb{font-size:16px;margin-top:32px}.breadcrumb li+li:before{margin:0 12px}}.product-item-title{font-weight:700;margin-top:8px;margin-bottom:0}@media(min-width:768px){.product-item-title{margin-top:12px;margin-bottom:4px}}.product-item-price{font-weight:500}.product-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:8px;gap:8px}.grid-item img{width:100%;height:auto;display:block}.color-picker-card{width:64px;background-color:#fff;border:1px solid #fff;padding:0;cursor:pointer}.color-picker-card:hover{border:1px solid #6c757d}.color-picker-card.active{border:1px solid #212529}.color-picker-card.disabled{opacity:.6;cursor:not-allowed;filter:grayscale(80%)}.color-picker-card.disabled:hover{border:1px solid #fff}.color-label{color:#6c757d;font-weight:500;padding-top:4px;text-align:center}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}header{max-width:1320px;margin-left:auto;margin-right:auto;align-items:center;display:flex;padding:13px 0}header .p-3{padding:12px}@media(min-width:768px){header{padding:16px 0}}.nav-bar{width:100%;justify-content:space-between}.nav-bar,.nav-bar>:last-child{display:flex;align-items:center}.nav-bar>:last-child{font-size:24px;cursor:pointer}.nav-bar .nav-list{display:none;margin-left:48px}.nav-bar .nav-list li{padding:12px 0}.nav-bar .nav-list li+li{margin-left:40px}.nav-bar .nav-list .list-item{font-weight:500}.nav-bar .nav-list .list-item:hover{color:#57a203}@media(min-width:768px){.nav-bar .nav-list{display:flex;align-items:center}}.cta{display:flex;justify-content:center;align-items:center;background-color:#e8fec5;padding:24px}.cta .cta-text{font-size:20px;text-wrap:nowrap;color:#212529}@media(min-width:768px){.cta .cta-text{font-size:24px}}.cta .btn{margin-left:16px}footer{padding:32px 0;background-color:#f8f9fa}@media(min-width:768px){footer{padding:64px 0}}.footer-link{max-width:1320px;margin-left:auto;margin-right:auto;align-items:center;padding-bottom:24px;border-bottom:1px solid #dee2e6}.footer-link .footer-list{padding:0 12px}.footer-link .footer-list li{padding:12px 0}.footer-link .footer-list .list-item{font-weight:500}.footer-link .footer-list .list-item:hover{color:#57a203}@media(min-width:768px){.footer-link .footer-list{display:flex;align-items:center}.footer-link .footer-list li+li{margin-left:40px}.footer-link{display:flex;justify-content:space-between}}.copyright{padding-top:32px}.copyright p{text-align:center;font-size:14px;color:#6c757d}.copyright p+p{margin-top:4px}main{color:#212529}.index-banner{background-image:url(https://github.com/hexschool/2022-web-layout-training/blob/main/2025-week3-4/banner-sm.png?raw=true);background-repeat:no-repeat;background-size:cover;background-position:50%;min-height:480px;display:flex;align-items:center}.index-banner .index-banner-content{padding-left:24px}.index-banner h1,.index-banner p{font-size:48px;color:#fff;line-height:1.2}.index-banner p{font-size:20px;padding-top:8px}.index-banner .btn-primary{margin-top:32px;padding:12px 24px}@media(min-width:768px){.index-banner{height:800px;background-image:url(https://github.com/hexschool/2022-web-layout-training/blob/main/2025-week3-4/banner.png?raw=true)}.index-banner .index-banner-content{padding-left:200px}.index-banner h1{font-size:64px}.index-banner p{font-size:28px;padding-top:16px}.index-banner .btn-primary{margin-top:48px}}.index-new-products{max-width:1320px;margin-left:auto;margin-right:auto;padding:40px 0;display:grid;justify-content:center;align-items:center}.index-new-products .title-group{display:grid;grid-gap:8px;gap:8px;margin-bottom:24px}.index-new-products .sub-title,.index-new-products .title{font-size:32px;line-height:1.2;text-align:center}.index-new-products .sub-title{font-size:24px}@media(min-width:1200px){.index-new-products{padding:64px 0}.index-new-products .title-group{gap:12px;margin-bottom:32px}.index-new-products .title{font-size:48px}.index-new-products .sub-title{font-size:32px}}.index-new-products .new-product-list{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:12px;grid-row-gap:24px;padding-left:12px;padding-right:12px}.index-new-products .new-product-list h6{line-height:1.2;padding-top:8px}.index-new-products .new-product-list p{font-weight:500}@media(min-width:768px){.index-new-products .new-product-list{grid-column-gap:24px;grid-row-gap:40px}.index-new-products .new-product-list h6{font-size:20px;padding-top:12px}}.index-top-sale{max-width:1320px;margin-left:auto;margin-right:auto;align-items:center;padding-top:40px;padding-bottom:40px}.index-top-sale h2{font-size:24px;line-height:1.2;padding:6px 0 6px 12px;margin-bottom:12px}.index-top-sale .product-slider-container{padding-left:12px}@media(min-width:768px){.index-top-sale{padding-top:64px;padding-bottom:64px}}.index-top-sale .slider-card{position:relative}.index-top-sale .top-sale-tag{display:inline-block;font-size:14px;font-weight:500;color:#57a203;background-color:#f5fee7;padding:8px 12px;position:absolute;top:0;left:0}.index-cta{margin-top:24px;margin-bottom:24px;padding-top:64px;padding-bottom:64px;display:grid;justify-content:center;align-items:center;background-image:url(https://github.com/hexschool/2022-web-layout-training/blob/main/2025-week3-4/banner-co-branded-sm.png?raw=true);background-repeat:no-repeat;background-size:auto;position:relative;overflow:hidden}.index-cta .cta-title-group{display:grid;grid-gap:8px;gap:8px;text-align:center;font-size:32px;color:#fff;line-height:1.2}.index-cta .cta-title-group .cta-mark{font-size:28px;color:#c0fa73}.index-cta .slogan{text-align:center;font-size:20px;color:#fff;line-height:1.2;padding-top:16px}.index-cta .sub-slogan{padding-top:24px;text-align:center;color:#adb5bd}.index-cta .sub-slogan .slogan-breakpoint{display:block;padding-top:4px}.index-cta .sub-slogan .slogan-breakpoint .sign{display:none}.index-cta .cta-button{padding-top:32px;text-align:center}.index-cta .cta-button .btn-primary{padding:12px 24px}@media(min-width:768px){.index-cta{height:470px}}@media(min-width:1200px){.index-cta{height:470px;background-size:cover;margin-top:48px;margin-bottom:48px;padding-top:100px;padding-bottom:100px;background-image:url(https://github.com/hexschool/2022-web-layout-training/blob/main/2025-week3-4/banner-co-branded.png?raw=true)}.index-cta .cta-title-group{display:flex;justify-content:center;align-items:center;gap:24px}.index-cta .cta-title-group .cta-title{font-size:48px}.index-cta .cta-title-group .cta-mark{font-size:40px}.index-cta .slogan{font-size:32px}.index-cta .sub-slogan{font-size:20px;display:flex;justify-content:center;align-items:center;padding-top:32px}.index-cta .sub-slogan .slogan-breakpoint{padding-top:0;display:inline-block}.index-cta .sub-slogan .slogan-breakpoint .sign{display:inline}.index-cta .cta-button{padding-top:48px}}.index-cta:before{content:"";display:block;background-image:url(https://raw.githubusercontent.com/hexschool/2022-web-layout-training/14f2133cdd6d831a3acb833025093d4fcbffc381/2025-week3-4/star.svg);background-size:contain;background-repeat:no-repeat;position:absolute;width:48px;height:48px;top:32px;left:-20px}@media(min-width:1200px){.index-cta:before{top:68px;left:20%}}.index-cta:after{content:"";display:block;background-image:url(https://raw.githubusercontent.com/hexschool/2022-web-layout-training/14f2133cdd6d831a3acb833025093d4fcbffc381/2025-week3-4/sparkle.svg);background-size:contain;background-repeat:no-repeat;position:absolute;width:76px;height:64px;bottom:104px;right:-28px}@media(min-width:1200px){.index-cta:after{bottom:50px;right:20%}}.index-series{max-width:1320px;margin-left:auto;margin-right:auto;align-items:center;padding-top:40px;padding-bottom:40px}.index-series h2{font-size:24px;line-height:1.2;padding-bottom:16px}@media(min-width:768px){.index-series h2{font-size:32px}}.index-series .series-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px}.index-series .series-grid .series-item{position:relative;transition:display 5s;cursor:pointer}.index-series .series-grid .series-item img{object-fit:cover}.index-series .series-grid .series-item .image-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.index-series .series-grid .series-item:hover .image-overlay,.index-series .series-grid .series-item:hover .series-text{opacity:1;visibility:visible}.index-series .series-grid .series-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1.2;color:#fff;text-align:center;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.index-series .series-grid .series-text h6+h6{padding-top:8px}@media(min-width:768px){.index-series .series-grid .series-text{font-size:28px}}@media(min-width:1200px){.index-series .series-grid{grid-template-columns:repeat(4,1fr);gap:24px}}.index-idea{max-width:1320px;margin-left:auto;margin-right:auto;align-items:center;padding:40px 0 40px 12px;margin-bottom:24px}.index-idea h2{font-size:24px;line-height:1.2;padding-bottom:16px}@media(min-width:768px){.index-idea{padding:64px 12px;margin-bottom:48px}.index-idea h2{font-size:32px}}.index-idea .index-idea-bento{display:grid;grid-gap:8px;gap:8px;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto}.index-idea .index-idea-bento img{width:100%;height:100%;object-fit:cover}.index-idea .index-idea-bento img:nth-child(5),.index-idea .index-idea-bento img:nth-child(6){grid-column:span 2;grid-row:span 2}.products{max-width:1320px;margin-left:auto;margin-right:auto;align-items:center;color:#212529;margin-bottom:24px}@media(min-width:768px){.products{margin-bottom:48px}}.products-title{font-size:24px;font-weight:700;line-height:1.2;padding:10px 0;margin:12px 0}@media(min-width:768px){.products-title{font-size:28px;padding:7px 0;margin:24px 0}}.products-content{display:flex;gap:24px}.products-navbar{display:none;min-width:196px}@media(min-width:1200px){.products-navbar{display:block}}.products-list{display:grid;grid-gap:16px;gap:16px}.product-item{display:block;font-weight:500;padding:8px 0}.product-item:hover{background-color:#f8f9fa}.product-item:active{color:#57a203}.products-cards{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:12px;grid-row-gap:24px}@media(min-width:1200px){.products-cards{grid-template-columns:repeat(3,1fr);grid-column-gap:24px;grid-row-gap:48px}}.product-detail{max-width:1320px;margin-left:auto;margin-right:auto;align-items:center;color:#212529;align-items:start}@media(min-width:768px){.product-detail{display:flex}}.product-detail .cta{margin-top:24px}@media(min-width:768px){.product-detail .cta{margin-top:40px}}.detail-content{display:grid;grid-gap:32px;gap:32px}@media(min-width:768px){.detail-content{margin-left:24px;min-width:45%}}@media(min-width:1200px){.detail-content{min-width:526px}}.product-intro{padding-top:8px}.product-intro .product-detail-title{font-size:24px;font-weight:700;line-height:1.2;padding-top:8px}.product-intro .product-price{padding-top:12px;font-size:16px;color:#57a203}.product-intro .product-price span{font-size:14px;font-weight:400;padding-left:8px;text-decoration:line-through;color:#adb5bd}.product-intro .product-detail-intro{padding-top:12px;text-align:justify}@media(min-width:768px){.product-intro{padding-top:0}.product-intro .breadcrumb{margin-top:0}}.form-style{display:grid;grid-gap:24px;gap:24px}.product-color .product-color-picker{margin-top:8px;display:flex;gap:8px}.product-sizes .size-lists{margin-top:8px;display:grid;grid-gap:8px;gap:8px;grid-template-columns:repeat(2,auto);justify-content:start}@media(min-width:1200px){.product-sizes .size-lists{grid-template-columns:repeat(3,auto)}}.product-sizes .quantity{color:#d74f4f;font-size:14px;padding-top:8px}.button-group{display:grid;grid-gap:8px;gap:8px;grid-template-columns:1fr auto;grid-template-areas:"A B"}.button-group .btn-add-cart{grid-area:A}.button-group .btn-add-favorites{grid-area:B}@media(min-width:1200px){.button-group{display:grid;grid-template-columns:repeat(2,auto);grid-template-areas:"B A"}}.product-info .info-section{border-bottom:1px solid #dee2e6;padding:12px 0}.product-info .info-section h6{font-weight:500;margin-bottom:4px}.product-info .info-section p{color:#6c757d}.product-slider{max-width:1320px;margin-left:auto;margin-right:auto;align-items:center;padding:40px 0 40px 12px;margin-bottom:24px}.product-slider h5{font-size:20px;padding:8px 0;margin-bottom:16px;font-weight:700}@media(min-width:768px){.product-slider{padding:48px 0;margin-bottom:40px}.product-slider h5{font-size:24px;padding:10px 0}}.story-banner{height:240px;background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://github.com/hexschool/2022-web-layout-training/blob/main/2025-week3-4/hero-sm.png?raw=true);background-repeat:no-repeat;background-position:50%;background-size:cover;display:flex;justify-content:center;align-items:center}@media(min-width:1200px){.story-banner{height:400px;background-image:url(https://github.com/hexschool/2022-web-layout-training/blob/main/2025-week1/hero.png?raw=true)}}.story-banner .banner-text{text-align:center;color:#fff;line-height:1.2}.story-banner .banner-text h1{font-size:28px;margin-bottom:8px}.story-banner .banner-text h2{font-size:20px}@media(min-width:1200px){.story-banner .banner-text h1{font-size:40px}.story-banner .banner-text h2{font-size:28px}}.story{max-width:856px;margin-left:auto;margin-right:auto;align-items:center;color:#212529;padding:32px 12px}.story section+section{margin-top:32px;padding-bottom:32px;border-bottom:1px solid #dee2e6}@media(min-width:1200px){.story section+section{padding-bottom:48px;margin-top:48px}.story{padding:64px 12px}}.story h3{font-size:20px;font-weight:700;margin-bottom:16px}@media(min-width:1200px){.story h3{font-size:24px;margin-bottom:24px}}.quote{background-color:#f5fee7;padding:24px;border-radius:4px}.quote h3{color:#57a203;padding-bottom:12px}.quote p+p{padding-top:4px}@media(min-width:768px){.quote{text-align:center}}@media(min-width:1200px){.intro img{min-width:1076px;margin-left:-110px;margin-right:-110px}}.intro h3{margin-top:16px}@media(min-width:768px){.intro h3{margin-top:24px;font-size:24px}}.intro h4{font-weight:700;color:#57a203;padding-bottom:12px}.intro h4 span{display:block}@media(min-width:768px){.intro h4 span{display:inline}}@media(min-width:1200px){.intro h4{font-size:20px;padding-bottom:16px}}.intro p+p{margin-top:12px}@media(min-width:1200px){.intro p+p{margin-top:16px}}.history-list{list-style-type:disc;list-style-position:inside}.history-list li{padding-left:1.5em;text-indent:-1em}.history-list li::marker{font-size:8px;line-height:2}.history-list li+li,.idea li+li{margin-top:12px}.idea .idea-item{border-left:3px solid #dee2e6;padding-left:12px}.short-story li{list-style-image:url(/_next/static/media/arrow-up-right.f7e1699b.svg);margin-left:2em;padding:8px}.short-story .short-story-item{position:relative;color:#57a203;font-weight:500;padding-bottom:4px}.short-story li+li{margin-top:8px}.short-story .short-story-item:after{content:"";position:absolute;width:0;height:1px;background-color:#57a203;bottom:0;left:0;transition:width .3s ease}.short-story .short-story-item:hover:after{width:100%}