html {
    font-size: 14px;
}

h2 {
    font-size: 21px;
}

h3 {
    font-size: 16px;
}

h4 {
    font-size: 14px;
}

.mobileMenuWrapper {
    display: none;
}

.circleDate {
    display: block;
    background: #eeeeee;
    color: #46780c;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    padding-top: 5px;
}

.circleDate span {
    display: block;
    text-align: center;
    line-height: 22px;
}

.circleDate .month {
    font-size: 11px;
}

.circleDate .day {
    font-size: 22px;
    font-weight: bold;
}

.accordion li .title {
    font-size: 19px;
    padding: 10px 10px 10px 0px;
}

.accordion .section .sectionTitle {
    font-size: 16px;
}

.mobileMenu {
    display: none;
}

.headerWrapper {
    position: absolute;
}

.headerWrapper.fixed {
    position: fixed;
    top: -85px;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
}

.header {
    height: 135px;
    padding: 0px 20px;
}

.header .logo {
    margin: 20px 0px 24px 0px;
    width: auto;
}

.header .logo img {
    height: auto;
}

.headerMargin {
    height: 135px;
}

.menuWrapper {
    width: 100%;
    bottom: 0px;
    margin-top: 4px;
}

.menu {
    display: table;
    width: 100%;
    color: #666666;
}

.menu>li {
    display: table-cell;
    text-align: center;
    padding: 15px 0px;
}

.menu>li#about {
    width: 20%;
}

/* .menu > li#about{width:15.8163%;} */
.menu>li#business {
    width: 20%;
}

/* .menu > li#business{width:16.4286%;} */
.menu>li#ir {
    width: 20%
}

/* .menu > li#ir{width:19.6939%} */
.menu>li#csr {
    width: 20%;
}

/* .menu > li#csr{width:29.38776%;} */
.menu>li#news {
    width: 20%;
}

/* .menu > li#news{width:18.67347%;} */

.menu>li .sectionName {
    font-size: 15px;
    display: block;
    border-left: 1px solid #addcf8;
    color: #666666;
}

.menu>li:last-child .sectionName {
    border-right: 1px solid #addcf8;
}

.menu>li:hover {
    background: url(../img/menu_pointer.png) center bottom no-repeat;
}

.menu>li:hover .submenuWrapper {
    visibility: visible;
}

.menu>li.act .sectionName {
    color: #906548;
}

.submenuWrapper {
    position: absolute;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    left: 0px;
    top: 135px;
    border-top: 8px solid rgba(144, 101, 72, 1);
    font-size: 15px;
    min-height: 200px;
    visibility: hidden;
    z-index: 10;
    /*	box-shadow:2px 2px 2px rgba(0,0,0,0.5);*/
}

.submenu {
    width: 100%;
    padding: 0px 20px;
    margin: 30px auto;
}

.submenu a {
    color: #333333;
}

.submenu .col {
    float: left;
    width: 25%;
    padding-right: 10px;
}

.submenu .col dd {
    text-align: left;
    margin-bottom: 20px;
}

.menuBtn {
    display: none;
}

.langWrapper {
    display: none;
}

.bannerWrapper {
    height: 274px;
}

.bannerWrapper.global {
    background: url(../img/global_banner.png) center top no-repeat;
}

.bannerWrapper.links {
    background: url(../img/links_banner.png) center top no-repeat;
}

.bannerWrapper.contactus {
    background: url(../img/contactus_banner.png) center top no-repeat;
}

.bannerWrapper.disclaimer {
    background: url(../img/disclaimer_banner.png) center top no-repeat;
}

.bannerWrapper.emailalerts {
    background: url(../img/emailalerts_banner.png) center top no-repeat;
}

.bannerWrapper.sitemap {
    background: url(../img/sitemap_banner.png) center top no-repeat;
}

.bannerWrapper.search {
    background: url(../img/search_banner.png) center top no-repeat;
}

.bannerWrapper.about {
    background: url(../images/about/about_banner.png) center top no-repeat;
}

.bannerWrapper.beer {
    background: url(../images/business/beer_banner.png) center top no-repeat;
}

.bannerWrapper.gas {
    background: url(../images/business/gas_banner.png) center top no-repeat;
}

