@font-face {
  font-family: 'Breuer Text';
  src: url("../fonts/BreuerText-Bold.eot");
  src: url("../fonts/BreuerText-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/BreuerText-Bold.woff2") format("woff2"), url("../fonts/BreuerText-Bold.woff") format("woff"), url("../fonts/BreuerText-Bold.ttf") format("truetype"), url("../fonts/BreuerText-Bold.svg#BreuerText-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Breuer Text';
  src: url("../fonts/BreuerText-Regular.eot");
  src: url("../fonts/BreuerText-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/BreuerText-Regular.woff2") format("woff2"), url("../fonts/BreuerText-Regular.woff") format("woff"), url("../fonts/BreuerText-Regular.ttf") format("truetype"), url("../fonts/BreuerText-Regular.svg#BreuerText-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'Breuer Text';
  src: url("../fonts/BreuerText-Medium.eot");
  src: url("../fonts/BreuerText-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/BreuerText-Medium.woff2") format("woff2"), url("../fonts/BreuerText-Medium.woff") format("woff"), url("../fonts/BreuerText-Medium.ttf") format("truetype"), url("../fonts/BreuerText-Medium.svg#BreuerText-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: 'RupeeForadian';
  src: url("../fonts/Rupee_Foradian.eot");
  src: url("../fonts/Rupee_Foradian.eot") format("embedded-opentype"), url("../fonts/Rupee_Foradian.woff2") format("woff2"), url("../fonts/Rupee_Foradian.woff") format("woff"), url("../fonts/Rupee_Foradian.ttf") format("truetype"), url("../fonts/Rupee_Foradian.svg#Rupee_Foradian") format("svg"); }
/* WEBKIT SCROLLBAR */
/* **************** */
::-webkit-scrollbar {
  width: 8px;
  height: 8px; }

/* Track */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 4px rgba(120, 120, 120, 0.5); }

/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background: #1D5079;
  -webkit-box-shadow: inset 0 0 4px rgba(120, 120, 120, 0.6); }

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(120, 120, 120, 0.4); }

.rs {
  font-family: 'RupeeForadian'; }

.wow {
  visibility: hidden; }

.scroll-hide {
  overflow: hidden; }

a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease; }

html,
body {
  height: 100%;
  font-family: 'Breuer Text';
  font-weight: 400;
  /* @include transition; */ }

