:root{--titleFontSize:60px;--descFontSize:38px}
.banner{min-height:500px;display:flex;width:100%;position:relative;justify-content:center;align-items:center;position:relative;z-index:6;padding:80px 0 80px;flex-direction:column;font-family:var(--pnr);overflow:hidden}
.banner.banner--round-bottom{height:1000px}
.banner.banner--round-bottom .bg{border-bottom-left-radius:50%;border-bottom-right-radius:50%}
.banner.banner--round-bottom .sustainability-banner__round-bottom-bg{width:100%;height:100%;position:absolute}
.banner .scrollDown{cursor:pointer;position:absolute;bottom:10px;left:50%;opacity:0;transform:translate(-50%,0);will-change:transform}
.transition .banner .scrollDown{transition:opacity .3s .8s ease}
.banner .playButton{cursor:pointer;opacity:1;z-index:1;display:block}
.banner .playButton.mobile{position:relative;left:unset;top:unset;transform:none !important;margin:20px auto 0;text-align:center;display:none}
.transition .banner .playButton{transition:opacity .6s .8s ease}
.banner .humanImage{position:absolute;bottom:unset;top:39%;left:0 !important;width:100% !important;pointer-events:none}
.transition .banner .humanImage{transition:bottom .8s ease,left .8s ease,width .8s ease}
.banner .humanImage img{width:100%}
.banner .textSection{display:flex;flex-direction:column;justify-content:center;width:100%;position:relative;padding:0 10%}
.banner .textSection .text{overflow:hidden;will-change:transform}
.banner .textSection .title{font-family:var(--pnb);font-size:var(--titleFontSize) !important;line-height:1.5;text-align:center;letter-spacing:-1px;color:#10293e;will-change:transform;margin:0}
.transition .banner .textSection .title{transition:transform .6s ease}
.banner .textSection .desc{font-family:var(--pnsb);font-size:var(--descFontSize) !important;line-height:1.5;text-align:center;color:#10293e;will-change:transform;margin:0 auto}
.transition .banner .textSection .desc{transition:transform .6s ease}
.circle-container{position:relative;display:flex;flex-direction:column;height:160px;width:160px;opacity:0}
.transition .circle-container{transition:opacity .3s ease}
.circle-container .circle{position:absolute;border-radius:50%;height:100%;width:100%;transform:rotate(0);will-change:transform}
.transition .circle-container .circle{transition:transform 1s ease}
.circle-container .circle:before{content:"";position:absolute;height:10px;width:10px;border-radius:50%;background-color:white;right:0;top:50%;transform:translate(50%,-50%);will-change:transform}
.transition .circle-container .circle:before{transition:transform .5s ease}
.circle-container .circle--1{z-index:10}
.circle-container .circle--1:before{background:#583981;height:19%;width:19%}
.circle-container .circle--2:before{background:#c13375;height:16%;width:16%}
.circle-container .circle--3:before{background:#ed7150;height:13%;width:13%}
.circle-container .circle--4:before{background:#ffc044;height:10%;width:10%}
.circle-container .circle--5:before{background:#468ed0;height:16%;width:16%}
.circle-container .circle--6:before{background:#0d919b;height:13%;width:13%}
.circle-container .circle--7:before{background:#a5c18e;height:10%;width:10%}
.videoOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:10;opacity:1;justify-content:center;align-items:center;overflow:hidden}
.videoOverlay .videoFrame{display:flex;justify-content:center;align-items:center;margin:0;height:100%;width:100%}
.videoOverlay .closeOverlay{position:absolute;top:20px;right:20px;background:#000;width:50px;height:50px;cursor:pointer;border-radius:50%}
.videoOverlay .closeOverlay:before,.videoOverlay .closeOverlay:after{content:'';background:#fff;width:60%;height:2px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);will-change:transform}
.videoOverlay .closeOverlay:before{transform:translate(-50%,-50%) rotate(-45deg);will-change:transform}
.transition .banner .humanImage{transition:bottom .5s ease,left .5s ease,width .5s ease,transform .5s ease}
.transition .circle-container{transition:opacity .3s ease}
.init .banner .scrollDown{opacity:1}
.init .banner .playButton{opacity:1}
.init .backgroundAnimation .banner img{transform:scale(1);will-change:transform}
.init .backgroundAnimation .banner img.valley{bottom:0}
.init .backgroundAnimation .banner img.img1{bottom:4%}
.init .backgroundAnimation .banner img.img2{bottom:6%}
.init .backgroundAnimation .banner img.img3{bottom:8%}
.init .backgroundAnimation .banner img.img4{bottom:16%}
.init .banner .humanImage{bottom:-68%;left:35.5%;width:65%}
.banner .circle-container{opacity:1;transform:translate(50%,0);height:266px;justify-content:center;align-items:center}
.banner .circle-container img{width:auto;height:100%}
.init .banner .circle-container .circle--2{transform:rotate(30deg)}
.init .banner .circle-container .circle--3{transform:rotate(60deg)}
.init .banner .circle-container .circle--4{transform:rotate(90deg)}
.init .banner .circle-container .circle--5{transform:rotate(-30deg)}
.init .banner .circle-container .circle--6{transform:rotate(-60deg)}
.init .banner .circle-container .circle--7{transform:rotate(-90deg)}
.init .banner .textSection .desc,.init .banner .textSection .title{transform:translate(0,0)}
@media only screen and (min-width:1921px){.banner{max-height:1080px}
.init .banner .humanImage{top:430px;left:35.5%;width:65%}
}
@media only screen and (max-width:1792px){.banner .humanImage{bottom:-111%;left:32%}
.init .banner .humanImage{bottom:-83%;width:70%;left:35.5%}
}
@media only screen and (max-width:1680px){.banner .textSection{margin:60px 0 0}
.banner .humanImage{bottom:-111%;left:32.3%}
.init .banner .humanImage{bottom:-72%;left:37%;width:63%}
}
@media only screen and (max-width:1600px){.banner .humanImage{bottom:-123%}
.init .banner .humanImage{bottom:-81%;left:37%;width:63%}
}
@media only screen and (max-width:1536px){.banner .humanImage{bottom:-111%}
.init .banner .humanImage{bottom:-72%}
}
@media only screen and (max-width:1440px){.banner .textSection{margin:40px 0 0}
.init .banner .humanImage{left:36%}
}
@media only screen and (max-width:1366px){.banner .humanImage{bottom:-123%}
.init .banner .humanImage{bottom:-94%;width:63%;left:37%}
.banner .textSection .title{font-size:calc(var(--titleFontSize)/1.5) !important;line-height:1.5}
.banner .textSection .desc{font-size:calc(var(--descFontSize)/1.5) !important}
.textSection.pgTitle{width:46%}
.banner .circle-container{width:160px;height:160px}
.init .backgroundAnimation .banner img.img2{bottom:0}
.init .backgroundAnimation .banner img.img4{bottom:0}
.banner{padding:60px 0 60px}
.banner .textSection{margin:40px 0 0}
.banner .scrollDown img{width:28px}
.banner .playButton img{width:47px}
.init .banner .circle-container{height:200px;align-items:flex-end;display:flex}
.init .banner .circle-container img{height:100%;width:auto;align-items:flex-end;justify-content:center}
}
@media only screen and (max-width:1344px){.textSection.pgTitle{width:46%}
.banner .humanImage{bottom:-110%}
.init .banner .humanImage{bottom:-80%}
}
@media only screen and (max-width:1280px){.banner .humanImage{bottom:-130%}
.init .banner .humanImage{bottom:-85%}
.textComponent{margin:130px auto}
.textSection.pgTitle{width:48%}
}
@media only screen and (max-width:1280px) and (max-height:720px){.banner .humanImage{bottom:-138%}
.init .banner .humanImage{bottom:-93%}
.banner .circle-container{width:120px;height:120px}
.textSection.pgTitle{width:48%}
}
@media only screen and (max-width:1152px){.banner .humanImage{bottom:-110%}
.textSection.pgTitle{width:53%}
.init .banner .humanImage{bottom:-80%}
.banner .humanImage{bottom:-124%}
}
@media only screen and (max-width:1366px) and (max-height:1024px) and (orientation:landscape){.init .banner .humanImage{bottom:-60%;width:75%;left:33%}
.banner .textSection{margin:40px 0 0}
}
@media only screen and (max-width:1024px) and (max-height:1366px){.banner{max-height:65vh}
.init .banner .humanImage{bottom:-71%;width:73%;left:34%}
.textSection.pgTitle{width:60%}
.sustainability .textComponent.netZero{max-width:100%;margin:170px auto 0}
.banner .playButton{top:45%}
}
@media only screen and (max-width:768px) and (max-height:1024px) and (orientation:portrait){.banner{max-height:100vh}
.textSection.pgTitle .circle-container{display:none}
.textSection.pgTitle{margin:135px 0 0;width:82%}
.init .banner .humanImage{width:108%;left:26%;bottom:unset !important;top:44%}
.init .backgroundAnimation .banner img.img2{bottom:-28%}
}
@media only screen and (max-width:1280px) and (max-height:800px) and (orientation:landscape){.init .banner .humanImage{bottom:unset;top:45%}
.init .banner .playButton{top:53%}
}
@media only screen and (max-width:1152px) and (max-height:720px) and (orientation:landscape){.init .banner .humanImage{bottom:unset;top:57%}
.init .banner .playButton{top:68%}
}
@media only screen and (max-width:1024px) and (max-height:768px) and (orientation:landscape){.banner{max-height:unset}
.init .banner .humanImage{bottom:-71%;width:83%;left:31.5%}
}
@media only screen and (max-width:800px) and (max-height:1280px){.textSection.pgTitle{width:90%;text-align:center}
.textSection.pgTitle .text{width:100%}
.init .backgroundAnimation .banner img.img2{bottom:-30%}
.init .banner .humanImage{bottom:-62%}
.sustainability .textComponent{max-width:unset}
.sustainability .textComponent .circle-container{display:none}
}
@media only screen and (max-width:962px) and (max-height:601px){.banner .textSection{margin:50px 0 0}
}
@media only screen and (max-width:1024px) and (max-height:600px){.textSection.pgTitle{width:66%;margin:35px 0 0}
.init .banner .humanImage{bottom:-106%}
}
@media only screen and (max-width:800px){.banner .playButton.mobile{display:block}
.banner .scrollDown{bottom:10px}
}
@media only screen and (max-width:767px){.banner{max-height:100vh}
.banner .textSection .title{line-height:1.5;margin:0}
.banner .textSection.pgTitle .text{padding:0 10%;transform:none}
.init .banner .humanImage{bottom:-79%;width:100%;left:28%}
.textSection.pgTitle{margin:40px 0 0;width:100%;text-align:center}
.textSection.pgTitle .text{width:100%}
.banner .textSection{width:100%}
}
@media only screen and (max-width:680px){.init .banner .humanImage{width:112%;left:25%}
}
@media only screen and (max-width:414px){.banner{max-height:100vh}
.banner .textSection .title{line-height:1.5;font-size:calc(var(--titleFontSize)/2) !important;margin:0 0 10px}
.banner .textSection .desc{font-size:calc(var(--descFontSize)/2) !important}
.banner .textSection .pgTitle .text{width:100%;margin:0 auto;padding:0 10%;display:flex;flex-direction:column;align-items:center}
.init .banner .humanImage{bottom:-310px;width:150%;left:17%}
}
@media only screen and (width:601px) and (height:962px) and (orientation:portrait){.init .banner .humanImage{bottom:-38%;width:130%;left:21%}
.textComponent .text .desc br{display:none}
}
@media only screen and (width:962px) and (height:601px) and (orientation:landscape){.init .banner .humanImage{bottom:-96%}
}
@media only screen and (max-width:600px) and (max-height:1024px) and (orientation:portrait){.init .banner .humanImage{top:42%;bottom:unset}
}
@media only screen and (max-width:393px) and (max-height:786px){.init .banner{max-height:664px}
.init .banner .humanImage{z-index:0}
.init .banner .textSection.pgTitle{z-index:1}
.sustainability .textComponent.firstSection{margin-top:50px}
}
@media only screen and (max-width:375px) and (max-height:812px){.init .banner .humanImage{z-index:0}
.init .banner .textSection.pgTitle{z-index:1}
.sustainability .textComponent.firstSection{margin-top:50px}
}
.banner_style2{display:flex;width:100%;height:740px;padding:0;position:relative;z-index:6;overflow:hidden;justify-content:flex-end;align-items:flex-end;font-family:var(--pnr)}
.banner_style2 .bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:100%}
.banner_style2 .bg img{height:100%;width:auto}
.banner_style2 .bg:after{position:absolute;top:0;left:0;content:'';width:100%;height:100%}
.banner_style2 .bg video{height:100%;width:100%}
.banner_style2 .textSection{height:100%;position:relative;width:50%;display:flex;align-items:center}
.banner_style2 .textSection .overlay,.banner_style2 .textSection .overlay:after{position:absolute;top:50%;left:0;width:1200px;height:1200px;background:#ec66d0;mix-blend-mode:multiply;opacity:.9;border-radius:50%;transform:translate(0,-50%);z-index:0}
.banner_style2 .textSection .overlay:after{content:'';background:#868085}
.banner_style2 .textSection .text{display:flex;flex-direction:column;margin:0 auto;width:69%;z-index:1}
.banner_style2 .textSection .title{text-align:left;transform:none;font-family:var(--pnb);font-size:var(--titleFontSize) !important;line-height:1.5;letter-spacing:.9px;color:#fff;letter-spacing:.5px}
.banner_style2 .textSection .subTitle{font-size:var(--descFontSize) !important;line-height:1.5;display:block;font-family:var(--pnsb);letter-spacing:1px}
.banner_style2 .textSection .desc{text-align:left;font-family:var(--pnr);font-size:var(--descFontSize) !important;line-height:1.5;letter-spacing:.25px;width:96%;color:#fff;padding:10px 0 0;letter-spacing:.25px}
.banner_style2 .playButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
@media only screen and (max-width:1600px){.banner.banner_style2{height:calc(100vh - 65px)}
}
@media only screen and (max-width:1440px){.banner_style2 .textSection .text{width:73%}
.banner_style2{max-height:540px}
}
@media only screen and (max-width:1366px){.banner_style2 .textSection .text{width:77%}
.banner_style2 .textSection .title{font-size:var(--titleFontSize) !important}
.banner_style2 .textSection .subTitle{font-size:var(--descFontSize) !important}
.banner_style2 .textSection .desc{font-size:calc(var(--descFontSize)/1.4) !important;line-height:1.5}
.banner_style2 .playButton img{width:60px}
}
@media only screen and (max-width:1024px) and (max-height:1366px) and (orientation:portrait){.banner_style2 .textSection .title{font-size:calc(var(--titleFontSize)1.5) !important}
.banner_style2 .textSection .subTitle{font-size:calc(var(--descFontSize)/1.4) !important}
}
@media only screen and (max-width:1024px) and (max-height:768px) and (orientation:landscape){.banner_style2 .textSection .title{font-size:calc(var(--titleFontSize)1.5) !important}
.banner_style2 .textSection .subTitle{font-size:calc(var(--descFontSize)/1.4) !important}
.banner_style2 .textSection .desc{font-size:calc(var(--descFontSize)/2) !important}
}
@media only screen and (max-width:800px){.banner.banner_style2{height:calc(100vh - 61px);flex-direction:column}
.banner_style2 .textSection{width:100%;height:50%}
.banner_style2 .textSection .title{font-size:calc(var(--titleFontSize)/1.8) !important;line-height:1.5}
.banner_style2 .textSection .text{width:90%}
.banner_style2 .textSection .subTitle{font-size:calc(var(--descFontSize)/1.4) !important}
.banner_style2 .textSection .desc{font-size:calc(var(--descFontSize)/2) !important;line-height:1.5;padding:0;margin:0}
.banner_style2 .playButton{position:absolute;top:50%;left:50%;transform:unset;width:60px;height:60px;margin:0;transform:translate(-50%,-50%)}
.banner_style2 .playButton img{width:100%}
.banner_style2 .textSection .overlay,.banner_style2 .textSection .overlay:after{width:200vw;height:150vw;left:50%;transform:translate(-50%,-50%);top:75%;border-radius:50% 50% 0 0}
.banner_style2 .textSection .overlay:after{top:50%}
}
@media only screen and (max-width:768px) and (max-height:1024px) and (orientation:portrait){.banner_style2 .textSection .overlay,.banner_style2 .textSection .overlay:after{width:200vw;height:200vw;top:-20%;transform:translate(-50%,0)}
.banner_style2 .textSection .overlay:after{top:0}
}
@media only screen and (max-width:767px){.banner_style2 .textSection .overlay,.banner_style2 .textSection .overlay:after{width:200vw;height:150vw;top:213%}
.banner_style2 .textSection .overlay:after{top:50%}
}
@media only screen and (max-width:680px){.banner_style2 .textSection .overlay{top:0}
.banner_style2 .textSection .overlay:after{top:0}
}
.banner_style2{display:flex;width:100%;height:740px;padding:0;position:relative;z-index:6;overflow:hidden;justify-content:flex-end;align-items:flex-end;font-family:var(--pnr)}
.banner_style2 .bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:100%}
.banner_style2 .bg img{height:100%;width:auto}
.banner_style2 .bg:after{position:absolute;top:0;left:0;content:'';width:100%;height:100%}
.banner_style2 .bg video{height:100%;width:100%}
.banner_style2 .textSection{height:100%;position:relative;width:50%;display:flex;align-items:center}
.banner_style2 .textSection .overlay,.banner_style2 .textSection .overlay:after{position:absolute;top:50%;left:0;width:1200px;height:1200px;background:#ec66d0;mix-blend-mode:multiply;opacity:.9;border-radius:50%;transform:translate(0,-50%);z-index:0}
.banner_style2 .textSection .overlay:after{content:'';background:#868085}
.banner_style2 .textSection .text{display:flex;flex-direction:column;margin:0 auto;width:69%;z-index:1}
.banner_style2 .textSection .title{text-align:left;transform:none;font-family:var(--pnb);font-size:3.3125rem;line-height:1.5;letter-spacing:.9px;color:#fff;letter-spacing:.5px}
.banner_style2 .textSection .subTitle{font-size:2.5rem;line-height:1.5;display:block;font-family:var(--pnsb);letter-spacing:1px}
.banner_style2 .textSection .desc{text-align:left;font-family:var(--pnr);font-size:1.75rem;line-height:1.5;letter-spacing:.25px;width:96%;color:#fff;padding:10px 0 0;letter-spacing:.25px}
.banner_style2 .playButton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
@media only screen and (max-width:1600px){.banner.banner_style2{height:calc(100vh - 65px)}
}
@media only screen and (max-width:1440px){.banner_style2 .textSection .text{width:73%}
.banner_style2{max-height:540px}
}
@media only screen and (max-width:1366px){.banner_style2 .textSection .text{width:77%}
.banner_style2 .textSection .title{font-size:3.125rem}
.banner_style2 .textSection .subTitle{font-size:2.375rem}
.banner_style2 .textSection .desc{font-size:1.5rem;line-height:1.5}
.banner_style2 .playButton img{width:60px}
}
@media only screen and (max-width:1152px){.banner_style2 .textSection .title{font-size:2.75rem}
.banner_style2 .textSection .subTitle{font-size:2.0625rem}
}
@media only screen and (max-width:1024px) and (max-height:1366px) and (orientation:portrait){.banner_style2 .textSection .title{font-size:2.4375rem}
.banner_style2 .textSection .subTitle{font-size:1.8125rem}
}
@media only screen and (max-width:1024px) and (max-height:768px) and (orientation:landscape){.banner_style2 .textSection .title{font-size:2.4375rem}
.banner_style2 .textSection .subTitle{font-size:1.8125rem}
.banner_style2 .textSection .desc{font-size:1.25rem}
}
@media only screen and (max-width:800px){.banner.banner_style2{height:calc(100vh - 61px);flex-direction:column}
.banner_style2 .textSection{width:100%;height:50%}
.banner_style2 .textSection .title{font-size:2.0625rem;line-height:1.5}
.banner_style2 .textSection .text{width:90%}
.banner_style2 .textSection .subTitle{font-size:1.53125rem}
.banner_style2 .textSection .desc{font-size:1.25rem;line-height:1.5;padding:0;margin:0}
.banner_style2 .playButton{position:absolute;top:50%;left:50%;transform:unset;width:60px;height:60px;margin:0;transform:translate(-50%,-50%)}
.banner_style2 .playButton img{width:100%}
.banner_style2 .textSection .overlay,.banner_style2 .textSection .overlay:after{width:200vw;height:150vw;left:50%;transform:translate(-50%,-50%);top:75%;border-radius:50% 50% 0 0}
.banner_style2 .textSection .overlay:after{top:50%}
}
@media only screen and (max-width:768px) and (max-height:1024px) and (orientation:portrait){.banner_style2 .textSection .overlay,.banner_style2 .textSection .overlay:after{width:200vw;height:200vw;top:0;transform:translate(-50%,0)}
.banner_style2 .textSection .overlay:after{top:0}
}
@media only screen and (max-width:767px){.banner_style2 .textSection .overlay,.banner_style2 .textSection .overlay:after{width:200vw;height:150vw;top:213%}
.banner_style2 .textSection .overlay:after{top:50%}
}
@media only screen and (max-width:680px){.banner_style2 .textSection .overlay{top:0}
.banner_style2 .textSection .overlay:after{top:0}
}