.bannerWrapper.water {
    background: url(../images/business/water_banner.png) center top no-repeat;
}

.bannerWrapper.waste {
    background: url(../images/business/waste_banner.png) center top no-repeat;
}

.bannerWrapper.others {
    background: url(../images/business/others_banner.png) center top no-repeat;
}

.bannerWrapper.ir {
    background: url(../images/ir/ir_banner.png) center top no-repeat;
}

.bannerWrapper.csr {
    background: url(../images/csr/csr_banner.png) center top no-repeat;
}

.bannerWrapper.news {
    background: url(../images/news/news_banner.png) center top no-repeat;
}

.banner {
    padding: 0px 20px;
}

.banner .mobileBanner {
    display: none;
}

.banner .textBlock.brownBg {
    background: rgba(113, 61, 13, 0.55);
}

.banner .textBlock.greenBg {
    background: rgba(19, 112, 0, 0.55);
}

.banner .textBlock.blueBg {
    background: rgba(50, 93, 158, 0.55);
}

.banner .textBlock.navyBg {
    background: rgba(53, 147, 216, 0.55);
}

.banner .textBlock.transparentBg {
    background: none;
}

.banner .textBlock {
    position: position:absolute;
    height: 100%;
    width: 275px;
    background: #906548;
}

.banner .textBlock .text {
    position: absolute;
    padding: 25px 30px;
    bottom: 0px;
    font-size: 34px;
    line-height: 36px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.mainContent {
    width: 100%;
    padding: 0px 20px;
    min-height: 577px;
}

.mainContent .pageTitle {
    font-size: 30px;
}

.content {
    position: relative;
    margin-left: 275px;
    padding: 20px 0px 20px 30px;
}

.details {
    width: 100%;
}

.footer .link {
    float: right;
}

.footer .copyright {
    float: left;
}

/* announceTemplate */
.announceTemplate .row .date {
    width: 70px;
}

/* home */
#home .slideshowWrapper {
    height: 515px;
}

#home .slideshowWrapper .titleImgWrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 200px;
}

#home .slideshowWrapper .titleImg {
    position: absolute;
    right: 20px;
    bottom: 0px;
    width: 270px;
    text-align: center;
}

#home .slideshow>div img.mobile {
    display: none;
}

#home .slideshow .obj {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* slide01 */
@keyframes animatedBg {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -50px 0;
    }
}

@-webkit-keyframes animatedBg {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -50px 0;
    }
}

@keyframes animatedOpacity {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes animatedOpacity {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animatedFrame {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes animatedFrame {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#home .slideshow #slide01 {
    background: url(../img/home_banner1_cloud.jpg) 0 0 no-repeat;
}

#home .slideshow .play .obj.cloud {
    background: url(../img/home_banner1_cloud.jpg) no-repeat;
    -webkit-animation: animatedBg 5s linear;
    -moz-animation: animatedBg 5s linear;
    -ms-animation: animatedBg 5s linear;
    animation: animatedBg 5s linear;
    background-position: -50px 0;
}

#home .slideshow .obj.cloud {
    background-position: 0 0;
}

#home .slideshow .obj.reservoir {
    background: url(../img/home_banner1_reservoir.png) center top no-repeat;
}

#home .slideshow #slide02 {
    background: url(../img/home_banner2_ripple3.jpg) center top no-repeat;
}

#home .slideshow .play .obj.ripple1 {
    background: url(../img/home_banner2_ripple1.jpg) center top no-repeat;
    -webkit-animation: animatedFrame 0.3s linear infinite;
    -moz-animation: animatedFrame 0.3s linear infinite;
    -ms-animation: animatedFrame 0.3s linear infinite;
    animation: animatedFrame 0.3s linear infinite;
    opacity: 0;
}

#home .slideshow .obj.ripple1 {
    opacity: 0;
}

#home .slideshow .play .obj.ripple2 {
    background: url(../img/home_banner2_ripple2.jpg) center top no-repeat;
    -webkit-animation: animatedFrame 0.3s linear infinite;
    -moz-animation: animatedFrame 0.3s linear infinite;
    -ms-animation: animatedFrame 0.3s linear infinite;
    animation: animatedFrame 0.3s linear infinite;
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -ms-animation-delay: 0.1s;
    animation-delay: 0.1s;
    opacity: 0;
}

