[id*="custom-html"]{padding:0 !important; position:relative;}
.top-header-canvas {position:relative; height:500px; overflow:hidden; background:#efefef;}
.top-header-canvas video{margin-left: 50vw; transform: translate(-50%); z-index:0;}
.top-header-canvas .banner-title{width: 50%; top: 50%; transform: translate(0, -50%); position: absolute;z-index:1; color:#fff;}
.text-show{display: block !important;}
.text-dark-blue{color: #003eab !important;}
.bg-blue{background: #003eab;}
.bg-light-blue{background: #8aa3ce;}
.left-side, .right-side{width:49.5%; height:360px; position: relative; overflow-y: hidden;}
.left-side .img-box img, .right-side .img-box img{width: 100%; height: 360px; object-fit: cover;}
.position-relative{position: relative;}
.break-line{display: block; font-size: 2.66rem; font-weight: 500;}
.zyx-paragraph__cta span {line-height: normal; vertical-align: middle;}
.zyx-paragraph--top-hero{position: relative; padding: 0 !important;}
.zyx-paragraph--top-hero .row {height: 500px; align-items: center;}
#report-section .btn.color-adjusted {background-color: #fff !important; border-color: #fff !important; color: #003eab !important;}
#report-section .border-adjusted {color: #fff !important;}
#report-section .border-adjusted:hover {background-color: transparent!important;}
#report-section .border-adjusted::before {background-color: #fff !important;}

.js-scroll {opacity: 0; transition: opacity 500ms;}
.js-scroll.scrolled {opacity: 1;}
.scrolled.fade-in {animation: fade-in 1s ease-in-out both;}
.scrolled.fade-in-bottom {animation: fade-in-bottom 1s ease-in-out both;}
.scrolled.slide-left {animation: slide-in-left 1s ease-in-out both;}
.scrolled.slide-right {animation: slide-in-right 1s ease-in-out both;}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.bar .bar-description {opacity: 0; width: fit-content; margin: 0 auto; position: absolute; left: 0; right: 0; top: -35px; font-size: 13px;white-space: nowrap;transition: opacity 0.4s ease-in-out; background: #fff; padding: 5px;}
.bar:hover .bar-description{opacity: 1;transition: opacity 0.4s ease-in-out;}
.bars-width {position: relative; width: 100%;}
.bars {height: 180px; padding: 0; width: 100%; position: relative; margin: auto;}
.bar-group {display: flex; height: 100%;position: relative;width: 33%; margin: auto; padding-left: 0;justify-content: center;}
.bar-group .bar {visibility: hidden; height: 0; -webkit-animation: animate-height; -moz-animation: animate-height; animation: animate-height; animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99); -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99); -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99); animation-duration: 0.8s; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; height: 0; width: 30px; cursor: pointer; z-index: 1; position: relative; display: flex; align-self: end;}
.bar-1, .bar-2, .bar-3 {animation-delay: 0.5s; -webkit-animation-delay: 0.6s;}
.graph{height: 180px; position: relative;}
.bar-chart .x-axis{text-align: center; display: flex; width: auto; margin-left: 60px; margin-top: 10px;}
.bar-chart .x-axis div {font-size: 15px; width: 33%; line-height: 1;}
.bar-chart .y-axis{width: 100%;position: absolute; text-align: right; top: 0; padding-left: 0;}
.bar-chart .y-axis ul {list-style: none; margin: 0; padding: 0;}
.bar-chart .y-axis li {border-top: 1px solid #4e5464; display: block; height: 45px; width: 100%; list-style: none;}
.bar-chart .y-axis-numbers {width: 60px; margin-top: -10px; padding-left: 0;}
.bar-chart .y-axis-numbers li {display: block;font-size: 15px; height: 45px; list-style: none;}
.bar-chart .stat-1 {background: #555;}
.bar-chart .stat-2 {background: #bbb;}
.bar-chart .stat-3 {background: #003eab;}
.legend-box{width: 100%; font-size: 16px;}
.manager-mark{width: 30px; height: 30px; background: #555; float: left; margin-right: 5px;}
.sales-mark{width: 30px; height: 30px; background: #bbb; float: left; margin-right: 5px;}
.administration-mark{width: 30px; height: 30px; background: #003eab; float: left; margin-right: 5px;}
/*https://codepen.io/baletsa/pen/gOaKKj*/
@-webkit-keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@-moz-keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@-webkit-keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}
@-moz-keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}
@keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}

#working-environment-section {z-index: 1;}
#working-environment-section h3{display: none;}
.working-environment-section .numbers span.value, .working-environment-section .numbers span.year{font-size: 100px; line-height: 1; font-family: "Galano Grotesque",Helvetica,sans-serif;}
.working-environment-section .numbers span.value-decimal{font-size: 100px; line-height: 1;}
.working-environment-section .percentage-text{font-size: 50px;}
.working-environment-section .small-text{font-size: 24px; line-height: 1; margin-top: 10px;}
.working-environment-section .left-side .desc, .working-environment-section .right-side .desc{position: absolute; bottom: 0; right: 0; width: 60%; padding: 1.5rem 2rem; color: #fff; text-align: right;}

#inclusion-strategy-section{margin-top: -7%; z-index: 0;}
#inclusion-strategy-section h3{display: none; margin-top: 4rem;}
.inclusion-strategy-title{margin-top: 5rem;}
.inclusion-strategy-content h5, .inclusion-strategy-content h6{margin: 0!important; padding: 0!important;}

#engagement-plan-section h3, #talent-training-section h3, #work-life-balance-section h3{display: none; margin-top: 0;}
#engagement-plan-section, #talent-training-section, #work-life-balance-section{position: relative; overflow: hidden;}
#engagement-plan-section .d-flex, #work-life-balance-section .d-flex{width: 100%; height: 500px; padding: 0; margin: 0;}
#talent-training-section .d-flex {width: 100%; height: 550px; padding: 0; margin: 0;}
#engagement-plan-section .img-box, #work-life-balance-section .img-box{position: absolute; left: 0; overflow-y: hidden; width: 50%;}
#talent-training-section .img-box{position: absolute; right: 0; overflow: hidden; width: 50%;}
#engagement-plan-section .img-box img, #work-life-balance-section .img-box img {object-fit: cover; width: 100%; height: 500px;}
#talent-training-section .img-box img {object-fit: cover; width: 100%; height: 550px;}
#engagement-plan-section .desc, #talent-training-section .desc, #work-life-balance-section .desc{padding: 0; width: 45%;}
#engagement-plan-section .desc, #work-life-balance-section .desc{margin-left: 54%;}

#award-section {padding: 0 !important;}
#award-section h2{display: none; margin: 0;}
#award-section .row {position: relative; min-height: 700px; align-items: center;}
#award-section .col-md-5{width: 100%;}
#award-section picture img{object-fit: cover;}
#award-section .cover {position: absolute; width: 100%; height: 500px; left: 0; top: 0; background: rgba(0,0,0,0.7);}
#award-section blockquote{position: relative; border: none !important; text-align: left; margin-top: 4rem;}
#award-section blockquote:before{position: absolute; color: #fff; font-size: 4rem;}
#award-section blockquote:before {content: '“'; top: -3rem;}
#award-section cite{font-style: normal;}
.quotation-area {position: relative; height: 500px;}
.award-logo {padding: 0 2rem; height: 500px; background: rgba(0,0,0,0.7); position: relative;}
.award-logo img {margin-top: -24px; max-width: none;}
.award-text {padding: 4rem; text-align: left; position: relative;}

#our-employee-care-program {position: relative;}
#our-employee-care-program .col-md-5 {width: 100%;}
.employee-care-icon img{width: 100px;}

#report-section h2{display: none;}
#report-section .col-md-5 {width: 80%;}

/*https://codepen.io/raf187/pen/BvgGRQ*/
.arrow{margin-top: 2rem; position: absolute; left: 50%; transform: translate(-50%,-50%);}
.arrow span{display: block; width: 30px; height: 30px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin: -10px; animation: animate 2s infinite;}
.arrow span:nth-child(2){animation-delay: -0.2s;}
.arrow span:nth-child(3){animation-delay: -0.4s;}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

@media (max-width: 900px) {
    .left-side, .right-side{width: 100%; margin: auto; height: auto;}
    .left-side img-box img, .right-side img{object-fit: cover; width: 100%; height: 360px;}
    .right-side .d-flex{height: auto;}
    .left-side{margin-bottom: 1rem;}
    .right-side .trainess-section{margin-top: 1rem !important;}
    .break-line{display: inline; margin-left: 10px;}
    .working-environment-section .percentage-text{font-size: 80px;}
    #engagement-plan-section .d-flex, #talent-training-section .d-flex, #work-life-balance-section .d-flex{height: auto;}
    #engagement-plan-section .img-box, #work-life-balance-section .img-box, #talent-training-section .img-box, #engagement-plan-section .desc, #talent-training-section .desc, #work-life-balance-section .desc{width: 100%; position: relative; margin: auto; left: 0; right: 0;}
    #talent-training-section .img-box{right: 0;}
    #inclusion-strategy-section{margin-top: 0;}
}

@media (max-width: 700px) {
    .working-environment-section .numbers span.value, .working-environment-section .numbers span.value-decimal, .working-environment-section .numbers span.year {font-size: 80px;}
    .working-environment-section .percentage-text{font-size: 60px;}
    .working-environment-section .small-text {width: 100% !important; font-size: 16px; line-height: 1rem;}
    .working-environment-section .desc {padding: 1rem !important;}
    .working-environment-section .left-side .desc, .working-environment-section .right-side .desc {width: 100%;}
    #inclusion-strategy-section h3 {margin-top: 0;}
}

@media (max-width: 500px) {
    .top-header-canvas video {margin-left: 0; transform: translate(-60%);}
    .top-header-canvas .banner-title{width: 90%;}
    .top-header-canvas .banner-title h2{font-size: 2rem;}
    #engagement-plan-section .desc, #talent-training-section .desc, #work-life-balance-section .desc{padding: 0;}
    #talent-training-section .d-flex {flex-direction: column-reverse;}
    .inclusion-strategy-title{margin-top: 0;}
    .inclusion-strategy-content h5{margin-top: 2rem;}
    .inclusion-strategy-content {justify-content: center;}
    .chart-legend{position: relative;}
    #award-section {height: 850px;}
    #award-section .cover {height: 750px;}
    #award-section blockquote:before{top: -3rem; left: 0;}
    .award-logo {height: auto; width: 100%; text-align: center;}
    .award-text {padding: 2rem;}
    .quotation-area {flex-direction: column; height: auto;}
    #engagement-plan-section .img-box img, #talent-training-section .img-box img, #work-life-balance-section .img-box img{height: 350px;}
    #engagement-plan-section .desc, #talent-training-section .desc, #work-life-balance-section .desc{margin-top: 1rem;}
    #report-section .zyx-paragraph__cta {align-items: start; margin: 0; width: fit-content !important;}
}