.sustainable-page { width:100%; height:100%; overflow:hidden; } .col-banner { width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center; } .col-banner .dim { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.2; background:#000000; } .col-banner .banner-text { position:absolute; color:white; left:50%; transform:translateX(-50%); line-height:80px; width:100%; margin:0 auto; display:block; text-align:center; } [lang=en] .col-banner .banner-text { font-size:64px; } [lang=th] .col-banner .banner-text { font-size:100px; } .chn .col-banner .banner-text { font-size:67px; } .col-banner picture, .col-banner img { width:100%; height:auto; } .filter-bar { font-size:0; display:flex; align-items:center; padding:28px 40px; height:80px; background:white; width:100%; } .filter-bar.fixed { position:fixed; top:0; left:0; z-index:97; } .filter-bar .ft-title { line-height:24px; align-items:flex-end; position:relative; top:-3px; } [lang=en] .filter-bar .ft-title { font-size:20px; } [lang=th] .filter-bar .ft-title { font-size:32px; } .chn .filter-bar .ft-title { font-size:21px; } .filter-bar .ft-desc { margin-left:12px; line-height:24px; color:#9B9B9B; } [lang=en] .filter-bar .ft-desc { font-size:13px; } [lang=th] .filter-bar .ft-desc { font-size:20px; } .chn .filter-bar .ft-desc { font-size:13px; } .filter-bar .wrap-filter { display:flex; margin-left:auto; } .sustainable-list { width:100%; height:100%; } .sustainable-list .wrap-sustainable { width:100%; height:100%; } .sustainable-list .sustainable-item { margin-bottom:10px; display:flex; height:100%; } .sustainable-list .sustainable-item:last-child { margin-bottom:0; } .sustainable-list .sustainable-item .col-img { width:56.25%; overflow:hidden; position:relative; } .sustainable-list .sustainable-item .col-img img { width:100%; height:100%; } .sustainable-list .sustainable-item .col-text { display:flex; justify-content:center; align-items:center; width:43.75%; padding:0 40px; } .sustainable-list .sustainable-item .col-text.fontwhite { color:white; } .sustainable-list .sustainable-item .col-text .text-wrap { max-width:360px; width:100%; display:flex; flex-direction:column; } .sustainable-list .sustainable-item .col-text .text-wrap .title { line-height:48px; display:-webkit-box; max-height:96px; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; visibility:visible; text-overflow:ellipsis; max-width:100%; } [lang=en] .sustainable-list .sustainable-item .col-text .text-wrap .title { font-size:31px; } [lang=th] .sustainable-list .sustainable-item .col-text .text-wrap .title { font-size:48px; } .chn .sustainable-list .sustainable-item .col-text .text-wrap .title { font-size:32px; } .sustainable-list .sustainable-item .col-text .text-wrap .count-product { line-height:20px; } [lang=en] .sustainable-list .sustainable-item .col-text .text-wrap .count-product { font-size:12px; } [lang=th] .sustainable-list .sustainable-item .col-text .text-wrap .count-product { font-size:18px; } .chn .sustainable-list .sustainable-item .col-text .text-wrap .count-product { font-size:12px; } .sustainable-list .sustainable-item .col-text .text-wrap .desc { margin-top:30px; line-height:24px; max-width:100%; } [lang=en] .sustainable-list .sustainable-item .col-text .text-wrap .desc { font-size:13px; } [lang=th] .sustainable-list .sustainable-item .col-text .text-wrap .desc { font-size:20px; } .chn .sustainable-list .sustainable-item .col-text .text-wrap .desc { font-size:13px; } .sustainable-list .sustainable-item .col-text .btn-discover { display:flex; align-items:center; height:42px; justify-content:center; line-height:22px; background:#141212; color:white; transition:height 0.1s,transform 0.3s,margin 0.3s,opacity 0.5s; padding:0 20px; min-width:140px; transform-origin:bottom; visibility:visible; margin-top:40px; opacity:1; max-height:42px; transform:scale(1); position:relative; overflow:hidden; } [lang=en] .sustainable-list .sustainable-item .col-text .btn-discover { font-size:13px; } [lang=th] .sustainable-list .sustainable-item .col-text .btn-discover { font-size:20px; } .chn .sustainable-list .sustainable-item .col-text .btn-discover { font-size:13px; } .sustainable-list .sustainable-item .col-text .btn-discover:hover:before { top:0; } .sustainable-list .sustainable-item .col-text .btn-discover:before { content:""; transition:top 300ms cubic-bezier(0.42, 0, 0.58, 1); position:absolute; top:100%; left:0; width:100%; height:100%; background:#4A4A4A; } .sustainable-list .sustainable-item .col-text .btn-discover .text { position:relative; z-index:1; } .sustainable-list .sustainable-item .col-text .btn-discover .text { z-index:1; } .sustainable-list .sustainable-item .col-text .btn-discover.white { position:relative; overflow:hidden; background:white; color:black; } .sustainable-list .sustainable-item .col-text .btn-discover.white:hover:before { top:0; } .sustainable-list .sustainable-item .col-text .btn-discover.white:before { content:""; transition:top 300ms cubic-bezier(0.42, 0, 0.58, 1); position:absolute; top:100%; left:0; width:100%; height:100%; background:#DFE1E5; } .sustainable-list .sustainable-item .col-text .btn-discover.white .text { position:relative; z-index:1; } .sustainable-list .wrap-loadmore { display:flex; justify-content:center; padding:60px 0; } .sustainable-list .wrap-loadmore .loadmore-btn { cursor:pointer; display:flex; align-items:center; padding:0 43px; line-height:22px; height:42px; background:black; color:white; } [lang=en] .sustainable-list .wrap-loadmore .loadmore-btn { font-size:13px; } [lang=th] .sustainable-list .wrap-loadmore .loadmore-btn { font-size:20px; } .chn .sustainable-list .wrap-loadmore .loadmore-btn { font-size:13px; } @media (min-width:1280px) { .sustainable-list .sustainable-item .col-text .btn-discover { transform:scale(0); max-height:0; opacity:0; margin:0; visibility:hidden; } .sustainable-list .sustainable-item:hover .col-text .btn-discover { visibility:visible; margin-top:40px; opacity:1; max-height:42px; transform:scale(1); } } @media (max-width:767px) { .col-banner .banner-text { line-height:50px; } [lang=en] .col-banner .banner-text { font-size:38px; } [lang=th] .col-banner .banner-text { font-size:60px; } .chn .col-banner .banner-text { font-size:40px; } .sustainable-list .sustainable-item { flex-wrap:wrap; } .sustainable-list .sustainable-item .col-img { order:1; width:100%; } .sustainable-list .sustainable-item .col-text { padding:40px 15px; order:2; width:100%; } .sustainable-list .sustainable-item .col-text .btn-discover { visibility:visible; margin-top:40px; opacity:1; max-height:42px; transform:scale(1); } .filter-bar { padding-left:15px; padding-right:15px; } }