/* font-family: 'Bodoni Moda', serif; */
/*Color Var*/
.white {
  color: #FFFFFF !important; }

.white-f1f1 {
  color: #f1f1f1; }

.black {
  color: #000000 !important; }

.black-444444 {
  color: #444444 !important; }

.black-7070 {
  color: #707070 !important; }

.Jsw-red {
  color: #D31618 !important; }

.Jsw-blue {
  color: #263D8C !important; }

.Jsw-blue-E1F5FF {
  color: #E1F5FF !important; }

.Jsw-blue-00AEEF {
  color: #00AEEF !important; }

.Jsw-green-00AEEF {
  color: #44BF74 !important; }

.Jsw-yellow-FFCF4A {
  color: #FFCF4A !important; }

.bg-Jsw-red {
  background-color: #D31618 !important; }

.bg-Jsw-blue {
  background-color: #263D8C !important; }

.bg-Jsw-blue-E1F5FF {
  background-color: #E1F5FF !important; }

.bg-white-f1f1 {
  background-color: #f1f1f1 !important; }

.bg-white-f8f8f8 {
  background-color: #F0F0F0 !important; }

.bg-green-44BF74 {
  background-color: #44BF74 !important; }

.bg-yellow-FFCF4A {
  background-color: #FFCF4A !important; }

/*Font Size*/
/* Fonts Size Var */
.fs12 {
  font-size: 12px !important; }

.fs14 {
  font-size: 14px !important; }

.fs16 {
  font-size: 16px !important; }

.fs18 {
  font-size: 18px !important; }

.fs20 {
  font-size: 20px !important;
  line-height: 26px; }

.fs22 {
  font-size: 22px;
  line-height: 28px; }

.fs24 {
  font-size: 24px !important;
  line-height: 32px; }

.fs26 {
  font-size: 26px; }

.fs28 {
  font-size: 28px; }

.fs30 {
  font-size: 30px; }

.fs32 {
  font-size: 32px; }

.fs36 {
  font-size: 36px; }

.fs40 {
  font-size: 40px !important;
  line-height: 40px; }

.fs44 {
  font-size: 44px !important;
  line-height: 40px; }

.fs45 {
  font-size: 45px !important;
  line-height: 40px; }

.fs46 {
  font-size: 46px; }

.fs48 {
  font-size: 48px; }

.fs50 {
  font-size: 50px !important; }

.fs52 {
  font-size: 52px; }

.fs54 {
  font-size: 54px; }

.fs56 {
  font-size: 56px;
  line-height: 55px; }

.fs60 {
  font-size: 60px !important;
  line-height: 65px; }

.fs65 {
  font-size: 65px !important;
  line-height: 65px; }

.fs70 {
  font-size: 70px;
  line-height: 54px; }

.fs72 {
  font-size: 72px; }

.fs75 {
  font-size: 75px;
  line-height: 73px; }

.fs85 {
  font-size: 85px; }

.fs90 {
  font-size: 90px; }

.fs120 {
  font-size: 120px; }

/*Be Roboto Font-weight Var*/
.font-weight-1 {
  font-weight: 100; }

.font-weight-2 {
  font-weight: 200 !important; }

.font-weight-3 {
  font-weight: 300 !important; }

.font-weight-4 {
  font-weight: 400 !important; }

.font-weight-5 {
  font-weight: 500; }

.font-weight-6 {
  font-weight: 600; }

.font-weight-7 {
  font-weight: 700 !important; }

.font-weight-8 {
  font-weight: 800 !important; }

.font-weight-9 {
  font-weight: 900 !important; }

/* $Avenir-Font:'Avenir';
.Avenir-Font { font-family: $Avenir-Font; }
*/
:focus {
  outline: none; }

.btn.focus, .btn:focus {
  box-shadow: none; }

.body-overflow {
  overflow: hidden; }

.scroll-hide {
  overflow: hidden; }

a {
  text-decoration: none !important; }

p {
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 18px; }

.common-container {
  width: 1280px;
  max-width: 100%;
  margin: auto;
  position: relative; }

.common-padding-top {
  padding-top: 80px; }

.common-padding-bottom {
  padding-top: 80px; }

.common-margin-top {
  margin-top: 80px; }

.common-margin-bottom {
  margin-bottom: 80px; }

.title-26 {
  font-size: 26px;
  line-height: 32px; }

.title-24 {
  font-size: 24px;
  line-height: 35px; }

.title-44 {
  font-size: 44px;
  line-height: 44px; }

.title-90 {
  font-size: 90px;
  line-height: 28px; }

.italic {
  font-style: italic; }

.mr-top-70 {
  margin-top: 70px; }

.overflow-hide {
  overflow: hidden;
  overflow-x: hidden; }

.title-24 h6 {
  font-size: 24px;
  font-weight: 600;
  line-height: 24px; }

.title-46 h2 {
  font-size: 46px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: -1px;
  margin-bottom: 24px; }

.small-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px; }

.know-more {
  color: #D31618;
  font-size: 14px;
  padding: 5px 20px;
  border: solid 1px #D31618;
  font-weight: 600;
  display: inline-block;
  border-radius: 100px;
  margin-top: 10px; }
  .know-more:hover {
    background-color: #263D8C;
    color: #FFFFFF; }

.know-more2 {
  color: #FFFFFF;
  font-size: 14px;
  padding: 5px 20px;
  border: solid 1px #FFFFFF;
  font-weight: 600;
  display: inline-block;
  border-radius: 100px;
  margin-top: 10px; }
  .know-more2:hover {
    background-color: #FFFFFF;
    color: #263D8C; }

.know-more3 {
  color: #FFFFFF;
  font-size: 14px;
  padding: 5px 20px;
  font-weight: 600;
  display: inline-block;
  border-radius: 100px;
  margin-top: 10px;
  background-color: #D31618; }
  .know-more3:hover {
    background-color: #263D8C;
    color: #FFFFFF; }

#header {
  /* position:fixed;  top:0px; left:0px; z-index: 9997; */
  padding: 0px 0px;
  background: url(../images/header-top.png) no-repeat top center;
  /* background: #FFFFFF; */
  margin: auto;
  right: 0px;
  height: 79px;
  transition: all 1.4s cubic-bezier(0.2, 0.1, 0, 1);
  /* &.load-animation { top: 0px; opacity:1; } */ }
  #header .logo {
    display: inline-block;
    padding: 7px;
    /*  img  { width:110px; } */ }
  #header #headertop {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: auto;
    right: 0px; }
  #header .ham {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 25px;
    z-index: 9999; }
  #header .ham-bt {
    position: absolute;
    right: 0px;
    top: 20px; }
  #header .download-annual {
    position: absolute;
    right: 75px;
    top: 15px;
    font-weight: 700; }
    #header .download-annual a {
      background-image: url(../images/download-icon2.svg);
      background-position: right center;
      background-size: 35px;
      background-repeat: no-repeat;
      padding-right: 43px;
      color: #444444;
      line-height: 47px;
      text-align: right;
      display: inline-block; }
  #header.fixed {
    top: 0px; }
  #header.fixed {
    background-color: #e6e6e6; }

#banner {
  position: relative;
  height: 100vh;
  overflow: hidden; }
  #banner .common-container {
    height: 100%;
    position: relative; }
  #banner .banner-title {
    position: absolute;
    left: 0px;
    top: 150px;
    font-size: 62px;
    color: #263D8C;
    font-weight: 700;
    line-height: 50px;
    z-index: 3; }
  #banner .BetterEveryday {
    position: absolute;
    left: 0px;
    bottom: 150px;
    font-size: 24px;
    color: #D31618;
    font-weight: 700;
    line-height: 50px;
    z-index: 3; }
  #banner .strong-tomorrow {
    position: absolute;
    right: 0px;
    bottom: 200px;
    font-size: 62px;
    color: #263D8C;
    font-weight: 700;
    line-height: 50px;
    text-align: right;
    z-index: 9; }
  #banner .plus-pic {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    margin: auto;
    width: 855px;
    height: 854px; }
  #banner #bnr-vid {
    /* width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    opacity:1;
    transition: 0.5s;
    object-fit: none; */
    /* width: 1400px;
    height: 960px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; */
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    opacity: 1;
    top: 0px;
    transition: 0.5s;
    z-index: -1;
    transform: scale(0.8);
    /*  object-fit: fill; */ }
  #banner .banner-readmore {
    display: block;
    position: absolute;
    top: 100px;
    left: 116px; }

.wrapper {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }
  .wrapper .content_area {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    width: 1280px;
    margin: auto;
    height: 100%; }
    .wrapper .content_area .pointer-title {
      width: 304px;
      /* height: 90px;   */
      display: block;
      position: absolute;
      z-index: 9;
      opacity: 0;
      transition: 0.5s;
      overflow: hidden;
      cursor: pointer; }
      .wrapper .content_area .pointer-title .pointer-list {
        opacity: 0;
        transition: 0.3s;
        padding: 0px 30px;
        padding-right: 10px; }
        .wrapper .content_area .pointer-title .pointer-list p {
          border-left: solid 5px #00AEEF;
          padding-left: 10px;
          font-size: 15px;
          line-height: 18px;
          margin-bottom: 13px; }
          .wrapper .content_area .pointer-title .pointer-list p a {
            color: #000000; }
            .wrapper .content_area .pointer-title .pointer-list p a:hover {
              color: #263D8C; }
      .wrapper .content_area .pointer-title:hover {
        /* height: 200px; */ }
        .wrapper .content_area .pointer-title:hover .pointer-list {
          opacity: 1; }
        .wrapper .content_area .pointer-title:hover .banner-readmore {
          opacity: 0; }
      .wrapper .content_area .pointer-title.anim {
        opacity: 1; }
      .wrapper .content_area .pointer-title:nth-child(1) {
        transition-delay: 0.1s;
        height: 450px; }
      .wrapper .content_area .pointer-title:nth-child(2) {
        transition-delay: 0.2s;
        width: 475px;
        padding-left: 181px;
        height: 255px; }
        .wrapper .content_area .pointer-title:nth-child(2) .banner-readmore {
          left: 300px !important; }
      .wrapper .content_area .pointer-title:nth-child(3) {
        transition-delay: 0.3s;
        width: 505px;
        height: 250px;
        padding-right: 200px; }
      .wrapper .content_area .pointer-title:nth-child(4) {
        transition-delay: 0.4s;
        width: 460px;
        padding-right: 178px;
        height: 461px;
        padding-top: 216px; }
        .wrapper .content_area .pointer-title:nth-child(4) .banner-readmore {
          left: 117px !important;
          top: 317px !important; }

.fancybox-p p {
  border-left: solid 5px #00AEEF;
  padding-left: 10px;
  font-size: 15px;
  line-height: 18px;
  margin-bottom: 20px; }
  .fancybox-p p a {
    color: #000000; }

.home-kpi-no {
  padding-top: 10px; }
  .home-kpi-no h2 {
    font-weight: 700;
    color: #263D8C;
    font-size: 52px;
    letter-spacing: -1px;
    line-height: 36px;
    margin-bottom: 2px; }
  .home-kpi-no p {
    font-size: 22px;
    line-height: 26px; }

.bor-top {
  border-top: solid 1px #80D3ED; }

.bor-bottom {
  border-bottom: solid 1px #80D3ED; }

.bor-bottom-C4C4C4 {
  border-bottom: solid 1px #C4C4C4; }

.bor-right {
  border-right: solid 1px #80D3ED; }

.bor-right-C4C4C4 {
  border-right: solid 1px #C4C4C4; }

.bor-right-white {
  border-right: solid 1px #FFF; }

.bor-bottom-white {
  border-bottom: solid 1px #FFF; }

#at-a-glance {
  padding: 90px 0px;
  background: url(../images/ata-glance-banner.jpg) no-repeat 50% 50%;
  background-size: cover;
  position: relative; }
  #at-a-glance .glance-left {
    padding-right: 50px;
    padding-top: 25px; }
  #at-a-glance .home-kpi-no {
    padding-top: 25px; }
  #at-a-glance::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0px;
    top: 0px; }

#Operational-presence {
  padding: 90px 0px; }
  #Operational-presence .Operational-box {
    background-color: #F0F0F0;
    padding: 30px;
    height: 320px;
    position: relative;
    transition: 0.5s; }
    #Operational-presence .Operational-box h3 {
      font-size: 24px;
      font-weight: 700;
      color: #263D8C;
      line-height: 26px;
      background: url(../images/bottom-bor.jpg) no-repeat bottom center;
      padding-bottom: 20px;
      margin-bottom: 20px; }
      #Operational-presence .Operational-box h3.ex-pd {
        padding-top: 25px; }
    #Operational-presence .Operational-box .know-more {
      position: absolute;
      bottom: 30px;
      left: 30px; }
    #Operational-presence .Operational-box:hover {
      background-color: #FFFFFF;
      box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
      border-collapse: separate; }
  #Operational-presence .Product-showcase {
    background: #FFFFFF;
    box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.2); }
    #Operational-presence .Product-showcase .Product-box .no {
      font-weight: 600;
      color: #D31618;
      font-size: 24px; }
  #Operational-presence .Innovation {
    background: url(../images/innovation-bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    position: relative; }
    #Operational-presence .Innovation .Innovation-inner {
      z-index: 2;
      position: relative; }
    #Operational-presence .Innovation .title-24 {
      padding-top: 15px; }
    #Operational-presence .Innovation .bor-right {
      border-right: solid 1px rgba(255, 255, 255, 0.2); }
    #Operational-presence .Innovation .bor-bottom {
      border-bottom: solid 1px rgba(255, 255, 255, 0.2); }
    #Operational-presence .Innovation::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(38, 61, 140, 0.7);
      left: 0px;
      top: 0px; }
  #Operational-presence .Operational-left {
    padding-right: 50px; }

