﻿.EsgStrategiesScrollDiv {
    overflow: hidden;
    position: relative;
}

@media screen and (max-width: 1600px) {
    .pc-4-right {
        padding-right: 0 !important;
    }

    #FigureUnitTextDiv {
        font-size: 40px !important;
    }

    .pcb-content-inner {
        padding: 50px 0 0;
    }
}

@media screen and (max-width: 1400px) {
    .double-strategy-more-item-box {
        flex-wrap: wrap !important;
    }
}

@media screen and (max-width: 1300px) {
    .font-65 {
        font-size: 36px !important;
    }

    .font-40 {
        font-size: 28px !important;
    }

    .font-35 {
        font-size: 24px !important;
    }

    .font-34 {
        font-size: 24px !important;
    }

    .font-32 {
        font-size: 24px !important;
    }

    .font-25 {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .font-21 {
        font-size: 18px !important;
        line-height: 28px !important;
    }

    .text-normal {
        font-size: 16px !important;
    }

    .highlight-table thead th {
        font-size: 14px !important;
    }

    .highlight-table tbody td {
        text-align: left;
    }

    .highlight-table tbody td:first-child {
        text-align: left;
    }

    .hlni-year span {
        line-height: 32px;
    }

    .hlni-content {
        padding-top: 0 !important;
    }

    #LatestNewsDiv .green-box {
        padding: 30px 20px 40px !important;
    }
}


@media screen and (max-width: 1199px) {
    .esg-updates-bottom-button{
        bottom: -25%!important;
    }
    #ToolsHomeDiv {
        padding: 20px !important;
    }

    .esg-actions h6, .esg-updates h6 {
        margin-top: 120px;
    }

    #PressHomeDiv {
        padding: 0 20px 20px !important;
    }

    #FigureUnitTextDiv {
        color: white !important;
    }

    #ProfileContent4ImageBoxDiv {
        align-items: flex-start !important;
    }

    #ProfileContent4ImageBoxDiv img {
        max-width: calc(100% - 20px);
    }

    .culture-strategy-btn .indicator {
        display: none !important;
    }

    #CultureStrategyDiv {
        justify-content: center !important;
    }

    #Culture4Div .logo-container {
        flex-direction: column !important;
    }

    #Culture4Div .old-logo-container {
        margin-bottom: 20px !important;
    }

    #Culture5Div>.row>.col-12 {
        margin-bottom: 20px !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    #Culture5Div .culture-card .description {
        min-height: 66px;
    }

    .pcb-content-inner {
        padding: 60px 0 0;
    }
}

