.csrReportTemplate .csrBg { width: 100%; z-index: -1; position: relative; }
.csrReportTemplate .csrBg .left { width: 40%; max-width: 447px; position: absolute; bottom: 0; }
.csrReportTemplate .csrBg .right { width: 30%; max-width: 427px; }
.csrReportTemplate .csrBg .left img, .csrReportTemplate .csrBg .right img { width: 100%; z-index: 1 }

.csrReportTemplate .mainContent > .margin, .csrReportTemplate .mainContent > .row.details { z-index: 2; }
.csrReportTemplate .readmore { border: 1px solid #bf9c4c; background: transparent; color: #bf9c4c; }
.csrReportTemplate .sectionTitle { color: #93b627; }
.csrReportTemplate .selectWrapper.float-center { margin: 0 auto; }
.csrReportTemplate .dropdown .selected, .csrReportTemplate .dropdown li { font-size: 36px; padding: 9px 20px; }
.csrReportTemplate .dropdown li.focus { background: #93b627; }
.csrReportTemplate .dropdown .carat { background: url(../images/global/dropdown_arrow_csr.png) no-repeat; top: 20px; }

.csrPageTopNav { position: absolute; top: 180px; }
.csrPageTopNav .icon { text-align: center; }
.csrPageTopNav .icon span.direction { display: block; color: #bf9c4c; font-size: 20px; line-height: 1; }
.csrPageTopNav .icon span.pageName { display: block; color: #93b627; font-size: 18px; line-height: 1; }
.csrPageTopNav.prev { left: 30px; }
.csrPageTopNav.next { right: 30px; }
.csrPageTopNav .left .icon, .csrPageTopNav .right .icon { width: 148px; }
.csrPageTopNav .left .icon-wrapper, .csrPageTopNav .right .icon-wrapper { height: 148px; position: relative; width: 100%; margin-bottom: 10px; }
.csrPageTopNav .left .icon-wrapper img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.csrPageTopNav .left .icon-wrapper:before { content: ''; display: block; border-width: 74px 74px 74px 0px; border-style: solid; border-color: transparent #eee; position: absolute; left: 0px; }
.csrPageTopNav .right .icon-wrapper img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.csrPageTopNav .right .icon-wrapper:before { content: ''; display: block; border-width: 74px 0px 74px 74px; border-style: solid; border-color: transparent #eee; position: absolute; left: 74px; }


/* CSR HOME */
#csr_overview .csrContentWrapper { position: relative; }
#csr_overview .csrContentWrapper .content { padding-bottom: 0px; }
#csr_overview .csrBg.top, #csr_overview .csrBg.bottom { position: absolute; width: 100%; z-index: -1; }
#csr_overview .csrBg.top { top: 40px; }
#csr_overview .csrBg.bottom { bottom: 0; }
#csr_overview .csrBg.bottom .right { position: relative; bottom: 0; }
#csr_overview .csrBg .desktop, #csr_overview .csrBg .mobile { display: none; }

#csr_overview .csrContentWrapper .msg { padding-top: 70px; }
#csr_overview .csrContentWrapper .msg .left, #csr_overview .csrContentWrapper .msg .right { float: none !important; }
#csr_overview .csrContentWrapper .msg .title { font-size: 30px; color: #bb9642; }
#csr_overview .csrContentWrapper .msg .title span { display: block; font-size: 55px; line-height: 1; }
#csr_overview .csrContentWrapper .msg .readmore { display: block; width: 100%; background: #f8f5ed; text-align: center; padding: 8px 0; }
#csr_overview .csrContentWrapper .msg .readmore span { display: inline-block; color: #bf9c4c; vertical-align: bottom; font-size: 24px; }
#csr_overview .csrContentWrapper .msg .readmore span:after { display: inline-block; content: ''; width: 30px; height: 30px; background: url(../images/csr/btn_arrow.png) no-repeat; background-size: contain; position: relative; top: -2px; left: 8px; vertical-align: middle; } 
#csr_overview .csrContentWrapper .msg blockquote { border: none; padding: 20px 0 0; }
#csr_overview .csrContentWrapper .msg blockquote p { line-height: 32px; }
#csr_overview .csrContentWrapper .msg blockquote p:before { content: "“"; font-family: Georgia; display: inline-block; position: relative; color: #bb9642; font-size: 88px; line-height: 32px; top: 35px; padding-right: 5px; }
#csr_overview .csrContentWrapper .msg blockquote p:after { content: "”"; font-family: Georgia; display: inline-block; position: relative; color: #bb9642; font-size: 88px; line-height: 32px; top: 28px; padding-right: 5px; vertical-align: bottom; }
#csr_overview .csrContentWrapper .msg .left img { margin-bottom: -40px; margin-right: 40px; }

#csr_overview .csrDL { background: #bb9642; }
#csr_overview .csrDL .row .content { padding: 20px; }
#csr_overview .csrDL .text { color: #fff; font-size: 28px; margin-bottom: 20px; }
#csr_overview .csrDL .dlButton a.readmore { display: inline-block; width: 100%; text-align: center; color: #bb9642; font-size: 16px; background: #fff; border-radius: 10px; line-height: 60px; font-weight: bold; margin: 0; }
#csr_overview .csrDL .dlButton a.readmore { margin: 0 0 10px; }

#csr_overview .csrPageNav .content { padding: 50px; }
#csr_overview .csrPageNav .navBtn { padding: 30px 0; text-align: center; }
#csr_overview .csrPageNav .navBtn img { display: block; margin: 0 auto 15px; }
#csr_overview .csrPageNav .navBtn span { font-size: 28px; color: #bb9642; }
#csr_overview .csrPageNav .navBtn span:after { content:"\00bb"; font-size: 30px; padding-left: 10px; }
.csr-references{ max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out;}
.csr-references.act{max-height: 600px; transition: max-height 1s ease-in;}
.csr-references .table{padding:30px 0 0 0; font-size:18px;}
.csr-references .table td{font-size:18px; padding:15px 15px;}
.csr-references .table td a {color: #6f6f6f; line-height: 24px;}
.csr-references .table img{max-width:inherit;}


/* CSR ENVIRONMENTAL */
#csr_environmental .mainContent .content { padding: 79px 20px 100px; }
#csr_environmental .csrBg { position: absolute; }
#csr_environmental .csrBg { width: 100%; z-index: -1; position: relative; }
#csr_environmental .csrBg .left { width: 40%; max-width: 447px; position: absolute; bottom: 0; }
#csr_environmental .csrBg .right { width: 30%; max-width: 427px; }
#csr_environmental .csrBg .left img, #report_csr2017 .csrBg .right img { width: 100%; z-index: 1 }

#csr_environmental .title .icon, #csr_environmental .title .sectionTitle { display: table-cell; }
#csr_environmental .title .icon-wrapper { display: block; width: 110px; height: 110px; background: #eee; border-radius: 50%; position: relative; }
#csr_environmental .title .icon-wrapper img { display: block; height: 80px; position: relative; top: 50%; left: 50%; transform: translate(-53%, -55%); }
#csr_environmental .title .sectionTitle { width: auto; padding: 0 30px; vertical-align: middle; color: #93b627; text-transform: none; }

#csr_environmental .subTitle { text-align: center; margin: 50px 0 30px; font-size: 24px; color: #777; padding: 25px; border-top: 1px solid #93b627; border-bottom: 1px solid #93b627; }
#csr_environmental p { padding: 0 20px; color: #6f6f6f; }

#csr_environmental .subContent .left .topic, #csr_environmental .subContent .right .topic { background: #93b627; color: #fff; font-size: 24px; padding: 15px; width: 100%; text-align: center; }

#csr_environmental .content ul.listDot { padding: 20px; }
#csr_environmental .content ul.listDot li { background-image: url(../images/csr/list_dot_csr.png); font-size: 14px; color: #6f6f6f; margin-bottom: 20px; }

#csr_environmental .more { border: 3px solid #bf9c4c; padding: 20px; margin-top: 50px; }
#csr_environmental .more .title { font-size: 24px; color: #93b627; margin-bottom: 10px; }
#csr_environmental .more .moreList .left, #csr_environmental .more .moreList .right { width: 100%; }
#csr_environmental .more .moreList ul.listDot { padding: 0; }
#csr_environmental .more .moreList ul.listDot li { font-size: 18px; margin-bottom: 5px; background-position-y: 12px; }
#csr_environmental .more .readmore { display: block; width: 100%; background: #f8f5ed; text-align: center; padding: 8px 0; margin-top: 10px; }
#csr_environmental .more .readmore span { display: inline-block; color: #bf9c4c; vertical-align: bottom; font-size: 24px; }
#csr_environmental .more .readmore span:after { display: inline-block; content: ''; width: 30px; height: 30px; background: url(../images/csr/btn_arrow.png) no-repeat; background-size: contain; position: relative; top: -2px; left: 8px; vertical-align: middle; } 

#csr_environmental .csrDL { margin-top: -1px; }
#csr_environmental .csrDL .content { background: #bb9642; padding: 20px; }
#csr_environmental .csrDL .text { color: #fff; font-size: 22px; margin-bottom: 20px; }
#csr_environmental .csrDL .dlButton a.readmore { display: inline-block; width: 100%; text-align: center; color: #bb9642; font-size: 20px; background: #fff; border-radius: 10px; line-height: 60px; font-weight: bold; margin: 0; }
#csr_environmental .csrDL .dlButton a.readmore:first-child { margin: 0 0 10px; }


/* CSR SOCIAL */
#csr_social .mainContent .content { padding: 79px 20px 100px; }
#csr_social .csrBg { position: absolute; }
#csr_social .csrBg { width: 100%; z-index: -1; position: relative; }
#csr_social .csrBg .left { width: 40%; max-width: 447px; position: absolute; bottom: 0; }
#csr_social .csrBg .right { width: 30%; max-width: 427px; }
#csr_social .csrBg .left img, #report_csr2017 .csrBg .right img { width: 100%; z-index: 1 }

#csr_social .title .icon, #csr_social .title .sectionTitle { display: table-cell; }
#csr_social .title .icon-wrapper { display: block; width: 110px; height: 110px; background: #eee; border-radius: 50%; position: relative; }
#csr_social .title .icon-wrapper img { display: block; height: 80px; position: relative; top: 50%; left: 50%; transform: translate(-45%, -55%); }
#csr_social .title .sectionTitle { width: auto; padding: 0 30px; vertical-align: middle; color: #93b627; text-transform: none; }

#csr_social .subTitle { text-align: center; margin: 50px 0 30px; font-size: 24px; color: #777; padding: 25px; border-top: 1px solid #93b627; border-bottom: 1px solid #93b627; }
#csr_social p { padding: 0 20px; color: #6f6f6f; }

#csr_social .subContent .left .topic, #csr_social .subContent .right .topic { background: #93b627; color: #fff; font-size: 24px; padding: 15px; width: 100%; text-align: center; }

#csr_social .content ul.listDot { padding: 20px; }
#csr_social .content ul.listDot li { background-image: url(../images/csr/list_dot_csr.png); font-size: 14px; color: #6f6f6f; margin-bottom: 20px; }

#csr_social .more { border: 3px solid #bf9c4c; padding: 20px; margin-top: 50px; }
#csr_social .more .title { font-size: 24px; color: #93b627; margin-bottom: 10px; }
#csr_social .more .moreList .left, #csr_social .more .moreList .right { width: 100%; }
#csr_social .more .moreList ul.listDot { padding: 0; }
#csr_social .more .moreList ul.listDot li { font-size: 18px; margin-bottom: 5px; background-position-y: 12px; }
#csr_social .more .readmore { display: block; width: 100%; background: #f8f5ed; text-align: center; padding: 8px 0; margin-top: 10px; }
#csr_social .more .readmore span { display: inline-block; color: #bf9c4c; vertical-align: bottom; font-size: 24px; }
#csr_social .more .readmore span:after { display: inline-block; content: ''; width: 30px; height: 30px; background: url(../images/csr/btn_arrow.png) no-repeat; background-size: contain; position: relative; top: -2px; left: 8px; vertical-align: middle; } 

#csr_social .csrDL { margin-top: -1px; }
#csr_social .csrDL .content { background: #bb9642; padding: 20px; }
#csr_social .csrDL .text { color: #fff; font-size: 22px; margin-bottom: 20px; }
#csr_social .csrDL .dlButton a.readmore { display: inline-block; width: 100%; text-align: center; color: #bb9642; font-size: 20px; background: #fff; border-radius: 10px; line-height: 60px; font-weight: bold; margin: 0; }
#csr_social .csrDL .dlButton a.readmore:first-child { margin: 0 0 10px; }


@media (max-width: 767px) {
	#csr_overview .csrBg.top .right img { max-width: 120px; padding-right: 20px; }
}

@media (min-width: 768px) {
	#csr_overview .csrBg.top { top: 70px; }
	#csr_overview .csrContentWrapper .msg .title { font-size: 46px; }
	#csr_overview .csrContentWrapper .msg .title span { font-size: 80px; }
	#csr_overview .csrDL .row .content { padding: 55px 50px; }
	#csr_overview .csrDL .text { font-size: 38px; }
	#csr_overview .csrDL .dlButton a.readmore { width: 160px; margin:0;}
	/*#csr_overview .csrDL .dlButton a.readmore:first-child { margin: 0 10px 0 0; }*/
	#csr_overview .csrPageNav .navBtn { width: 33.33%; float: left; }
	
	#csr_environmental .subContent .left, #csr_environmental .subContent .right { width: 48%; }
	#csr_environmental .content ul.listDot li { font-size: 18px; }
	#csr_environmental .more { padding: 40px 50px; }
	#csr_environmental .more .title { font-size: 28px; }
	#csr_environmental .more .moreList .left, #csr_environmental .more .moreList .right { width: 50%; }
	#csr_environmental .more .moreList ul.listDot { padding: 0 20px 10px 0; }
	#csr_environmental .more .moreList ul.listDot li { font-size: 24px; background-position-y: 17px; }
	#csr_environmental .csrDL .content { padding: 20px 50px; }
	#csr_environmental .csrDL .text { font-size: 28px; }
	
	#csr_social .subContent .left, #csr_social .subContent .right { width: 48%; }
	#csr_social .content ul.listDot li { font-size: 18px; }
	#csr_social .more { padding: 40px 50px; }
	#csr_social .more .title { font-size: 28px; }
	#csr_social .more .moreList .left, #csr_social .more .moreList .right { width: 50%; }
	#csr_social .more .moreList ul.listDot { padding: 0 20px 10px 0; }
	#csr_social .more .moreList ul.listDot li { font-size: 24px; background-position-y: 17px; }
	#csr_social .csrDL .content { padding: 20px 50px; }
	#csr_social .csrDL .text { font-size: 28px; }
}

@media (max-width: 1023px) {
	#csr_overview .csrContentWrapper .msg .left { overflow: hidden; margin-left: -30px; }
	#csr_overview .csrContentWrapper .msg .left img { width: 60%; margin-bottom: -30%; }
	#csr_overview .csrBg .mobile { display: block; }
	#csr_overview .csrBg .mobile .left { width: 23%; }
	#csr_overview .csrBg .mobile .right { width: 77%; text-align: right; }
}

@media (min-width: 1024px) {
	#csr_overview .csrContentWrapper .content { padding-bottom: 40px; }
	#csr_overview .csrBg .desktop { display: block; }
	#csr_overview .csrBg .left { width: 40%; max-width: 447px; position: absolute; bottom: 0; }
	#csr_overview .csrBg .right { width: 30%; max-width: 494px; }
	#csr_overview .csrContentWrapper .msg { display: table; direction: rtl; }
	#csr_overview .csrContentWrapper .msg .left, .csrContentWrapper .msg .right { display: table-cell; }
	#csr_overview .csrContentWrapper .msg .left { width: 40%; vertical-align: bottom; }
	#csr_overview .csrContentWrapper .msg .left img { margin-bottom: -40px; margin-right: 40px; }
	#csr_overview .csrContentWrapper .msg .right { width: 60%; direction: ltr; }
	#csr_overview .csrContentWrapper .msg .title span { text-align: right; }
	#csr_overview .csrDL .row .content { padding: 55px 0px; }
	#csr_overview .csrDL .text { display: inline-block; float: left; padding-left: 0.9375rem; margin-bottom: 0; }
	#csr_overview .csrDL .dlButton { display: inline-block; float: right; padding-right: 40px; }
	
	#csr_environmental .csrDL .content { padding: 55px 50px; }
	#csr_environmental .csrDL .text { display: inline-block; float: left; margin-bottom: 0; }
	#csr_environmental .csrDL .dlButton { display: inline-block; float: right; }
	#csr_environmental .csrDL .dlButton a.readmore { width: 220px; }
	#csr_environmental .csrDL .dlButton a.readmore:first-child { margin: 0 10px 0 0; }
	
	#csr_social .csrDL .content { padding: 55px 50px; }
	#csr_social .csrDL .text { display: inline-block; float: left; margin-bottom: 0; }
	#csr_social .csrDL .dlButton { display: inline-block; float: right; }
	#csr_social .csrDL .dlButton a.readmore { width: 220px; }
	#csr_social .csrDL .dlButton a.readmore:first-child { margin: 0 10px 0 0; }
}

@media (max-width: 1270px) {
	.csrPageTopNav.prev { display: none; }
	.csrPageTopNav.next { position: relative; top: -50px; }
	.csrPageTopNav .right .icon { width: 104px; background: #fff; }
	.csrPageTopNav .right .icon-wrapper { height: 104px; }
	.csrPageTopNav .right .icon-wrapper:before { left: 52px; border-width: 52px 0 52px 52px; }
	.csrPageTopNav .right .icon-wrapper img { height: 52px !important; }
	.csrPageTopNav .icon span.direction { font-size: 16px; }
	.csrPageTopNav .icon span.pageName { font-size: 14px; }
	
	#csr_overview .csrBg.top .right img { float: right; padding-right: 30px; }
	#csr_environmental .csrBg .innerWrapper, #csr_social .csrBg .innerWrapper { margin-top: -180px; }

}

@media (min-width: 1271px) {
	.csrReportTemplate .csrBg { position: absolute; top: 600px; }
	.csrReportTemplate .csrBg .left { top: 0; }
	.csrReportTemplate .csrBg .left, .csrReportTemplate .csrBg .right { width: 22%; }
	
	#csr_overview .csrBg .left, #csr_overview .csrBg .right { width: 22%; }
	
	#csr_environmental .csrBg { position: absolute; top: 700px; }
	#csr_environmental .csrBg .left { top: 0; }
	#csr_environmental .csrBg .left, #csr_environmental .csrBg .right { width: 22%; }
	
	#csr_social .csrBg { position: absolute; top: 700px; }
	#csr_social .csrBg .left { top: 0; }
	#csr_social .csrBg .left, #csr_social .csrBg .right { width: 22%; }
}



/* ESG Banner */
.csrAnimBanner {
	width: 100%;  
	height: 270px;  
	background-image: url(../images/global/animBG.jpg);
	background-position: center;
	background-repeat: repeat-y;
	background-attachment: fixed;
	background-size: 100% auto;
	-webkit-animation: backgroundScroll 40s linear infinite;
	animation: backgroundScroll 40s linear infinite;  
	overflow: hidden;
}
.csrAnimBanner .container{ width: 100%;height: 270px; }

.esgBanner{background:url(../images/global/esgBannerBg.jpg); width:100%; height: 600px;}
.esgBanner { position: relative; display: block; }
.esgBanner .esgSlogan{background:url(../images/global/esg_slogan.png) no-repeat; background-position: center ; width:100%;height:100%; position: absolute; transition: 1s;}
.esgBanner .esgSlogan.animate{transition: 1s; left: 0px;}

.esgBanner .obj{width:100%; height: 600px;}
.esgBanner .obj1{
	background: url(../images/global/esg_1st.png) no-repeat; 
	background-position: center ;
	-webkit-transform-origin:center center;
	transform-origin:center center;
	-webkit-transform:scale(0.8,0.8);
	transform:scale(0.8,0.8);
	-webkit-transition:opacity 2s,transform 1s;
	transition:opacity 2s,transform 1s;
	opacity: 0;
}
.esgBanner .obj1.animate{-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition-delay:1.5s;
	transition-delay:1.5s; opacity: 1;}
.esgBanner .obj2{
	position: absolute;
	top: 0;
	background: url(../images/global/esg_gold.png) no-repeat; 
	background-position: center;
	-webkit-transition:opacity 2s;
	transition:opacity 2s;
	opacity: 0;
	}
.esgBanner .obj2.animate{-webkit-transition-delay:2.5s; transition-delay:2.5s; opacity: 1; }


@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.csrAnimBanner { height:570px; background-size: contain;}
	.csrAnimBanner .container{ height: 570px;}
}

@media screen and (min-width: 1024px) {
	.csrAnimBanner .container{ height: 600px;}
	.csrAnimBanner { height:600px; background-image:none;}	
}

@media only screen and (max-width: 960px) {
	.esgBanner .esgSlogan{background:url(../images/global/esg_slogan_mobile.png) no-repeat; background-size:100% auto !important;}
	.esgBanner .obj1{background: url(../images/global/esg_1st_mobile.png) no-repeat; background-size:100% auto !important;}
	.esgBanner .obj2{background: url(../images/global/esg_gold_mobile.png) no-repeat; background-size:100% auto !important;}
}