[id*="custom-html"]{padding:0 !important;}
.text-bold{font-weight: 500;}
.text-show{display: block !important;}
.text-light{color: #fff;}
.text-blue{color: #00b2ff;}
.text-004fee{color: #004fee;}
.text-002855{color: #002855;}
.text-note{font-size: 15px;}
.bg-light-blue{background: #e5f7ff;}
.bg-004fee{background: #ccdcfc;}
.bg-002855{background: #ccd4dd;}
.bg-blue{background: #00b2ff}
.bg-white{background: #fff;}
.break-line{display: block;}
.blue-line {border-top:1px solid #00b2ff; width: 100%;}
.small-text{font-size: 15px !important;}
.desktop-block{display: block;}
.mobile-block{display: none;}
.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;}

.president-quotation-section {position: relative; height: 600px;}
.denise-quote-section {margin-top: -5rem;}
.karsten-fig {position: absolute; top: 0; left: -5rem; z-index: 1;}
.denise-fig {position: absolute; top: 0; right: -5rem; z-index: 1;}
.karsten-quote {background: rgba(0, 86, 163, 0.2); width: 92%; position: absolute; bottom: 0; padding: 0 0 0 27%; right: 0;}
.denise-quote {background: rgba(0, 86, 163, 0.2); width: 92%; position: absolute; bottom: 0; padding: 0 15% 0 10%; left: -10%;}
.quotation-section blockquote {padding: 0 !important;}
.quotation-section blockquote footer {padding: 0 0 4rem 4rem;}
.quotation-section blockquote {margin: 0!important; border-color: transparent !important; padding: 0 !important;}
.quotation-section blockquote p {font-size: 1rem !important; padding: 2rem 4rem !important;}
.quotation-section blockquote p:before {font-family: 'IBM Plex Sans'; left: -3rem !important; color: #404040 !important;}

.esg-governance-section {padding: 2rem;}
.board-directors-section {overflow: hidden;}
.board-section1, .board-section2{position: relative; margin: 0 2rem;}
.board-section2 {margin-top: 120px;}
.vertical-line {border-left: 1px solid #00b2ff; position: absolute; left: 0; top: 0;}
.vertical-line-1, .vertical-line-2{height: 100%; }
.board-derectors-tag.d-flex {height: 100px;}
.tag{padding: 10px; margin-top: 20px; margin-left: -20px; width: fit-content; position: relative;}
.tag1 {padding: 10px; margin:0 0 0 -20px; width: fit-content; position: relative;}
.tag2{margin-top: 0;}
.tag-content{padding: 5px 2rem 0;}
.tag-content ul{margin-top: 0;}
.tag-content ul li{list-style: disc;}

.swiper {width: 100%; height: 140px;}
.swiper-slide {text-align: center; font-size: 18px; display: flex !important; justify-content: center; align-items: center; height: auto; overflow: hidden;}
.swiper-slide img {display: block; width: 170px; max-width: 100%; height: auto;}
.swiper-pagination {position: relative !important; margin: 0 auto; padding-top: 1rem;}
.swiper-pagination-bullets.swiper-pagination-horizontal {top: var(--swiper-pagination-top,10px);}

.swiper-slide .overlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 140px; width: 170px; opacity: 0; transition: .5s ease; background-color:#00b2ff;}
.swiper-slide:hover .overlay {opacity: 1;}
.swiper-slide .text a{color: #fff;}
.swiper-slide .text a:before {background-color: transparent !important;}
.swiper-slide .text {font-size:18px; line-height: 1.2rem; color: #fff; position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;}


#stakeholder-section h3{display: none;}
#stakeholder-section .table-responsive {overflow-x: auto; -webkit-overflow-scrolling: touch;}
#stakeholder-section table tr {border-bottom: none !important;}
#stakeholder-section table td, #stakeholder-section table th {max-width: 100% !important; word-break: keep-all !important;}
#stakeholder-section table th {text-align: center !important;}
#stakeholder-section table th:nth-child(1){width: 65px;}
#stakeholder-section table th:nth-child(2){width: 84px;}
#stakeholder-section table th:nth-child(3){width: 84px;}
#stakeholder-section table th:nth-child(4){width: 40px;}
#stakeholder-section table th:nth-child(5), table th:nth-child(6){width: 75px;}
#stakeholder-section table th:nth-child(7){width: 95px;}
#stakeholder-section table td{padding: 10px !important;}
#stakeholder-section .table-grey{background: #ccc;}
#stakeholder-section .table-light{background: #efefef;}
#stakeholder-section .table-borderless {border: none !important;}
#stakeholder-section td.nest-column {padding: 0 5px 0 0!important; vertical-align: top; font-weight: 500;}
#stakeholder-section td.nest-last-column{padding: 0 0 0 5px!important; vertical-align: top;}
#stakeholder-section td.last-column {padding: 5px 0 0 5px!important; vertical-align: top;}
#stakeholder-section td.nest-row{padding:5px 0!important;}

.nest-column-table1 td {font-weight: 500; vertical-align: top;}
.nest-table-economic {height: 466px;}
.nest-table-green-products {height: 80px;}
.nest-table-company-gov {height: 256px;}
.nest-table-supply-chain {height: 204px;}
.nest-table-environmental {height: 310px;}
.nest-table-environmental-protection {height: 222px;}
.nest-table-social {height: 513px;}
.nest-table-inclusive-workplace {height: 407px;}
.nest-table-community-contribution {height: 76px;}
.nest-row-table1 td, .nest-row-table2 td {height: 72px; text-align: center;}
#stakeholder-section .nest-table td {width: 25%;}
#stakeholder-section table span.material-icons-round {font-size: 20px;}
#stakeholder-section .accord-header {color: #00b2ff; cursor: pointer;}
#stakeholder-section .accord-content {display: none;}


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

#sdg-section h3{display: none;}
.sdg-box{position: relative; width:150px; height:auto; margin: 0 0.5rem 1rem;}
.sdg-box .cover{position:absolute; top:0; width:100%; height:100%;}
.sdg-box .icon{position:absolute; top:50%; transform:translate(0, -50%); left:0; right:0; margin:0 auto; text-align:center;}
.sdg-box .icon i{opacity:0; transition: all 0.35s ease-in-out;}
.sdg-box:hover{cursor:pointer;}
.sdg-box:hover .cover{background:rgba(0,0,0,0.8);}
.sdg-box:hover .icon i{opacity:1; background:#fff; color:#000; font-size:2rem; padding:15px; border-radius:50%; text-align:center;}

.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;
  }
}

.modal-body h5{margin:0 0 1rem !important; line-height:normal;}
.modal-body .close{position:absolute; color:#000; top:0; right:0;}
.modal-body .close:hover{cursor: pointer;}
.modal-body .close i{font-size:2rem; padding:10px;}
.modal-open {overflow: hidden;}
.modal-open .modal {overflow-x: hidden!important; overflow-y: auto!important;}
.modal {position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100% !important; height: 100% !important; max-height:none !important; padding:unset!important; border-radius: 0 !important; background-color:rgba(0,0,0,0.8) !important; overflow: hidden !important; outline: 0;}
.modal-dialog {position: relative; width: auto; margin: 0.5rem; pointer-events: none;}
.modal.fade .modal-dialog {transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; -webkit-transform: translate(0, -50px);  transform: translate(0, -50px);}
.modal.show .modal-dialog {-webkit-transform: none; transform: none;}
.modal-dialog-scrollable {display: -ms-flexbox; display: flex; max-height: calc(100% - 1rem);}
.modal-dialog-scrollable .modal-content {max-height: calc(100vh - 1rem); overflow: hidden;}
.modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer {-ms-flex-negative: 0; flex-shrink: 0;}
.modal-dialog-scrollable .modal-body {overflow-y: auto;}
.modal-dialog-centered {display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-height: calc(100% - 1rem);}
.modal-dialog-centered::before {display: block; height: calc(100vh - 1rem); content: "";}
.modal-dialog-centered.modal-dialog-scrollable {-ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; height: 100%;}
.modal-dialog-centered.modal-dialog-scrollable .modal-content {max-height: none;}
.modal-dialog-centered.modal-dialog-scrollable::before {content: none;}
.modal-content {position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; outline: 0;}
.modal-backdrop {position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000;}
.modal-backdrop.fade {opacity: 0;}
.modal-backdrop.show {opacity: 0.5;}
.modal-header {display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;}
.modal-header .close {padding: 1rem 1rem; margin: -1rem -1rem -1rem auto;}
.modal-title {margin-bottom: 0; line-height: 1.5;}
.modal-body {position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 2rem;}
.modal-scrollbar-measure {position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll;}
.modal .modal-content {max-width: 800px; height: 25vw !important; margin: 1.75rem auto;}
.modal-dialog-scrollable {max-height: calc(100% - 3.5rem);}
.modal-dialog-scrollable .modal-content {max-height: calc(100vh - 3.5rem);}
.modal-dialog-centered {min-height: calc(100% - 3.5rem);}
.modal-dialog-centered::before {height: calc(100vh - 3.5rem);}
.modal .modal-content ul {text-align: left !important;}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {transition: none;}
}

@media (max-width: 1100px) {
    .karsten-fig {left: -8rem;}
    .quotation-section blockquote p {font-size: 1.4rem !important; line-height: 1.8rem;}
    .quotation-section blockquote p:before {left: 0 !important; font-size: 7rem !important; top: 5rem !important;}
    #sdg-section {padding: 2rem 1rem;}
}

@media (max-width:850px) {
    .nest-column-table1 td, .nest-column-table2 td, .nest-column-table3 td, .nest-row-table1 td{background: #fff;}
    .break-line {display: block; margin-left: 0;}
    .nest-row-table2 {margin: 0 !important; max-width: 100% !important;}
}

@media (max-width: 800px) {
    .president-quotation-section {height: auto;}
    .karsten-fig, .denise-fig{position: relative; left: 0; right: 0; margin: auto;}
    .karsten-quote, .denise-quote, .karsten-note, .denise-note {position: relative; width: 100%; left: 0; right: 0; top: 0; bottom: 0; padding: 0;}
    .quotation-section blockquote {padding: 2rem 1rem !important; margin-bottom: 1rem !important;}
    .quotation-section blockquote p {font-size: 1rem !important; padding: 0 0 1rem 0!important;}
    .quotation-section blockquote p:before {left: 0 !important; position: relative !important; font-size: 5rem !important; top: 2rem !important;}
    .quotation-section blockquote footer {padding: 0;}
    .quotation-section blockquote footer cite{padding: 0 !important;}
    .denise-note p{margin-top: 1rem !important;}
}

@media (max-width: 700px) {
    .quotation-section {height: auto;}
    .president-section .row {flex-direction: column;}
    .president-section .row:last-child {flex-direction: column-reverse !important;}
    .president-fig {position: relative;}
    .karsten-bg, .denise-bg{z-index: -1;}
	#sdg-section {padding: 2rem 0;}
}

@media (max-width: 500px) {
    .desktop-block{display: none;}
    .mobile-block{display: block;}
    .denise-quote-section {margin-top:0;}
	.top-header-canvas .banner-title{width:80%; margin: 0 auto; left:0; right:0;}
    .board-section2 {margin-top: 0;}
	.sdg-box{margin:5px;}
    #report-section .col-md-5 {width: 90%;}
    .modal-body {padding: 3rem 1rem 1rem;}
    .modal .modal-content {width: 80vw; height: calc(100vh - 60px) !important;}
}