.shopping-list .top-banner{z-index:1;position:relative}.shopping-list .top-banner::before{content:'';position:absolute;background:linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.5) 52.19%, rgba(0,0,0,0) 100%);width:100%;height:74%;bottom:-1px;left:0;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);z-index:1}.shopping-list .top-banner .banner-tt{font-size:80px;line-height:84px;text-transform:uppercase;margin-bottom:10px}.shopping-list .top-banner .sub-tt{font-size:22px;line-height:26px}.shopping-list .top-banner img{display:block;width:100%;height:auto}.shopping-list .top-banner .box-ct{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);padding:20px;z-index:1;text-align:center;margin-top:40px;width:100%}@media (min-width:768px){.shopping-list .top-banner{overflow:hidden;height:calc(100vw * (400/1280));min-height:350px}.shopping-list .top-banner picture{display:block;width:100%;height:100%;position:relative}.shopping-list .top-banner img{width:100%;height:100%;object-fit:cover;object-position:center}}@media (min-width:861px){.visible-xs-860{display:none !important}}@media (max-width:767px){#content{padding-top:0}.shopping-list .top-banner .banner-tt{font-size:35px;line-height:37px;margin-bottom:15px}.shopping-list .top-banner .sub-tt{font-size:15px;line-height:18px}.shopping-list .top-banner .box-ct{margin-top:0;padding:20px 20px 22px}.shopping-list .top-banner::before{height:68%}}
.sec-list{padding:0 var(--space-ct) 60px;min-height:350px;position:relative;z-index:2}.sec-list .inn-card,.sec[data-temp=shopping] .inn-card{display:block}.sec-list .inn-list,.sec[data-temp=shopping] .inn-list,.sec-list .lists,.sec[data-temp=shopping] .lists{display:-ms-flexbox;display:-webkit-flex;display:flex;flex-wrap:wrap;max-width:var(--max-content);margin:0 auto 60px}.sec-list .card,.sec[data-temp=shopping] .card{width:25%;position:relative;cursor:pointer;overflow:hidden}.sec-list .card:hover .img-hover,.sec[data-temp=shopping] .card:hover .img-hover,.sec-list .card:hover .btn-link,.sec[data-temp=shopping] .card:hover .btn-link{visibility:visible;opacity:1}.sec-list .card picture,.sec[data-temp=shopping] .card picture{display:block;width:100%}.sec-list .card .card-logo,.sec[data-temp=shopping] .card .card-logo{display:block;width:auto;height:auto;max-height:100%;max-width:100%;padding:20px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.sec-list .card .card-box,.sec[data-temp=shopping] .card .card-box{display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;justify-content:center;flex-direction:column;position:absolute;width:100%;height:100%;top:0;left:0;z-index:2}.sec-list .card .card-box .sty-btn,.sec[data-temp=shopping] .card .card-box .sty-btn{position:absolute;top:auto;bottom:30px}.sec-list .card .card-box::before,.sec[data-temp=shopping] .card .card-box::before{content:'';position:absolute;background:linear-gradient(180deg, #000000 0%, rgba(0,0,0,0.5) 52.19%, rgba(0,0,0,0) 100%);height:calc(100% + 2px);width:calc(100% + 2px);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);bottom:-1px;left:-1px}.sec-list .card .img-hover,.sec[data-temp=shopping] .card .img-hover{width:100%;height:auto;display:block;visibility:hidden;opacity:0;transition:visibility 0s,opacity .5s linear}.sec-list .card .btn-link,.sec[data-temp=shopping] .card .btn-link{opacity:0;transition:visibility 0s,opacity .5s linear}.sec-list .box-more,.sec[data-temp=shopping] .box-more{text-align:center;margin-bottom:100px}.sec-list .list-title,.sec[data-temp=shopping] .list-title{z-index:1;font-size:30px;padding-left:20px;padding-right:20px}.sec-list .list-title .text,.sec[data-temp=shopping] .list-title .text{color:#fff;font-size:30px;line-height:34px;text-align:center;display:-webkit-box;max-height:136px;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}@media (min-width:768px) and (max-width:1120px){.sec-list .card,.sec[data-temp=shopping] .card{width:33.33%}}@media (max-width:767px){.sec-list{padding:0}.sec-list .inn-list{margin:0 auto 30px}.sec-list .card,.sec[data-temp=shopping] .card{width:33.33%}.sec-list .box-more,.sec[data-temp=shopping] .box-more{margin:0 auto 50px;width:120px}.sec-list .box-more .btn-more,.sec[data-temp=shopping] .box-more .btn-more{padding:0 10px}.sec-list .list-title,.sec[data-temp=shopping] .list-title{padding-left:10px;padding-right:10px}.sec-list .list-title .text,.sec[data-temp=shopping] .list-title .text{font-size:20px;line-height:24px;display:-webkit-box;max-height:96px;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}}