#chairman {
  height: 750px;
  position: relative;
  /* .next-prev { width: 80%; } */ }
  #chairman::before, #chairman::after {
    content: '';
    position: absolute;
    top: 0px;
    height: 100%; }
  #chairman::before {
    left: 0px;
    background: linear-gradient(90deg, #007CB9 0%, #103680 100%);
    width: 55%; }
  #chairman::after {
    right: 0px;
    background: linear-gradient(90deg, #D31618 0%, #780001 97.92%, #AA1718 100%);
    width: 45%; }
  #chairman .Chairman-Slider {
    height: 100%; }
  #chairman .swiper-slide {
    height: 100%;
    padding-top: 90px;
    position: relative; }
  #chairman .Chairman-box .Chairman-pic {
    width: 420px;
    z-index: 9;
    position: relative;
    opacity: 1;
    transition: 0.5s;
    position: relative;
    margin-left: 30px; }
    #chairman .Chairman-box .Chairman-pic .right-Chairman {
      left: 510px;
      position: absolute;
      top: 410px;
      width: 250px; }
  #chairman .swiper-slide:nth-child(1) .swiper-button-next {
    top: 550px; }
  #chairman .swiper-slide:nth-child(2) .swiper-button-prev {
    top: 360px; }
  #chairman .swiper-button-prev:after, #chairman .swiper-button-next:after {
    font-size: 0px; }
  #chairman .swiper-button-prev, #chairman .swiper-button-next {
    width: 170px;
    right: -250px;
    top: 500px;
    color: #FFFFFF;
    font-size: 16px; }
    #chairman .swiper-button-prev img, #chairman .swiper-button-next img {
      margin-left: 10px;
      margin-right: 10px; }
  #chairman .left-chair {
    padding-top: 0px; }

#esg {
  background: url(../images/esg-banner.jpg) no-repeat 50% 50%;
  height: 820px;
  padding: 90px 0;
  position: relative; }
  #esg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(38, 61, 140, 0.7);
    left: 0px;
    top: 0px; }
  #esg .top-tabs-title ul {
    display: flex;
    justify-content: center;
    width: 100%; }
    #esg .top-tabs-title ul li a {
      display: inline-block;
      color: #FFFFFF;
      font-size: 36px;
      font-weight: 400;
      padding: 20px;
      position: relative; }
      #esg .top-tabs-title ul li a::before {
        content: '';
        position: absolute;
        left: 0px;
        bottom: -1px;
        width: 0%;
        height: 3px;
        background-color: #FFCF4A;
        transition: 0.5s; }
      #esg .top-tabs-title ul li a.active {
        opacity: 1;
        color: #FFCF4A; }
        #esg .top-tabs-title ul li a.active::before {
          width: 100%; }
  #esg #HighlightsTabs, #esg #ESGTabs {
    position: relative;
    border-bottom: 0px; }
    #esg #HighlightsTabs::before, #esg #ESGTabs::before {
      content: '';
      position: absolute;
      left: 0px;
      top: 0px;
      height: 100%;
      width: 1px;
      background: rgba(255, 255, 255, 0.4); }
    #esg #HighlightsTabs li, #esg #ESGTabs li {
      display: block;
      width: 100%;
      margin-bottom: 35px;
      line-height: 21px;
      padding-left: 15px; }
      #esg #HighlightsTabs li a, #esg #ESGTabs li a {
        display: block;
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 400;
        padding: 0px;
        font-weight: 700;
        opacity: 1;
        position: relative; }
        #esg #HighlightsTabs li a::before, #esg #ESGTabs li a::before {
          content: '';
          position: absolute;
          left: -20px;
          top: 0px;
          width: 10px;
          height: 0px;
          background-color: #FFCF4A;
          transition: 0.5s; }
        #esg #HighlightsTabs li a.active, #esg #ESGTabs li a.active {
          opacity: 1;
          color: #FFCF4A; }
          #esg #HighlightsTabs li a.active::before, #esg #ESGTabs li a.active::before {
            height: 100%; }
  #esg .highlight-mid .tabtitle2 {
    font-size: 30px;
    color: #FFCF4A;
    font-weight: 700;
    padding-top: 9px;
    line-height: 30px; }

#Achieving-performance {
  padding: 90px 0px; }
  #Achieving-performance .performance-box {
    height: 551px;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
    position: relative;
    /*&:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 50px solid white;
    border-left: 50px solid red;
    width: 0;
    } */ }
    #Achieving-performance .performance-box::before {
      content: '';
      position: absolute;
      left: 0px;
      top: 130px;
      height: 100%;
      width: 100%;
      background: #263d8c;
      background: linear-gradient(6deg, #263d8c 0%, rgba(255, 255, 255, 0) 100%); }
    #Achieving-performance .performance-box.bg1 {
      background-image: url(../images/performance1.png); }
    #Achieving-performance .performance-box.bg2 {
      background-image: url(../images/performance2.png); }
    #Achieving-performance .performance-box.bg3 {
      background-image: url(../images/performance3.png); }
    #Achieving-performance .performance-box h6 {
      position: absolute;
      bottom: 0px;
      left: 30px;
      font-weight: 600;
      font-size: 32px;
      color: #FFFFFF;
      margin-top: 20px;
      margin-bottom: 20px;
      transition: 0.2s;
      z-index: 0; }
    #Achieving-performance .performance-box .performance-inner {
      padding: 50px;
      background: linear-gradient(0deg, rgba(19, 72, 158, 0.9), rgba(19, 72, 158, 0.9));
      height: 100%;
      transform: translate(0px, 20px);
      opacity: 0;
      transition: 0.5s; }
      #Achieving-performance .performance-box .performance-inner .performance-icon {
        border-bottom: solid 1px #FFFFFF; }
      #Achieving-performance .performance-box .performance-inner h4 {
        font-weight: 600;
        font-size: 32px;
        color: #FFFFFF;
        margin-top: 20px;
        margin-bottom: 20px; }
      #Achieving-performance .performance-box .performance-inner p {
        color: #FFFFFF;
        background: url(../images/white-dots1.png) no-repeat left 8px;
        padding-left: 24px; }
      #Achieving-performance .performance-box .performance-inner:hover {
        transform: translate(0px, 0px);
        opacity: 1; }
    #Achieving-performance .performance-box:hover h6 {
      opacity: 0; }