@media screen and (max-width: 991px) {
    #EsgUpdatesRowDiv > div.col-8{
        height: 45vh!important;
    }
    #ShowUpdatesDiv{
        padding: 0!important;
    }

    #ProfileContent2Div .row {
        flex-direction: column-reverse;
    }

    #ProfileContent2ImageBoxDiv {
        margin: 40px 0;
    }

    #ProfileContent2BoxDiv {
        padding-bottom: 0 !important;
    }

    .top-header .right {
        display: none;
    }

    .double-strate-item h6 {
        text-align: center;
        margin-bottom: 10px;
    }

    .EsgStrategiesScrollDiv {
        height: initial !important;
    }

    #ESGBoxDiv {
        margin-top: 0 !important;
        border-radius: 0 !important;
    }

    .s-esg-box {
        padding-top: 155px !important;
    }

    .gsct-btn {
        width: 100%;
        max-width: 50%;
        margin-bottom: 10px;
    }

    .financial-results .quarterly-results .header {
        padding: 15px;
    }

    .quarterly-results>div>.text>.text {
        padding: 15px;
    }

    .event-label {
        width: auto;
    }

    .footer {
        background-image: none;
    }

    .mobile-footer-background {
        width: 100%;
        height: 100px;
        background-image: url(../img/footer.png);
        background-position: initial;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .home-press-label {
        margin: 20px 0 !important;
    }

    .highlight-table thead th {
        text-align: center;
        min-width: 140px;
    }

    .highlight-table thead th:first-child {
        text-align: left !important;
    }

    .highlight-table thead th {
        padding: 10px !important;
    }

    .highlight-table tbody td i {
        font-size: 16px !important;
    }

    .highlight-table tbody td:first-child {
        text-align: left;
        min-width: 210px;
    }

    .highlight-table thead th {
        text-align: start !important;
        font-size: 14px !important;
    }

    .highlight-table tbody td {
        font-size: 14px !important;
        padding: 10px !important;
    }

    #MilestoneYearBarDiv .year-bar.fixed {
        width: 100%;
    }

    #ProfileContent2ImageBoxDiv img {
        max-width: 50%;
    }

    #ProfileContent2BoxDiv {
        align-items: flex-end;
    }

    #ProfileContent2BoxDiv>div {
        width: calc(100% - 20px);
        margin-right: 0 !important;
        padding: 40px !important;
    }

    #StockCompanyLabelBox {
        width: 100% !important;
        padding: 10px 0 0 !important;
        margin: 0 !important;
        justify-content: center !important;
        border-right: none !important;
    }

    #stockPriceBox {
        display: flex;
        justify-content: space-evenly !important;
    }

    .price {
        font-size: 24px !important;
        padding-right: 15px !important;
    }

    #stockUpdateTime {
        text-align: center !important;
        padding: 0 !important;
        margin: 10px 0 !important;
    }

    .curve-bg {
        justify-content: space-evenly;
        background-image: none !important;
        background-color: rgb(240, 240, 240);
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    #IntroHomeDiv {
        padding: 60px 20px 0 !important;
    }

    #IntroHomeDiv>.row {
        padding: 0 !important;
    }

    #IntroHomeDiv>.row>.col-12 {
        padding: 0 !important;
    }

    .intro-more-button {
        margin: 20px 0 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    #PressHomeDiv {
        margin-bottom: 40px !important;
        padding: 20px !important;
    }

    #PressMoreBtnDiv a.more-button {
        margin: initial !important;
    }

    #PressMoreBtnDiv>div {
        justify-content: center !important;
    }

    #PressMoreBtnDiv {
        display: flex;
        justify-content: center;
    }

    #LatestNewsDiv {
        display: flex;
        flex-direction: column-reverse;
        margin: 0 !important;
        padding: 0 !important;
    }

    #LatestNewsDiv>.latest-news-box {
        padding: 0 20px 60px !important;
    }

    #LatestNewsDiv .green-box {
        margin: 0 !important;
    }

    #IRToolsDiv {
        padding: 0 !important;
    }

    #IRToolsDiv>div.row {
        padding-top: 0 !important;
    }

    #DataHomeDiv>div.row {
        margin: 0 !important;
        padding: 0 !important;
    }

    #DataHomeBox {
        margin: 0 !important;
        padding: 60px 20px 0 !important;
    }

    #DataHomeBox>div.row {
        margin: 0 !important;
        padding: 0 !important;
    }

    #DataHomeBox>div.row>div.col-12 {
        margin-bottom: 10px !important;
        padding: 0 !important;
        padding-right: 0 !important;
    }

    #DataHomeBox>div.row>div.col-12 p {
        padding: 5px 0 !important;
    }

    #DataHomeBox>div.row>div.col-12 p.desc-upperline {}

    #ToolsHomeDiv .col-12 {
        justify-content: center !important;
    }

    .ir-tools-label {
        text-align: center !important;
    }

    .ir-tools-content a {
        text-align: center !important;
    }

    #ToolsHomeDiv .col-12>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .footer {
        background-position: initial;
    }

    .footer-logo {
        justify-content: center !important;
        align-items: center !important;
    }

    .state-by {
        font-size: 14px !important;
        text-align: center !important;
    }

    .powered-by,
    .powered-by a {
        color: grey;
        font-size: 12px !important;
        text-align: center !important;
    }

    #ProfileDiv {
        padding: 0 20px !important;
    }

    #ProfileDiv>.row {
        padding-bottom: 0 !important;
    }

    #ProfileDiv>.row>.col-12 {
        padding: 0 !important;
    }

    #ProfileContent2Div {
        padding: 0 !important;
    }

    #ProfileContent4Div {
        margin: 0 !important;
        padding: 0 !important;
    }

    .pc-4-left {
        padding: 0 !important;
    }

    .pc-4-right {
        padding: 30px 0 !important;
    }

    #ManagementDiv {
        padding: 0 20px 40px !important;
    }

    #ManagementDiv .row:last-child {
        flex-direction: column;
    }

    #ManagementDiv .person {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #ManagementDiv .person .staff-card {
        margin: 0 0 20px !important;
    }

    #Culture1Div {
        padding: 0 20px 40px !important;
    }

    #Culture2Div {
        padding: 0 20px 0 !important;
    }

    #Culture4Div {
        padding: 0 20px 0 !important;
    }

    #CultureStrategyDiv {
        justify-content: space-evenly !important;
    }

    .culture-strategy-btn {
        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    .culture-strategy-btn>div {
        padding: 10px 20px !important;
        height: auto !important;
        min-height: auto !important;
    }

    .culture-strategy-btn img {
        max-width: 25px !important;
    }

    #Culture5Div {
        padding: 0 20px 40px !important;
    }

    #GovIntroDiv {
        padding: 0 20px !important;
    }

    #GovDocDiv {
        padding: 0 20px !important;
    }

    #CommitteeDiv {
        padding: 0 20px !important;
    }

    #FiResultDiv {
        padding: 0 20px !important;
    }

    #FiResultDiv .result-line {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0 !important;
    }

    #FiReportDiv {
        padding: 0 20px !important;
    }

    #FiHighlightDiv {
        padding: 0 20px !important;
    }

    #FiPresentDiv {
        padding: 0 20px !important;
    }

    #SiStockDiv {
        padding: 0 20px !important;
    }

    #CgAnalystDiv {
        padding: 0 20px !important;
    }

    #CgAnalystDiv tbody tr {
        padding: 20px 0 !important;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #00ab52;
    }

    #CgAnalystDiv .highlight-table tbody tr:hover {
        background-color: transparent !important;
    }

    #CgAnalystDiv tbody tr td {
        border-bottom: 1px solid transparent !important;
    }

    #InnerAnnouncementDiv {
        padding: 0 20px !important;
    }

    #EsgStrategiesDiv {
        padding: 0 20px !important;
    }

    #EsgStrategiesSection2Div {
        padding: 0 20px !important;
    }

    .csesg-btn img {
        max-width: 40px !important;
    }

    .double-strate-item {
        padding: 0 !important;
    }

    .esg-desc.double-strate-item>div {
        flex-direction: column !important;
    }

    .esg-desc.double-strate-item>div>div {
        width: 100% !important;
    }

    #EsgStrategiesSection2TitleBox {
        padding: 40px 20px !important;
        background-color: #00ab45;
    }

    #EsgStrategiesSection2ContentBox {
        padding: 30px !important;
        background-color: #e2f6e8;
    }

    #EsgStrategiesSection2Box {
        margin-bottom: 0 !important;
        background-image: none !important;
        height: auto !important;
    }

    #EsgStrategiesSection2TitleBox>div:last-child {
        margin: 10px 0 0 !important;
    }

    .double-strate-item img {
        max-height: 40px !important;
        transform: rotate(90deg);
        margin: 20px 0 !important;
    }

    .double-strate-item p {
        margin: 0 !important;
        text-align: center !important;
    }

    #EsgStrategiesSection3Div {
        padding: 0 20px !important;
    }

    #pinContainer #greenContent {
        margin: 0 !important;
        padding: 0 !important;
    }

    #pinContainer #greenContent .col-12 {
        margin: 0 0 40px !important;
        padding: 0 !important;
    }

    #ESGBoxDiv {
        padding: 20px !important;
        height: auto !important;
    }

    .double-strategy-more-item-box {
        flex-wrap: wrap;
    }

    #EsgUpdatesRowDiv .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #EsgUpdatesRowDiv .col-4 {
        opacity: .2 !important;
    }

    .esg-updates-box {}

    .esg-updates-box>div {
        margin-top: 0 !important;
    }

    .esg-updates-box .esg-actions>div {
        padding: 0 !important;
    }

    .esg-number-list {
        height: auto !important;
        width: auto !important;
    }

    .esg-updates-item-text {
        width: 100% !important;
        line-height: 34px !important;
    }

    .esg-updates-bottom-button {
        z-index: 9999 !important;
    }

    .esg-updates-content>div {
        gap: 0 !important;
        flex-direction: column !important;
        margin: 40px 0 0 !important;
    }

    #EsgMainDiv {
        padding: 0 20px !important;
    }

    #SitemapDiv {
        padding: 0 20px !important;
    }

    #DisclaimerDiv {
        padding: 0 20px !important;
    }

    #navSitemap li {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #EmailDiv {
        padding: 0 20px !important;
    }

    #IRContactDiv {
        padding: 0 20px !important;
    }

    #PressContentDiv {
        padding: 0 20px !important;
    }

    #CalendarContentDiv {
        padding: 0 20px !important;
    }

    .pcb-content-inner {
        padding-top: 40px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .strength-figure-container>div {
        justify-content: center;
    }

    .top-header .left,
    .top-header .right {
        align-items: center;
    }

    .event-label {
        min-width: 140px;
        font-size: 18px;
    }

    .event-label img {
        margin-top: -2px;
    }

    .event-item p {
        font-size: 18px;
    }

    .logo-renew-box {
        gap: 20px !important;
    }

    .highlight-table {
        overflow-x: auto;
    }
}