#home .slideshow .obj.ripple2 {
    opacity: 0;
}

#home .slideshow .play .obj.ripple3 {
    background: url(../img/home_banner2_ripple3.jpg) center top no-repeat;
    -webkit-animation: animatedFrame 0.3s linear infinite;
    -moz-animation: animatedFrame 0.3s linear infinite;
    -ms-animation: animatedFrame 0.3s linear infinite;
    animation: animatedFrame 0.3s linear infinite;
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    animation-delay: 0.2s;
    opacity: 0;
}

#home .slideshow .obj.ripple3 {
    opacity: 0;
}

#home .slideshow #slide03 {
    background: url(../img/home_banner3_bg.jpg) center top no-repeat;
}

#home .slideshow .play .obj.banner3Glow {
    background: url(../img/home_banner3_glow.jpg) center top no-repeat;
    -webkit-animation: animatedOpacity 2s linear;
    -moz-animation: animatedOpacity 2s linear;
    -ms-animation: animatedOpacity 2s linear;
    animation: animatedOpacity 2s linear;
    opacity: 0;
}

#home .slideshow .obj.banner3Glow {
    opacity: 0;
}

#home .slideshow #slide04 {
    background: url(../img/home_banner4_bg.jpg) center top no-repeat;
}

#home .slideshow .play .obj.banner4Glow {
    background: url(../img/home_banner4_glow.jpg) center top no-repeat;
    -webkit-animation: animatedOpacity 2s linear;
    -moz-animation: animatedOpacity 2s linear;
    -ms-animation: animatedOpacity 2s linear;
    animation: animatedOpacity 2s linear;
    opacity: 0;
}

#home .slideshow .obj.banner4Glow {
    opacity: 0;
}

#home #pager {
    width: auto;
    position: absolute;
    right: 20px;
    bottom: auto;
    top: 228px;
}

#home #pager span {
    width: 60px;
    height: 60px;
}

#home .sectionBox {
    padding: 20px 0px;
}

#home .sectionBox .row {
    width: 50%;
    margin-bottom: 0px;
}

#home .sectionBox .row.left {
    float: left;
    padding-right: 10px;
}

#home .sectionBox .row.right {
    float: right;
    padding-left: 10px;
}

#home .sectionBox .box.left {
    padding-right: 10px;
}

#home .sectionBox .box.right {
    padding-left: 10px;
}

#home .latestWrapper {
    padding: 0px;
}

#home .latest {
    padding: 25px 17%;
    background: url(../img/home/1/home_latest_bg_desktop.png) top center no-repeat;
}

#home .relatedWrapper .caringCompany img {
    height: 35px;
}

@media only screen and (min-width: 1024px) {

    /* #home .related{
		width:75%;
		float:left;
	} */
    #home .relatedWrapper .caringCompany {
        /* width:20%;
		float:left;
		text-align:center;
		margin: 10px 0;
		display:line; */
        /* width: 25%;
		padding-left: 20px;
		gap: 10px;
		flex-wrap: wrap;
		margin: 0; */
    }

    /* #home .relatedWrapper .caringCompany > div {
		width: 45%;
	} */
}

@media only screen and (min-width: 768px) and (max-width: 980px) {
    #home .latest {
        background: url(../img/home/1/home_latest_bg_tablet.png) top center no-repeat;
    }
}

@media only screen and (min-width: 981px) and (max-width: 1024px) {
    #home .latest {
        background: url(../img/home/1/home_latest_bg_desktop.png) top center no-repeat;
    }
}

#home .latest .heading {
    font-size: 24px;
}

#home .latest .latestDetails .row {
    display: table;
    padding: 10px 0px;
    width: 95%;
}

#home .latest .latestDetails .row .title {
    line-height: 19px;
    font-size: 15px;
}

#home #stockquote .info {
    padding-left: 10px;
}

#home #stockquote .info td {
    padding: 1.8% 0px;
}

@media only screen and (max-width: 970px) {
    #home #stockquote .info td {
        padding: 2% 0px;
    }

    #home #stockquote .info #sectionName {
        font-size: 12px;
    }

    #home #stockquote .info #stockCode {
        font-size: 11px;
    }

    #home #stockquote .info .label {
        font-size: 12px;
    }

    #home #stockquote .info #change {
        font-size: 12px;
    }

    #home #stockquote .info #price {
        font-size: 16px;
    }

    #home #stockquote .info .lower {
        font-size: 8px;
    }
}