/* .box-shadow { 
&::before { content: ''; position: absolute; box-shadow: 0px 10px 80px rgba(0, 0, 0, 0.3); width: 100%; height: 100%; left:0px; top:0px; z-index: 1; opacity: 0; transition: 0.5s; }

&:hover {
&::before { opacity: 1;  }

}

} */
#valeCreation {
  background: linear-gradient(90deg, #007CB9 0%, #103680 100%), #F0F0F0;
  padding: 90px 0px;
  /*   .Achieving-Box { margin-bottom: 30px;transition: 0.5s;
      a  { display: block; clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0 100%); height: 142px; background-color: $white; padding: 20px; transition: 0.5s;
      
      
      .no { font-weight: $font-weight-6; color: $Jsw-red; font-size: $fs24 }
      p { font-size: $fs24; color: $Jsw-blue; }
      
      &:hover { background:  $Jsw-blue; transition: 0.5s; 
      p {color: $white; } 
      
      }  
      
      }
      
      
      } */
  /* a { display: block; height: 100%; position: relative;  z-index: 2;
  .blue-small-arrow {position: absolute; bottom:20px; right:20px;  transition: 0.5s;
  &:hover { right:10px; }
  }
  
  }
  &:hover {
    path {fill:$Jsw-red}
  } */ }
  #valeCreation .Purpose-Box {
    position: relative;
    display: block;
    background-color: #f1f1f1;
    padding: 30px;
    position: relative;
    height: 342px;
    border-right: solid 1px #bdbdbd; }
    #valeCreation .Purpose-Box p {
      background-position: left top;
      background-repeat: no-repeat;
      padding-left: 64px; }
      #valeCreation .Purpose-Box p.bg1 {
        background-image: url(../images/build.png); }
      #valeCreation .Purpose-Box p.bg2 {
        background-image: url(../images/sun.png); }
      #valeCreation .Purpose-Box p.bg3 {
        background-image: url(../images/heart.png); }
  #valeCreation .Achieving-Box {
    display: block;
    /*  clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0 100%);  */
    height: 171px;
    background-color: #f1f1f1;
    padding: 20px;
    border: solid 1px #bdbdbd; }
    #valeCreation .Achieving-Box a {
      display: block;
      height: 100%;
      position: relative;
      z-index: 2; }
      #valeCreation .Achieving-Box a .blue-small-arrow {
        position: absolute;
        bottom: 20px;
        right: 20px;
        transition: 0.5s; }
        #valeCreation .Achieving-Box a .blue-small-arrow:hover {
          right: 10px; }
    #valeCreation .Achieving-Box:hover {
      box-shadow: 0px 10px 80px rgba(0, 0, 0, 0.3); }
      #valeCreation .Achieving-Box:hover path {
        fill: #D31618; }

#better-everyday {
  padding: 90px 0px; }
  #better-everyday .everyday-box {
    height: 470px;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background: #FFF;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
    position: relative;
    margin-bottom: 40px; }
    #better-everyday .everyday-box:before {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      border-bottom: 50px solid white;
      border-left: 50px solid #FFF;
      width: 0; }
    #better-everyday .everyday-box .blue-small-arrow {
      position: absolute;
      bottom: 30px;
      right: 50px;
      transition: 0.5s; }
      #better-everyday .everyday-box .blue-small-arrow:hover {
        right: 40px; }
  #better-everyday .home-kpi-no h2 {
    font-size: 36px; }
  #better-everyday .home-kpi-no p {
    font-size: 14px;
    line-height: 16px; }

#Investment {
  background-color: #F0F0F0;
  padding: 90px 0px; }
  #Investment .Investment-box {
    margin-bottom: 30px;
    transition: 0.5s; }
    #Investment .Investment-box a {
      display: block;
      clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0 100%);
      height: 170px;
      background: linear-gradient(90deg, #007CB9 0%, #103680 100%), #263D8C;
      padding: 8px 20px;
      transition: 0.5s; }
      #Investment .Investment-box a .no {
        font-weight: 600;
        color: #FFFFFF;
        font-size: 24px; }
      #Investment .Investment-box a p {
        font-size: 24px;
        color: #FFFFFF;
        margin-bottom: 8px; }
      #Investment .Investment-box a .hide-content {
        font-size: 16px;
        line-height: 18px;
        opacity: 0; }
      #Investment .Investment-box a:hover {
        background: #D31618;
        transition: 0.5s; }
        #Investment .Investment-box a:hover .no, #Investment .Investment-box a:hover p {
          color: #FFFFFF; }
        #Investment .Investment-box a:hover .hide-content {
          opacity: 1; }

#Strategy {
  padding: 90px 0px;
  position: relative;
  height: 900px;
  background-color: #f5f5f5;
  padding-top: 180px;
  /* .swiper-slide { padding-bottom: 30px; 
  &:hover { box-shadow: 0px 30px 50px rgba(16, 55, 128, 0.3); }
  } */ }
  #Strategy::after {
    content: '';
    position: absolute;
    top: 0px;
    height: 100%;
    right: 0px;
    background: #00AEEF;
    width: 45%; }
  #Strategy .Strategy-box {
    background-color: #FFFFFF;
    padding: 30px;
    position: relative;
    z-index: 2;
    height: 590px;
    /*  */ }
    #Strategy .Strategy-box .s-no {
      display: inline-block;
      background: linear-gradient(90deg, #007CB9 0%, #103680 100%);
      color: #FFFFFF;
      font-size: 24px;
      text-transform: uppercase;
      padding: 2px 10px; }
    #Strategy .Strategy-box h3 {
      color: #263D8C;
      font-size: 30px;
      font-weight: 400; }
    #Strategy .Strategy-box p {
      line-height: 28px; }
    #Strategy .Strategy-box h6 {
      color: #263D8C;
      font-size: 22px;
      margin-bottom: 10px; }
  #Strategy .swiper-slide {
    width: 80%;
    -webkit-box-shadow: -5px 0px 22px 0px rgba(50, 50, 50, 0.35);
    -moz-box-shadow: -5px 0px 22px 0px rgba(50, 50, 50, 0.35);
    box-shadow: -5px 0px 22px 0px rgba(50, 50, 50, 0.35); }
  #Strategy [class^="swiper-button-"] {
    top: -60px; }
  #Strategy .swiper-button-prev:after, #Strategy .swiper-button-next:after {
    font-size: 0px; }
  #Strategy .swiper-button-prev {
    right: 100px;
    left: initial; }

#esg2 {
  padding: 90px 0px; }
  #esg2 .swiper-button-prev:after, #esg2 .swiper-button-next:after {
    font-size: 0px; }
  #esg2 .tab-content > .tab-pane {
    position: relative; }
  #esg2 .nav-tabs {
    border-bottom: none; }
  #esg2 .nav-link {
    font-size: 30px;
    color: #000;
    padding: 0.5rem 2.5rem;
    text-transform: uppercase; }
  #esg2 .nav {
    justify-content: center; }
  #esg2 .nav-item {
    height: 50px; }
  #esg2 .nav-tabs .nav-link {
    position: relative; }
  #esg2 .nav-tabs .nav-link:before {
    content: '';
    position: absolute;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #007CB9 0%, #103680 100%), #263D8C;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    left: 0px;
    bottom: 0px;
    transition: 0.5s;
    opacity: 0; }
  #esg2 .nav-tabs .nav-link.active {
    border: none;
    position: relative;
    color: #263D8C; }
  #esg2 .nav-tabs .nav-link.active:before {
    width: 100%;
    opacity: 1; }
  #esg2 .tab-content {
    padding: 20px 0 10px; }
  #esg2 .swiper-container2 {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1; }
  #esg2 .esg2-box .esg2-box-right h3 {
    color: #FFFFFF;
    font-weight: 600;
    margin-top: 10px; }
  #esg2 .esg2-box .esg2-box-right p {
    line-height: 22px;
    color: #FFFFFF; }
  #esg2 .swiper-button-prev {
    left: -20px; }
  #esg2 .swiper-button-next {
    right: -20px; }
  #esg2 .swiper-wrapper {
    padding-top: 40px; }
  #esg2 .swiper-pagination-bullet {
    background-color: #D31618;
    width: 10px;
    height: 10px; }
  #esg2 .swiper-pagination-bullets {
    width: auto;
    right: 0px;
    top: 0px;
    bottom: inherit;
    left: inherit; }
  #esg2 .h-800 {
    height: 802px; }
  #esg2 .swiper-button-prev, #esg2 .swiper-button-next {
    top: 58%; }
  #esg2 .fs28.font-weight-7 {
    transform: translate(0px, 35px); }

