<div id="value-360-wrapper" class="value-360-wrapper" data-analytics-template-zone="360˚value in action">
<div class="awards-holder">
<h2 style="text-align: center;">Measuring our impact <br>in every direction</h2>
<video class="vid-submarquee" autoplay="" loop="" muted="">
<source src="/content/dam/system-files/acom/custom-code/iconic/about-our-company/Accenture-About-our-company-980x370.mp4" type="video/mp4">
</video>
<div class="awards-cube-wrap" style="margin: 140px auto;">
<div class="">
<div class="content one active">
<h2 class="text-center" style="font-size: 26px;">How we put 360° Value at the <br>heart of our business</h2>
</div>
</div>
<a href="/content/acom/hk-en/about/company/integrated-reporting.html" data-analytics-link-name="explore" data-analytics-link-type="cta">
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="37" viewBox="0 0 45 37" fill="none">
<path d="M35.6025 18.0024C35.6025 27.7254 27.7216 35.6073 18 35.6073C8.27844 35.6073 0.397461 27.7254 0.397461 18.0024C0.397461 8.27941 8.27844 0.397461 18 0.397461C27.7216 0.397461 35.6025 8.27941 35.6025 18.0024Z" stroke="#fff" stroke-width="0.794922"></path>
<path d="M18.8955 17.501H18.498V18.2959H18.8955V17.501ZM18.8955 18.2959L44.3296 18.2959V17.501L18.8955 17.501V18.2959Z" fill="#fff"></path>
<path d="M39.903 12.8799L39.6228 12.598L39.059 13.1585L39.3392 13.4404L39.903 12.8799ZM39.3392 13.4404L44.0495 18.1792L44.6132 17.6187L39.903 12.8799L39.3392 13.4404Z" fill="#fff"></path>
<path d="M39.5586 22.6621L44.3364 17.9009" stroke="#fff" stroke-width="0.794922" stroke-linecap="square"></path>
</svg>
explore
</a>
</div>
</div>
</div>
<style>
@media (max-width: 1300px){
.custom-html--sitecore .section-container.section-container-7b {
height: 150vh;
}
.custom-html--sitecore .section-container-6b {
height: 100vh;
}
.custom-html--sitecore .body-content .ui-container .row{
padding-top: 0;
}
}
@media (max-width: 400px){
#value-360-wrapper video.vid-submarquee {
padding: 0!important;
}
#value-360-wrapper .awards-holder .awards-cube-wrap{
top: 70px!important;
margin:0!important
}
#value-360-wrapper .awards-holder a {
bottom: auto!important;
margin: 70px auto 10px auto!important;
}
#value-360-wrapper .awards-holder{
height: 8vh!important;
}
h2.text-center {
font-size: 14px!important;
}
#value-360-wrapper .awards-holder .awards-cube-wrap .content h2 {
margin: -2em 0!important;
}
.custom-html--sitecore .section-container-6b .awards-box.awards-box-1.isactive, .custom-html--sitecore .section-container-6b .awards-box.awards-box-2.isactive, .custom-html--sitecore .section-container-6b .awards-box.awards-box-3.isactive{
border: 1px solid #004DFF!important;
margin-top: 1rem!important;
margin-bottom: 1rem!important;
}
}
#value-360-wrapper h1.slider-title {
font-family: 'Graphik';
font-style: normal;
font-weight: 600;
font-size: 50px;
font-size: 26px;
line-height: 120%;
text-align: center;
color: #fff;
margin-top: 80px;
margin-bottom: 60px;
}
@media(min-width: 993px) {
#value-360-wrapper h1.slider-title {
font-size: 50px;
}
}
#value-360-wrapper .slider-container {
position: relative;
}
@media(min-width: 993px) {
#value-360-wrapper .slider-container {
max-width: 1650px;
margin: 0 auto;
}
}
#value-360-wrapper .slider-container .slider-arrows {
position: absolute;
/* max-width: 1415px; */
margin: 0px auto;
left: 50%;
transform: translate(-50%, 0);
z-index: 999;
height: 0px;
top: 107%;
width: 120px;
}
@media(min-width:993px) {
#value-360-wrapper .slider-container .slider-arrows {
display: none;
}
}
#value-360-wrapper .slider-container .slider-arrows ul {
list-style: none;
height: 0;
margin: 0;
padding: 0;
}
#value-360-wrapper .slider-container .slider-arrows ul li {
position: absolute;
cursor: pointer;
}
#value-360-wrapper .slider-container .slider-arrows ul li.prev.slick-arrow {
left: 0;
}
#value-360-wrapper .slider-container .slider-arrows ul li.next.slick-arrow {
right: 0;
}
#value-360-wrapper .slider-container .slider {
margin: 0px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#value-360-wrapper .slider-container .slider .slick-slide {
margin: 10px 20px;
max-width: 260px;
}
#value-360-wrapper .slider-container .slider__item {
box-shadow: 0px 0px 4px 2px rgb(0 0 0 / 12%);
box-sizing: border-box;
padding: 0 22px 15px 22px;
position: relative;
}
@media(min-width: 993px) {
#value-360-wrapper .slider-container .slider__item {
margin: 25px 20px;
max-width: 220px;
min-height: 300px;
}
}
#value-360-wrapper .slider-container .slider__item h2 {
font-family: 'Graphik';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 126.5%;
color: #fff;
margin: 0.83em 0;
}
@media(min-width: 993px) {
#value-360-wrapper .slider-container .slider__item h2 {
font-size: 26px;
}
}
#value-360-wrapper .slider-container .slider__item p {
font-family: 'Graphik';
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 126.5%;
color: #fff;
}
@media(min-width: 993px) {
#value-360-wrapper .slider-container .slider__item p {
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
#value-360-wrapper .slider-container .slider__item a {
font-family: 'Graphik';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 143.5%;
color: #fff;
text-decoration: none;
position: absolute;
bottom: 15px;
right: 22px;
}
@media(min-width: 993px) {
#value-360-wrapper .slider-container .slider__item a {
font-size: 14px;
}
}
/* awards */
#value-360-wrapper .awards-holder {
max-width: 1066px;
margin: 200px auto;
/*background: #F2F2F2;*/
position: relative;
height: 400px;
}
@media(min-width: 600px) {
#value-360-wrapper .awards-holder {
height: 300px;
}
}
#value-360-wrapper .awards-holder .awards-cube-wrap {
margin: 0px auto;
perspective: 1560px;
position: absolute;
width: 100%;
/* max-width: 350px;
left: calc(50% - 175px); */
height: 100%;
-ms-overflow-style: none;
scrollbar-width: none;
z-index: 1;
overflow: hidden;
height: 400px;
display: block;
top: 40px;
}
@media(min-width: 600px) {
#value-360-wrapper .awards-holder .awards-cube-wrap {
height: 300px;
}
}
#value-360-wrapper .awards-holder .awards-cube-wrap .cube {
/* max-width: 990px; */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
transform: rotateY(110deg);
color: #fff;
height: 300px;
}
#value-360-wrapper .awards-holder .awards-cube-wrap .cube.rotate {
animation: awards-rotate-right-to-center 0.7s linear forwards;
}
#value-360-wrapper .awards-holder .awards-cube-wrap .content {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
left: 50%;
transform: translateX(-50%) scale(1.4) translateZ(-1100px);
transform-origin: top;
padding: 35px 0px 20px 0px;
position: absolute;
display: none;
max-width: 640px;
}
@keyframes awards-rotate-right-to-center {
0% {
transform: rotateY(300deg);
}
100% {
transform: rotateY(360deg);
}
}
#value-360-wrapper .awards-holder .awards-cube-wrap .content.active {
display: flex;
flex-direction: column;
}
#value-360-wrapper .awards-holder .awards-cube-wrap .content h2 {
font-family: 'Graphik';
font-style: normal;
font-weight: 400;
font-size: 34px;
line-height: 126.5%;
text-align: center;
color: #fff;
margin: 0.83em 0;
}
#value-360-wrapper .awards-holder .awards-cube-wrap .content p {
font-family: 'Graphik';
font-style: normal;
font-weight: 300;
font-size: 23px;
line-height: 125%;
text-align: center;
color: #fff;
}
#value-360-wrapper .awards-holder a {
font-family: 'Graphik';
font-style: normal;
font-weight: 600;
font-size: 19px;
line-height: 26px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin: 50px auto 10px auto;
position: absolute;
bottom: 40px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 2;
}
#value-360-wrapper video.vid-submarquee {
max-width: 100%;
padding: 5.5rem;
}
#value-360-wrapper .speedbump_text {
-webkit-box-shadow: 0px 0px 10px rgb(0 0 0 / 14%);
box-shadow: 0px 0px 10px rgb(0 0 0 / 14%);
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
padding: 50px 30px;
margin: 4rem 0;
}
#value-360-wrapper .center {
display: block;
text-align: center !important;
}
#value-360-wrapper .cta-more.isactive {
opacity: 1;
}
#value-360-wrapper .cta-more {
color: #004DFF;
position: relative;
width: auto;
padding: 10px;
bottom: 10%;
z-index: 10;
opacity: 0;
transition: opacity 0.6s ease;
display: inline-block;
}
#value-360-wrapper .cta-more.isactive {
top: 3px;
}
#value-360-wrapper .cta-more.isactive .cta-more-box {
top: 3px;
}
#value-360-wrapper .cta-more.isactive .cta-more-box {
left: 0;
top: 3px;
width: 36px;
height: 36px;
border: 1px solid #004DFF;
border-radius: 50px;
transition-delay: 0.2s;
}
#value-360-wrapper .cta-more .cta-more-box {
position: absolute;
left: 20px;
top: 20px;
width: 5px;
height: 5px;
border-radius: 50%;
transition: all 0.4s ease;
}
#value-360-wrapper .cta-more {
color: #004DFF;
position: relative;
width: auto;
padding: 10px;
bottom: 10%;
z-index: 10;
opacity: 0;
transition: opacity 0.6s ease;
display: inline-block;
}
#value-360-wrapper .cta-more.isactive .cta-more-label {
opacity: 1 !important;
}
#value-360-wrapper .cta-more .cta-more-label {
margin-left: 45px;
opacity: 0;
transition: opacity 0.7s ease 0.8s;
text-align: left;
}
#value-360-wrapper .cta-more .cta-more-label {
font-family: "Graphik", "Arial", Sans-Serif;
font-weight: 400;
font-size: 20px !important;
line-height: 1.25;
margin-left: 45px;
opacity: 0;
transition: opacity 0.7s ease 0.8s;
}
#value-360-wrapper .cta-more.isactive .cta-more-arrow {
position: absolute;
left: 20px;
top: 8px;
opacity: 1;
transition-delay: 0.6s;
}
#value-360-wrapper .cta-more .img-arrow-right {
width: 24px;
max-width: unset;
}
#value-360-wrapper .cta-more.isactive:hover .cta-more-box {
width: 105%;
height: 36px;
border-radius: 25px 25px 25px 25px;
}
*/
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
// slider
var windowWidth = $(window).width();
if (windowWidth < 993) {
// slider
$('.slider').slick({
centerMode: true,
centerPadding: '40px',
slidesToShow: 5,
slidesToScroll: 1,
autoplay: true,
variableWidth: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
responsive: [{
breakpoint: 992,
settings: {
// centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
// centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
})
.on("setPosition", function() {
resizeSlider();
});
}
$(window).on("resize", function(e) {
resizeSlider();
});
var slickHeight = $(".slick-track").outerHeight();
var slideHeight = $(".slick-track").find(".slick-slide").outerHeight();
function resizeSlider() {
$(".slick-track")
.find(".slick-slide .slider__item")
.css("height", slickHeight + "px");
}
// awards carousel
var numberAwardSCards = $(".awards-holder .awards-cube-wrap .cube .content").length;
var awardCardNumber = 1;
function rotateAward(awardCardNumber) {
$(".awards-holder .awards-cube-wrap .cube").removeClass("rotate");
$(".awards-holder .awards-cube-wrap .cube .content.active").removeClass("active");
setTimeout(function() {
$(".awards-holder .awards-cube-wrap .cube").addClass("rotate")
}, 100)
switch (awardCardNumber) {
case 1:
$(".awards-holder .awards-cube-wrap .cube .content.one").addClass("active");
break;
case 2:
$(".awards-holder .awards-cube-wrap .cube .content.two").addClass("active");
break;
case 3:
$(".awards-holder .awards-cube-wrap .cube .content.three").addClass("active");
break;
case 4:
$(".awards-holder .awards-cube-wrap .cube .content.four").addClass("active");
break;
case 5:
$(".awards-holder .awards-cube-wrap .cube .content.five").addClass("active");
break;
case 6:
$(".awards-holder .awards-cube-wrap .cube .content.six").addClass("active");
break;
case 7:
$(".awards-holder .awards-cube-wrap .cube .content.seven").addClass("active");
}
setTimeout(function() {
$(" .awards-holder .awards-cube-wrap .cube .content.active").fadeOut("slow", function() {
$(".awards-holder .awards-cube-wrap .cube .content.active").removeAttr("style");
$(".awards-holder .awards-cube-wrap .cube .content").removeClass("active");
awardCardNumber = awardCardNumber + 1;
if (awardCardNumber > numberAwardSCards) {
awardCardNumber = 1
}
rotateAward(awardCardNumber);
});
}, 5000)
}
rotateAward(1)
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
">