@media screen and (max-width: 640px) {
    .esg-years{
        overflow-x: auto;
    }
    h2.icon-bg-results {
        font-size: 18px;
    }

    .result-line {
        padding: 15px 0;
        align-items: center;
    }

    .result-line>a:first-child {
        font-size: 14px;
    }

    .result-line>div:first-child {
        font-size: 14px;
        padding-right: 10px;
    }

    .esg-updates-item-text {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .culture1-item {
        margin-bottom: 0;
    }

    .culture1-item .culture1-text br {
        display: none;
    }

    .mobile-footer-background {
        height: 60px;
    }

    #EsgStrategiesSection2ContentBox h6 {
        text-align: center;
    }

    .EsgStrategiesScrollDiv .panel {
        padding: 0 !important;
    }

    a.scroll-down {
        display: none;
    }

    .a-contact {
        font-size: 18px !important;
    }

    .a-contact>span {
        width: auto;
    }

    .a-contact>span,
    .a-contact>p,
    .a-contact>a {
        font-size: 16px !important;
    }

    .a-contact p {
        font-size: 16px !important;
    }

    .view-milestones {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    #CultureStrategyDiv {
        flex-direction: column;
    }

    .banner h6 {
        font-size: 14px !important;
    }

    .milestone-detail-group .details {
        flex-direction: column !important;
    }

    .milestone-detail-group .details .year {
        font-size: 48px;
    }

    .milestone-detail-group .details .body {
        margin-top: 20px;
        width: 100%;
    }

    .ess2tb-inner {
        flex-direction: column !important;
        margin: 0 !important;
    }

    .ess2tb-inner>div {
        margin: 20px 0 10px;
    }

    .font-52 {
        font-size: 28px !important;
    }

    .font-40 {
        font-size: 24px !important;
    }

    #LatestNewsDiv>div.position-absolute {
        display: none;
    }

    #ToolsHomeDiv {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 0 !important;
    }

    #Culture5Div>.row>.col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .green-strategie-label-box {
        min-height: initial !important;
        display: flex;
        flex-direction: column;
        max-height: initial !important;
    }

    .green-strategie-label-box img {
        width: 40px !important;
    }

    .green-strategie-context-text {
        min-height: initial !important;
    }

    .gsl-label {
        font-size: 16px;
        text-align: center;
    }

    .footer {
        height: auto !important;
        padding: 10px;
    }

    .hp-item a {
        line-height: 23px;
    }

    .logo-renew-box {
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 0 !important;
    }

    .content-padding.view-milestones {
        padding: 0 20px !important;
    }

    .milestone-detail-group p {
        font-size: 16px !important;
    }

    .milestone-detail-group .details .year {
        font-size: 24px !important;
    }

    .milestone-detail-group .details {
        padding: 30px 20px !important;
    }

    .esg-years, .press-years{
        line-height: 60px!important;
    }

    .esg-updates{
        width: 100%!important;
    }

    .esg-updates div.mt-4.pl-4 {
        padding-left: 0!important;
    }

    .esg-updates-content {
        padding: 0!important;
    }

    .esg-actions h6, .esg-updates h6 {
        margin-top: 60px;
    }
}

@media screen and (max-width: 480px) {
    .banner {
        background-size: cover;
    }

    .banner.dynamic {
        height: 200px;
    }

    #StockCompanyLabelBox {
        padding: 10px 0 0 0 !important;
    }

    #stockUpdateTime {
        margin-top: 0 !important;
    }

    .font-40 {
        font-size: 20px !important;
    }

    .old-logo-container,
    .new-logo-container {
        zoom: 0.8 !important;
    }

    .culture-4-p br {
        display: none;
    }
    .esg-updates-item-text{
        font-size: 20px!important;
    }
}

@media screen and (max-width: 375px) {
    #EsgUpdatesRowDiv > div.col-8 {
        height: 40vh!important;
    }

    .esg-updates-inner{
        padding: 0 30px!important;
    }
    .esg-years>div, .press-years>div{
        font-size: 24px!important;
    }

    .esg-years>div.active, .press-years>div.active{
        font-size: 28px!important;
    }

    .esg-updates-content>div{
        margin-top: 20px!important;
    }
}

#pinContainer.mobile{
    margin-top: 70px!important;
}