#download-center {
  background-color: #F0F0F0;
  padding: 90px 0px;
  background: linear-gradient(90deg, #007CB9 0%, #103680 100%), #F0F0F0; }
  #download-center .container {
    position: relative;
    z-index: 2; }
  #download-center .cricle-pat {
    position: absolute;
    right: 0px;
    top: 0px; }
  #download-center .download-center-box {
    margin-bottom: 30px;
    transition: 0.5s; }
    #download-center .download-center-box a {
      display: block;
      clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0 100%);
      height: 142px;
      background-color: #FFFFFF;
      padding: 20px;
      transition: 0.5s; }
      #download-center .download-center-box a .no {
        font-weight: 600;
        color: #D31618;
        font-size: 24px; }
      #download-center .download-center-box a p {
        font-size: 24px;
        color: #263D8C; }
      #download-center .download-center-box a:hover {
        background: #263D8C;
        transition: 0.5s; }
        #download-center .download-center-box a:hover p {
          color: #FFFFFF; }

#footer {
  text-align: center;
  color: #FFFFFF;
  font-size: 14px;
  background-color: #636363;
  padding: 15px 0px; }

#toTop {
  position: fixed;
  bottom: 20px;
  right: 10px;
  cursor: pointer;
  display: none;
  background-color: #f1f1f1;
  border: 0px;
  box-shadow: none;
  border-radius: 4px;
  width: auto;
  z-index: 999;
  line-height: 7px;
  padding: 7px; }

.mobile-hide {
  display: inline-block; }

.mobile-show {
  display: none; }

button:focus {
  outline: none !important; }

#Mid-Conteiner {
  padding-top: 40px; }

.breadcrumb-wrp {
  margin-top: 0 !important; }

.btst-card a {
  text-decoration: underline !important; }

.prevnxt-btn {
  display: block;
  padding: 8px 30px;
  background-color: #333333;
  position: relative;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.5s ease; }

.prevnxt-btn:hover {
  text-decoration: none;
  color: #fff;
  background-color: #1e3ba0; }

.nxt-cta {
  text-align: right; }

.prev-cta:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #333333;
  border-width: 20px;
  margin-top: -20px;
  transition: all 0.5s ease; }

.nxt-cta:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #333333;
  border-width: 20px;
  margin-top: -20px;
  transition: all 0.5s ease; }

.prev-cta:hover.prev-cta:after {
  border-right-color: #1e3ba0; }

.nxt-cta:hover.nxt-cta:after {
  border-left-color: #1e3ba0; }

.nxt-prev-wrp {
  padding: 50px 0; }

.show-this-on-click {
  display: none; }

#brand-highlights {
  position: relative; }
  #brand-highlights::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    height: 100%; }

.keyprojects-bottom {
  position: absolute;
  bottom: 0px;
  left: 0px; }

.contri-project-img-hover {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: #F0F0F0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  transition: 0.5s; }
  .contri-project-img-hover:hover {
    opacity: 0.8; }

.contri-project-img:hover .keyprojects-bottom {
  opacity: 0; }

/* background: linear-gradient(0deg, rgba(19, 72, 158, 0.9), rgba(19, 72, 158, 0.9)); height: 100%; transform: translate(0px, 20px); opacity:0; transition: 0.5s; */
.tcfd-bg {
  background-image: url(../images/tcfd-bg.jpg);
  background-attachment: fixed;
  background-position: center;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover; }

span.extra {
  width: 75px !important; }

.rightNav {
  position: fixed;
  right: 0px;
  top: 12%;
  background-color: #FFFFFF;
  padding: 10px;
  border: solid 1px #e4e4e4;
  z-index: 2; }
  .rightNav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none; }
    .rightNav ul li {
      width: 30px;
      border-bottom: solid 1px #e4e4e4; }
      .rightNav ul li a {
        padding: 8px 0px;
        display: block;
        position: relative; }
        .rightNav ul li a span {
          position: absolute;
          left: -96px;
          top: 10px;
          background-color: #263D8C;
          color: #FFFFFF;
          font-size: 12px;
          width: 86px;
          z-index: 9;
          padding: 6px;
          line-height: 14px;
          opacity: 0;
          transition: .5s; }
        .rightNav ul li a:hover span {
          opacity: 1; }
      .rightNav ul li img {
        width: 100%; }

/*RESPONSIVE*/
/*AK SCREEN*/
/* (1366x768) WXGA Display */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .row {
    margin: 0px; }

  .logo img {
    width: 100px; }

  #header .download-annual {
    /*   position: relative;
      right: 0;
      top: 0;
      font-weight: 700; */
    width: 190px;
    right: 55px;
    top: 9px;
    text-align: center;
    margin-top: 0px; }
    #header .download-annual .mobile-hide {
      display: none; }

  #header .download-annual a {
    background-size: 28px;
    line-height: 17px;
    font-size: 13px; }

  .title-46 h2 {
    font-size: 35px;
    line-height: 36px; }

  #at-a-glance, #Operational-presence, #better-everyday, #Investment, #Strategy, #esg2 {
    padding: 40px 0px; }

  #at-a-glance .glance-left {
    padding-right: 0;
    padding-top: 0; }

  #at-a-glance .p-3, #Operational-presence .p-4 {
    padding: 0rem !important; }

  .bor-right {
    border-right: none; }

  #Operational-presence .Operational-box {
    height: auto;
    padding: 15px;
    margin-bottom: 15px; }

  #Operational-presence .Operational-box h3 {
    background: url(../images/bottom-bor.jpg) no-repeat left bottom; }

  #Operational-presence .Operational-box .know-more {
    position: relative;
    bottom: 0;
    left: 0; }

  #Operational-presence .Product-showcase {
    padding: 20px;
    margin-top: 30px; }

  #Operational-presence .Innovation {
    padding: 10px !important;
    margin-top: 24px; }

  #Operational-presence .col-md-6 {
    padding-left: 0px !important;
    padding-right: 0px !important;
    border: none !important; }

  #chairman .swiper-slide {
    padding-top: 40px; }

  .Chairman-pic img, #chairman .Chairman-box .Chairman-pic {
    width: 100%; }

  #chairman .Chairman-box .Chairman-pic {
    margin-left: 0;
    margin-top: 30px; }

  #chairman::before {
    width: 100%; }

  #chairman::after {
    display: none; }

  #esg {
    height: auto;
    padding: 40px 0;
    background-size: cover; }

  #esg .top-tabs-title ul li a {
    font-size: 20px;
    padding: 10px; }

  #esg .top-tabs-title ul, #esg .top-tabs-title ul li {
    display: inline-block;
    text-align: center; }

  #esg .top-tabs-title ul li {
    width: 160px; }

  .offset-1 {
    margin-left: 0; }

  .home-kpi-no h2 {
    font-size: 42px; }

  .home-kpi-no {
    margin-bottom: 16px; }

  #esg #HighlightsTabs, #esg #ESGTabs {
    margin-bottom: 40px; }

  #Achieving-performance {
    padding: 40px 0px; }

  #Achieving-performance br {
    display: none; }

  #Achieving-performance .performance-box {
    margin-bottom: 20px;
    height: auto; }

  #Achieving-performance .performance-box .performance-inner {
    opacity: 1;
    transform: translate(0px, 0px);
    padding: 22px; }

  #valeCreation, #valeCreation .Achieving-Box, #better-everyday .everyday-box {
    height: auto;
    overflow: hidden; }

  #valeCreation .Achieving-Box a .blue-small-arrow {
    position: relative;
    bottom: 0;
    right: 0px;
    text-align: right; }

  #better-everyday .everyday-box .blue-small-arrow {
    position: relative;
    bottom: 0;
    right: 0;
    padding: 15px 26px; }

  #Investment {
    padding: 15px; }
    #Investment .title-46 h2 {
      margin-bottom: 0px; }
    #Investment .mt-5, #Investment .my-5 {
      margin-top: 1rem !important; }
    #Investment .know-more3 {
      margin-bottom: 20px; }
    #Investment .col-md-4 {
      padding-left: 0px;
      padding-right: 0px; }

  #Strategy::after {
    display: none; }

  #Strategy {
    height: auto; }
    #Strategy .col-xs-4 {
      width: 33.33%; }
    #Strategy [class^="swiper-button-"] {
      top: 32px; }
      #Strategy [class^="swiper-button-"] img {
        width: 40px; }
    #Strategy .swiper-button-next {
      right: 46px; }

  #Strategy .Strategy-box {
    height: auto; }

  #esg2 .nav-link {
    padding: 0.5rem 0.5rem;
    font-size: 18px; }

  #esg2 .tab-content {
    padding: 40px 0 10px; }

  #esg2 .p-5 {
    padding: 3.5rem !important; }
  #esg2 .swiper-button-next {
    right: 10px; }
  #esg2 .swiper-button-prev {
    left: 10px; }
  #esg2 [class^="swiper-button-"] img {
    width: 40px; }

  #banner {
    height: auto;
    text-align: center !important;
    padding-top: 30px;
    padding-bottom: 50px; }

  #banner .plus-pic {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 50px; }
    #banner .plus-pic img {
      width: 100%; }

  #banner .banner-title, #banner .BetterEveryday, #banner .strong-tomorrow {
    position: relative;
    left: 0px;
    top: 0;
    bottom: 0px;
    text-align: center; }

  #chairman .swiper-button-prev, #chairman .swiper-button-next {
    width: 170px;
    right: 0;
    top: 0;
    color: #FFFFFF;
    font-size: 16px;
    position: relative;
    margin-top: 14px; }

  #Investment .know-more, #Strategy .know-more {
    margin-bottom: 30px; }

  .scroll-down {
    display: none; }

  #header {
    height: auto; }

  #banner .banner-title {
    font-size: 42px; }

  #banner .strong-tomorrow {
    font-size: 36px; }

  #banner .BetterEveryday {
    line-height: 25px; }

  #banner .banner-title br, #banner .strong-tomorrow br {
    display: none; }

  .wrapper {
    width: 100%;
    height: auto;
    position: relative;
    left: 0;
    top: 0;
    transform: translate(0%, 0%); }

  #banner #bnr-vid {
    transform: scale(1.3);
    position: relative; }

  .wrapper .content_area {
    position: relative;
    left: 0;
    top: 0%;
    transform: translateX(0%);
    height: 100%;
    width: 100%;
    margin-bottom: 20px;
    padding-top: 50px; }

  .wrapper .content_area .pointer-title {
    position: relative;
    left: 0px !important;
    top: 0px !important;
    width: 100%;
    opacity: 1;
    height: auto;
    margin-bottom: 30px; }

  .wrapper .content_area .pointer-title .pointer-list {
    display: none; }

  .content_area {
    display: flex;
    flex-wrap: wrap; }
    .content_area .pointer-title {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%; }

  #banner .banner-readmore {
    display: block;
    position: relative;
    top: 0;
    left: 0; }

  .wrapper .content_area .pointer-title:nth-child(2) .banner-readmore {
    left: 0px !important; }

  .wrapper .content_area .pointer-title:nth-child(4) .banner-readmore {
    left: 0px !important;
    top: 0px !important; }

  .pointer-title h3 {
    font-size: 24px; }

  .fancybox-p p {
    font-size: 18px; }

  #Achieving-performance .performance-box h6 {
    display: none; }

  #valeCreation {
    padding: 40px 0px; }

  #esg2 .swiper-pagination-bullets {
    width: 100%;
    left: 0px; }

  .wrapper .content_area .pointer-title:nth-child(1) {
    transition-delay: 0.1s;
    height: auto; }

  .wrapper .content_area .pointer-title:nth-child(2) {
    width: 100%;
    height: auto;
    padding-left: 0; }

  .wrapper .content_area .pointer-title:nth-child(3) {
    width: 100%;
    height: auto;
    padding-right: 0px; }

  .wrapper .content_area .pointer-title:nth-child(4) {
    width: 100%;
    height: auto;
    padding-top: 0px;
    padding-right: 0px; }

  .container {
    position: relative;
    z-index: 2; }

  .bor-bottom-white, .bor-right-white {
    border: none; }

  #valeCreation .Purpose-Box {
    margin-bottom: 20px;
    height: auto; }

  #esg2 .fs28.font-weight-7 {
    transform: translate(0px, 0px);
    text-align: center;
    margin-bottom: 20px; }

  #esg2 .swiper-button-prev, #esg2 .swiper-button-next {
    top: 28%; }

  #Operational-presence .Operational-left {
    padding-right: 0px; }

  #Operational-presence .mt-5, #Operational-presence .my-5 {
    margin-top: 1rem !important; }

  #chairman .left-chair {
    padding-top: 0; }

  #chairman {
    height: auto;
    padding-bottom: 30px; }

  #Investment .Investment-box a .hide-content {
    opacity: 1; }

  #Investment .Investment-box a {
    height: auto; }

  #Strategy .swiper-slide {
    box-shadow: none; }

  .prev-cta:after, .nxt-cta:after {
    display: none; }

  .prevnxt-btn, .nxt-cta {
    text-align: center;
    padding: 10px 10px; }

  .nxt-prev-wrp {
    padding: 30px 0; }

  .mobile-hide {
    display: none !important; }

  #chairman .swiper-slide:nth-child(2) .swiper-button-prev {
    top: 0px; }

  #chairman .swiper-slide:nth-child(1) .swiper-button-next {
    top: 0px; }

  .rightNav {
    display: none; }

  .banner-text {
    padding-top: 30px !important; } }