#home .relatedWrapper {
    padding: 0px;
    margin: 20px 0px;
}

#home .related .relatedControl {
    top: 5px;
    width: 10px;
}

#home .related {
    position: relative;
    margin: 10px 0px;
}

.marqueeSlide img {
    height: 32px;
    margin: 0px 10px;

}

/* csr practice */
#csr_practice .imgBlock {
    width: 50%;
    padding-bottom: 1.66666%;
}

#csr_practice .imgBlock.fleft {
    padding-right: 0.83333%;
}

#csr_practice .imgBlock.fright {
    padding-left: 0.83333%;
}

#csr_practice .caption {
    padding: 15px 20px;
}

/* csr_management */
#csr_management .section {
    margin-bottom: 10px;
    padding: 10px 0px;
}

#csr_management .accordion .section {
    padding: 10px;
}

#csr_management .accordion .title {
    font-size: 16px;
    padding: 10px;
}

/* csr_climate */
#csr_climate .section {
    margin-bottom: 10px;
    padding: 10px 0px;
}

/* csr_awards */
#csr_awards .section {
    margin-bottom: 10px;
    padding: 10px 0px;
}

@media only screen and (min-width: 1024px) {
    #csr_awards .award-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    #csr_awards .award {
        margin-bottom: 0;
    }
}

/* reports */
.reportsTemplate .reportsRow {
    padding: 30px 0px;
}

.reportsTemplate .reportsCol img.preCover {
    height: 144px;
    width: 204px;
}

/* highlights */
#highlights .highlightsTable {
    margin-bottom: 50px;
}

#highlights td {
    padding: 15px 20px;
    font-size: 14px;
}

#highlights .highlightsCol {
    float: left;
    width: 50%;
}

@media only screen and (max-width: 780px) {
    #highlights .highlightsCol .heading {
        font-size: 13px;
    }
}

#highlights .highlightsCol.left {
    padding-right: 10px;
}

#highlights .highlightsCol.right {
    padding-left: 10px;
}

#highlights .highlightsCol .chart {
    margin: 20px 0px;
}

/* dividend */
#dividend .dividendTable {
    max-width: 760px;
}

#dividend .dividendTable td {
    padding: 10px 15px;
    font-size: 14px;
}

/* video, anniversary_20th */
#video .videoBlock,
#anniversary_20th .videoBlock {
    margin-top: 50px;
    max-width: 400px;
    display: inline-block;
}

#video .videoImg,
#anniversary_20th .videoImg {
    margin: 20px;
}

/* sitemap */
.sitemapWrapper {
    width: 100%;
    /*	background:url(../img/sitemap_bg.png) center top no-repeat;*/
    background: #3b4935;
    color: #fff;
}

.sitemapWrapper a {
    color: #fff;
}

.sitemapWrapper .sitemap {
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
}

.sitemapWrapper .sitemap .tabletCol {
    float: left;
}

.sitemapWrapper .sitemap .tabletCol.two {
    width: 40%;
}

.sitemapWrapper .sitemap .tabletCol.one {
    width: 20%;
    float: left;
}

.sitemapWrapper .sitemap .col {
    width: 100%;
    float: left;
    margin: 25px 0px;
}

.sitemapWrapper .sitemap .tabletCol.two .col {
    width: 50%;
}

.sitemapWrapper .sitemap .tabletCol.one .col {
    width: 100%;
}

.sitemapWrapper .sitemap dt {
    font-size: 18px;
    padding-bottom: 5px;
    border-bottom: 1px solid #fff;
    margin: 0px 20px 6px 0px;
}

.sitemapWrapper .sitemap dd {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 16px;
    margin: 0px 20px 8px 0px;
}

@media only screen and (max-width: 980px) {
    .sitemapWrapper .sitemap .tabletCol.two {
        width: 66.66666%;
        float: left;
    }

    .sitemapWrapper .sitemap .tabletCol.one {
        width: 33.33333%;
        float: right;
    }

    .sitemapWrapper .sitemap .sitemapCol {
        width: 100%;
    }
}