@media only screen and (min-device-width: 481px) and (max-device-width: 767px) {
  .row {
    margin: 0px; }

  .logo img {
    width: 100px; }

  #header .download-annual {
    /*   position: relative;
      right: 0;
      top: 0;
      font-weight: 700; */
    width: 190px;
    right: 10px;
    text-align: center;
    margin-top: 0px; }
    #header .download-annual .mobile-hide {
      display: none; }

  #header .download-annual a {
    background-size: 28px;
    line-height: 17px;
    font-size: 13px; }

  .title-46 h2 {
    font-size: 35px;
    line-height: 36px; }

  #at-a-glance, #Operational-presence, #better-everyday, #Investment, #Strategy, #esg2 {
    padding: 40px 0px; }

  #at-a-glance .glance-left {
    padding-right: 0;
    padding-top: 0; }

  #at-a-glance .p-3, #Operational-presence .p-4 {
    padding: 0rem !important; }

  .bor-right {
    border-right: none; }

  #Operational-presence .Operational-box {
    height: auto;
    padding: 15px;
    margin-bottom: 15px; }

  #Operational-presence .Operational-box h3 {
    background: url(../images/bottom-bor.jpg) no-repeat left bottom; }

  #Operational-presence .Operational-box .know-more {
    position: relative;
    bottom: 0;
    left: 0; }

  #Operational-presence .Product-showcase {
    padding: 20px; }

  #Operational-presence .Innovation {
    padding: 10px !important;
    margin-top: 24px; }

  #Operational-presence .col-md-6 {
    padding-left: 0px !important;
    padding-right: 0px !important; }

  #chairman .swiper-slide {
    padding-top: 40px; }

  .Chairman-pic img, #chairman .Chairman-box .Chairman-pic {
    width: 100%; }

  #chairman .Chairman-box .Chairman-pic {
    margin-left: 0;
    margin-top: 50px; }

  #chairman::before {
    width: 100%; }

  #chairman::after {
    display: none; }

  #esg {
    height: auto;
    padding: 40px 0;
    background-size: cover; }

  #esg .top-tabs-title ul li a {
    font-size: 20px;
    padding: 10px; }

  #esg .top-tabs-title ul, #esg .top-tabs-title ul li {
    display: inline-block;
    text-align: center; }

  #esg .top-tabs-title ul li {
    width: 160px; }

  .offset-1 {
    margin-left: 0; }

  .home-kpi-no h2 {
    font-size: 42px; }

  .home-kpi-no {
    margin-bottom: 16px; }

  #esg #HighlightsTabs, #esg #ESGTabs {
    margin-bottom: 40px; }

  #Achieving-performance {
    padding: 40px 0px; }

  #Achieving-performance br {
    display: none; }

  #Achieving-performance .performance-box {
    margin-bottom: 20px;
    height: auto; }

  #Achieving-performance .performance-box .performance-inner {
    opacity: 1;
    transform: translate(0px, 0px);
    padding: 22px; }

  #valeCreation, #valeCreation .Achieving-Box, #better-everyday .everyday-box {
    height: auto;
    overflow: hidden; }

  #valeCreation .Achieving-Box a .blue-small-arrow {
    position: relative;
    bottom: 0;
    right: 0px;
    text-align: right; }

  #better-everyday .everyday-box .blue-small-arrow {
    position: relative;
    bottom: 0;
    right: 0;
    padding: 15px 26px; }

  #Investment {
    padding: 15px; }
    #Investment .title-46 h2 {
      margin-bottom: 0px; }
    #Investment .mt-5, #Investment .my-5 {
      margin-top: 1rem !important; }
    #Investment .know-more3 {
      margin-bottom: 20px; }
    #Investment .col-md-4 {
      padding-left: 0px;
      padding-right: 0px; }

  #Strategy::after {
    display: none; }

  #Strategy {
    height: auto; }
    #Strategy .col-xs-4 {
      width: 33.33%; }
    #Strategy [class^="swiper-button-"] {
      top: 32px; }
      #Strategy [class^="swiper-button-"] img {
        width: 40px; }
    #Strategy .swiper-button-next {
      right: 46px; }

  #Strategy .Strategy-box {
    height: auto; }

  #esg2 .nav-link {
    padding: 0.5rem 0.5rem;
    font-size: 18px; }

  #esg2 .tab-content {
    padding: 40px 0 10px; }

  #esg2 .p-5 {
    padding: 3.5rem !important; }
  #esg2 .swiper-button-next {
    right: 10px; }
  #esg2 .swiper-button-prev {
    left: 10px; }
  #esg2 [class^="swiper-button-"] img {
    width: 40px; }

  #banner {
    height: auto;
    text-align: center !important;
    padding-top: 140px;
    padding-bottom: 50px; }

  #banner .plus-pic {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 50px; }
    #banner .plus-pic img {
      width: 100%; }

  #banner .banner-title, #banner .BetterEveryday, #banner .strong-tomorrow {
    position: relative;
    left: 0px;
    top: 0;
    bottom: 0px;
    text-align: center; }

  #chairman .swiper-button-prev, #chairman .swiper-button-next {
    width: 170px;
    right: 0;
    top: 0;
    color: #FFFFFF;
    font-size: 16px;
    position: relative;
    margin-top: 14px; }

  #chairman .swiper-slide:nth-child(2) .swiper-button-prev {
    top: 0px; }

  #chairman .swiper-slide:nth-child(1) .swiper-button-next {
    top: 0px; }

  .rightNav {
    display: none; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .row {
    margin: 0px; }

  .logo img {
    width: 100px; }

  #header .download-annual {
    width: 190px;
    right: 80px;
    text-align: center;
    margin-top: 8px; }
    #header .download-annual .mobile-hide {
      display: none; }

  #header .download-annual a {
    background-size: 28px;
    line-height: 17px;
    font-size: 13px; }

  .title-46 h2 {
    font-size: 35px;
    line-height: 36px; }

  #at-a-glance, #Operational-presence, #better-everyday, #Investment, #Strategy, #esg2 {
    padding: 40px 0px; }

  #at-a-glance .glance-left {
    padding-right: 0;
    padding-top: 0; }

  #at-a-glance .p-3, #Operational-presence .p-4 {
    padding: 0rem !important; }

  .bor-right {
    border-right: none; }

  #Operational-presence .Operational-box {
    padding: 15px;
    margin-bottom: 15px; }

  #Operational-presence .Operational-box h3 {
    background: url(../images/bottom-bor.jpg) no-repeat left bottom; }

  #Operational-presence .Operational-box .know-more {
    position: relative;
    bottom: 0;
    left: 0; }

  #Operational-presence .Product-showcase {
    padding: 20px;
    margin-top: 20px; }

  #Operational-presence .Innovation {
    padding: 10px !important;
    margin-top: 24px; }

  #Operational-presence .col-md-6 {
    padding-left: 0px !important;
    padding-right: 0px !important; }

  #chairman .swiper-slide {
    padding-top: 40px; }

  /*   .Chairman-pic img,#chairman .Chairman-box .Chairman-pic { width: 100%; } */
  #chairman .Chairman-box .Chairman-pic {
    margin-left: 0;
    margin-top: 50px; }

  #chairman::before {
    width: 100%; }

  #chairman::after {
    display: none; }

  #esg {
    height: auto;
    padding: 40px 0;
    background-size: cover; }

  #esg .top-tabs-title ul li a {
    font-size: 20px;
    padding: 10px; }

  #esg .top-tabs-title ul, #esg .top-tabs-title ul li {
    display: inline-block;
    text-align: center; }

  #esg .top-tabs-title ul li {
    width: 280px; }

  .offset-1 {
    margin-left: 0; }

  .home-kpi-no h2 {
    font-size: 42px; }

  .home-kpi-no {
    margin-bottom: 16px; }

  #esg #HighlightsTabs, #esg #ESGTabs {
    margin-bottom: 40px; }

  #Achieving-performance {
    padding: 40px 0px; }

  #Achieving-performance br {
    display: none; }

  #Achieving-performance .performance-box {
    margin-bottom: 20px;
    height: 490px; }

  #Achieving-performance .performance-box .performance-inner {
    opacity: 1;
    transform: translate(0px, 0px);
    padding: 22px; }

  #valeCreation, #valeCreation .Achieving-Box, #better-everyday .everyday-box {
    overflow: hidden; }

  #valeCreation .Achieving-Box a .blue-small-arrow {
    position: relative;
    bottom: 0;
    right: 0px;
    text-align: right; }

  #better-everyday .everyday-box .blue-small-arrow {
    position: relative;
    bottom: 0;
    right: 0;
    padding: 15px 26px; }

  #Investment {
    padding: 15px; }
    #Investment .title-46 h2 {
      margin-bottom: 0px; }
    #Investment .mt-5, #Investment .my-5 {
      margin-top: 1rem !important; }
    #Investment .know-more3 {
      margin-bottom: 20px; }
    #Investment .col-md-4 {
      padding-left: 0px;
      padding-right: 0px; }

  #Strategy::after {
    display: none; }

  #Strategy {
    height: auto; }
    #Strategy .col-xs-4 {
      width: 33.33%; }
    #Strategy [class^="swiper-button-"] {
      top: 32px; }
      #Strategy [class^="swiper-button-"] img {
        width: 40px; }
    #Strategy .swiper-button-next {
      right: 46px; }

  #Strategy .Strategy-box {
    height: auto; }

  #esg2 .nav-link {
    padding: 0.5rem 0.5rem;
    font-size: 18px; }

  #esg2 .tab-content {
    padding: 40px 0 10px; }

  #esg2 .p-5 {
    padding: 3.5rem !important; }
  #esg2 .swiper-button-next {
    right: 10px; }
  #esg2 .swiper-button-prev {
    left: 10px; }
  #esg2 [class^="swiper-button-"] img {
    width: 40px; }

  #banner .strong-tomorrow {
    right: 30px;
    bottom: 110px;
    font-size: 50px; }

  #banner .banner-title {
    left: 30px;
    top: 10px;
    font-size: 46px; }

  #banner .banner-title br {
    display: none; }

  #banner #bnr-vid {
    transform: scale(0.85); }

  #banner .BetterEveryday {
    left: 30px;
    bottom: 40px; }

  /*   #banner {height: auto; text-align: center !important; padding-top: 140px; padding-bottom: 50px;}
    #banner .plus-pic {position: relative; width: 100%; height: auto;  margin-top: 50px;
    img { width: 100%; }
    } */
  /*   #banner .banner-title,#banner .BetterEveryday,#banner .strong-tomorrow {position: relative; left: 0px; top: 0; bottom:0px; text-align: center;} */
  #chairman .swiper-button-prev, #chairman .swiper-button-next {
    width: 170px;
    right: 0;
    top: 0;
    color: #FFFFFF;
    font-size: 16px;
    position: relative;
    margin-top: 14px; }

  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100% !important;
    max-width: 100% !important; }

  .col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50% !important;
    max-width: 50% !important; }

  #chairman .left-chair {
    padding-top: 0; }

  #chairman {
    height: auto; }

  #Investment .Investment-box {
    margin: 10px;
    margin-top: 20px; }

  .Purpose-Box {
    margin: 18px; }

  .wrapper .content_area .pointer-title .pointer-list {
    display: none; }

  .drop-list-head a {
    word-break: break-all; }

  #chairman .swiper-slide:nth-child(1) .swiper-button-next {
    top: 0px; }

  #chairman .swiper-slide:nth-child(2) .swiper-button-prev {
    top: 0px; }

  .rightNav ul li {
    width: 16px;
    border-bottom: solid 1px #e4e4e4; }

  #chairman .Chairman-box .Chairman-pic .right-Chairman {
    left: 435px; }

  .fs26 {
    font-size: 23px; }

  .wrapper .content_area .pointer-title:hover .banner-readmore {
    opacity: 1; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  #chairman .swiper-button-prev, #chairman .swiper-button-next {
    right: -180px; }

  .row {
    margin: 0px; }

  .logo img {
    width: 100px; }

  #header .download-annual {
    /*   position: relative;
      right: 0;
      top: 0;
      font-weight: 700; */
    width: 190px;
    right: 80px;
    text-align: center;
    margin-top: 8px; }
    #header .download-annual .mobile-hide {
      display: none; }

  #header .download-annual a {
    background-size: 28px;
    line-height: 17px;
    font-size: 13px; }

  .title-46 h2 {
    font-size: 35px;
    line-height: 36px; }

  #at-a-glance, #Operational-presence, #better-everyday, #Investment, #Strategy, #esg2 {
    padding: 40px 0px; }

  #at-a-glance .glance-left {
    padding-right: 0;
    padding-top: 0; }

  #at-a-glance .p-3, #Operational-presence .p-4 {
    padding: 0rem !important; }

  .bor-right {
    border-right: none; }

  #Operational-presence .Operational-box {
    padding: 15px;
    margin-bottom: 15px; }

  #Operational-presence .Operational-box h3 {
    background: url(../images/bottom-bor.jpg) no-repeat left bottom; }

  #Operational-presence .Operational-box .know-more {
    position: relative;
    bottom: 0;
    left: 0; }

  #Operational-presence .Product-showcase {
    padding: 20px; }

  #Operational-presence .Innovation {
    padding: 10px !important;
    margin-top: 24px; }

  #Operational-presence .col-md-6 {
    padding-left: 0px !important;
    padding-right: 0px !important; }

  #chairman .swiper-slide {
    padding-top: 40px; }

  /*   .Chairman-pic img,#chairman .Chairman-box .Chairman-pic { width: 100%; } */
  #chairman .Chairman-box .Chairman-pic {
    margin-left: 0;
    margin-top: 50px; }

  #chairman::before {
    width: 100%; }

  #chairman::after {
    display: none; }

  #esg {
    height: auto;
    padding: 40px 0;
    background-size: cover; }

  #esg .top-tabs-title ul li a {
    font-size: 20px;
    padding: 10px; }

  #esg .top-tabs-title ul, #esg .top-tabs-title ul li {
    display: inline-block;
    text-align: center; }

  #esg .top-tabs-title ul li {
    width: 160px; }

  .offset-1 {
    margin-left: 0; }

  .home-kpi-no h2 {
    font-size: 42px; }

  .home-kpi-no {
    margin-bottom: 16px; }

  #esg #HighlightsTabs, #esg #ESGTabs {
    margin-bottom: 40px; }

  #Achieving-performance {
    padding: 40px 0px; }

  #Achieving-performance br {
    display: none; }

  #Achieving-performance .performance-box {
    margin-bottom: 20px;
    height: 501px; }

  #Achieving-performance .performance-box h6 {
    font-size: 26px; }

  #Achieving-performance .performance-box .performance-inner {
    opacity: 1;
    transform: translate(0px, 0px);
    padding: 22px; }

  #valeCreation .Achieving-Box a .blue-small-arrow {
    position: relative;
    bottom: 0;
    right: 0px;
    text-align: right; }

  #better-everyday .everyday-box .blue-small-arrow {
    position: relative;
    bottom: 0;
    right: 0;
    padding: 15px 26px; }

  #Investment {
    padding: 15px; }
    #Investment .title-46 h2 {
      margin-bottom: 0px; }
    #Investment .mt-5, #Investment .my-5 {
      margin-top: 1rem !important; }
    #Investment .know-more3 {
      margin-bottom: 20px; }
    #Investment .col-md-4 {
      padding-left: 0px;
      padding-right: 0px; }

  #Strategy::after {
    display: none; }

  #Strategy {
    height: auto; }
    #Strategy .col-xs-4 {
      width: 33.33%; }
    #Strategy [class^="swiper-button-"] {
      top: 0px; }
      #Strategy [class^="swiper-button-"] img {
        width: 40px; }
    #Strategy .swiper-button-next {
      right: 46px; }

  #Strategy .Strategy-box {
    height: auto; }

  #esg2 .nav-link {
    padding: 0.5rem 0.5rem;
    font-size: 18px; }

  #esg2 .tab-content {
    padding: 40px 0 10px; }

  #esg2 .p-5 {
    padding: 3.5rem !important; }
  #esg2 .swiper-button-next {
    right: 10px; }
  #esg2 .swiper-button-prev {
    left: 10px; }
  #esg2 [class^="swiper-button-"] img {
    width: 40px; }

  /*   #banner {height: auto; text-align: center !important; padding-top: 140px; padding-bottom: 50px;}
    #banner .plus-pic {position: relative; width: 100%; height: auto;  margin-top: 50px;
    img { width: 100%; }
    }
    #banner .banner-title,#banner .BetterEveryday,#banner .strong-tomorrow {position: relative; left: 0px; top: 0; bottom:0px; text-align: center;} */
  #banner .strong-tomorrow {
    right: 30px;
    bottom: 110px;
    font-size: 36px; }

  #banner .banner-title {
    left: 30px;
    top: 10px;
    font-size: 36px; }

  #banner #bnr-vid {
    transform: scale(0.85); }

  #banner .BetterEveryday {
    left: 30px;
    bottom: 40px; }

  #chairman .Chairman-box .Chairman-pic .right-Chairman {
    width: 200px;
    left: 440px; }

  #chairman .left-chair {
    padding-top: 100px; }

  #esg .highlight-mid .tabtitle2 {
    padding-left: 30px !important; }

  .Achieving-Box h2 {
    font-size: 26px; }

  .wrapper .content_area .pointer-title .pointer-list {
    display: none; }

  #chairman .swiper-slide:nth-child(2) .swiper-button-prev {
    top: 520px; }

  .rightNav ul li {
    width: 20px;
    border-bottom: solid 1px #e4e4e4; }

  .wrapper .content_area .pointer-title:hover .banner-readmore {
    opacity: 1; } }

/*# sourceMappingURL=style.css.map */