@charset "utf-8";
/* CSS Document */

/*common*/
	.ofHidden { overflow:hidden; }
	h3 { font-size:1.5em; }
	.right { float:right; }
	section .back { position:absolute; }
	img { width:100%; display:block; }

/*darkmode*/
	body.dark { color:#FFF; background:#111; }
	body.dark section#section1 .unsdgs { background:#111; border-color:#FFF; }
	body.dark .banner .bannerBack { background:linear-gradient(#190061, #fff3c4); }
	body.dark section#section2 { background:linear-gradient(to right, #111 35%, #424345 100%) !important }
	body.dark section#section1 .main .back { background:linear-gradient(to right, #4a0127, #fed7c0); }
	body.dark section#section4 .main .row .photoWrapper .big .back { background:linear-gradient(#490026, #fed7c0) }
	body.dark section#section5 .main .row .photoWrapper .back { background:linear-gradient(#000a1e, #ffc5c0) }
	
/*banner*/
	.banner { position:relative; z-index:2; }
	.banner .bannerPhoto { width:90%; }
	.banner .bannerWrapper { overflow:hidden; }
	.banner .bannerWrapper .text { width:36%; position:absolute; background:rgba(0,0,0,0.6); height: 100%; top:0; right:10%; font-size:1em; }
	.banner .bannerWrapper .text h1 { font-size:2.5em; position:absolute; top:15%; left:15%; }
	.banner .bannerWrapper .text ul { position:absolute; top:55%; width:80%; left:15%; }
	.banner .bannerWrapper .text ul li { list-style-type:disc; margin-bottom:5%; margin-left:6%; }
	.banner .bannerWrapper .text ul li a:hover { background:linear-gradient(90deg, #6bffab, #fefac4); color:#32342f; }
	.banner .bannerWrapper .text ul li a.active { border-bottom:1px solid #FFF; }
	.banner .bannerWrapper .text a { color:#FFF; text-decoration:none; padding:0.5% 1%; display:inline-block; transition:0.3s; }
	.banner .bannerBack {  width:14.5%; position:absolute; top:0; right:6.5%; z-index:-1; background:linear-gradient(#6bffab, #fefac4); height:106%; }
	.banner .bannerLine { width:100%; position:absolute; bottom:-1.5%; left:-86%; }

/*section 1*/
	section#section1 .row { width:96%; margin-bottom:0%; position:relative; }
	section#section1 .unsdgs { width:100%; box-sizing:border-box; padding:4% 5%; position:relative; z-index:2; background:#FFF; border:2px solid #000; }
	section#section1 .unsdgs ul { list-style-type:disc; width: 75%; }
	section#section1 .unsdgs ul li { margin:3% 0 0 2%; }
	section#section1 .unsdgs .SDGIcon { position:absolute; right:-4%; top:17%; width:8.96%; }
	section#section1 .unsdgs .square { position:absolute; background:url('../images/square.png') no-repeat center center; background-size:100%; width:15px; height:15px; }
	section#section1 .unsdgs .square.one { top:0; left:0; margin-top:-6.5px; margin-left:-5.5px; }
	section#section1 .unsdgs .square.two { top:0; left:50%; margin-top:-6.5px; margin-left:-5.5px; }
	section#section1 .unsdgs .square.three { top:0; right:0; margin-top:-6.5px; margin-right:-5.5px; }
	section#section1 .unsdgs .square.four { bottom:0; left:0; margin-bottom:-6.5px; margin-left:-5.5px; }
	section#section1 .unsdgs .square.five { bottom:0; left:50%; margin-bottom:-6.5px; margin-left:-5.5px; }
	section#section1 .unsdgs .square.six { bottom:0; right:0; margin-bottom:-6.5px; margin-right:-5.5px; }
	section#section1 .back { width:100%; height:100%; left:-4%; top:16%; z-index:0; background:linear-gradient(90deg, #c8ffed, #FFF); }

/*section 2*/
	section#section2 { width:100%; background:linear-gradient(to right, #e9eaec 35%, #FFFFFF 100%); }
	section#section2 .main .row .title { margin-bottom:3%; }
	section#section2 .main .row .title.GRI { position:relative; }
	section#section2 .main .row .title.GRI p.GRInote { position:absolute; font-size:85%; font-style:italic; top:0; right:0; }
	section#section2 .main .row p { padding-bottom:1.5%; }
	section#section2 .main .row p:last-child { padding-bottom:5%; }
	
/*section 3*/
	section#section3 {  }
	section#section3 .main .row .title { margin-bottom:3%; }
	section#section3 .main .row .table { position:relative; }
	section#section3 .main .row .table .square, section#section3 .main .row .table .circle { position:absolute; width:1.2%; height:3%; }
	section#section3 .main .row .table .square { background:url('../images/square.png') no-repeat; width:15px; height:15px; }
	section#section3 .main .row .table .square.one { top:0; right:0; margin-top:-6.5px; margin-right:-5.5px; }
	section#section3 .main .row .table .square.two { bottom:0; left:0; margin-left:-5.5px; margin-bottom:-6.5px; }
	section#section3 .main .row .table .circle { background:url('../images/circle2.png') no-repeat; width:17px; height:17px; }
	section#section3 .main .row .table .circle.one { top:0; left:0; margin-left:-7.5px; margin-top:-7.5px; }
	section#section3 .main .row .table .circle.two { bottom:0%; right:0; margin-right:-7.5px; margin-top:-7.5px; }
	section#section3 .main .row .table table { width:100%; }
	section#section3 .main .row .table table  tr .center { text-align:center; }
	section#section3 .main .row .table table  tr.empty { border:2px; border-style: none solid; }
	section#section3 .main .row .table table  tr.empty.second { border-style: none none none solid; }
	section#section3 .main .row .table table  tr.empty  td { padding:0.5%; }
	section#section3 .main .row .table table  tr .oneCol { width:12.5%; }
	section#section3 .main .row .table table  tr .threeCol { width:62.5%; }
	section#section3 .main .row .table table tr th, section#section3 .main .row .table table tr td { padding:2% 1.5%; border:2px; text-align:left; }
	section#section3 .main .row .table table  tr .top { border-style:solid none none; }
	section#section3 .main .row .table table  tr .top.last { border-style:solid solid none none; }
	section#section3 .main .row .table table  tr .middle { border-style:none solid dotted; }
	section#section3 .main .row .table table  tr .middle.first { border-style:solid solid dotted; }
	section#section3 .main .row .table table  tr .middle.second { border-style:none solid dotted; }
	section#section3 .main .row .table table  tr .middle.second.last { border-style:none solid solid; }
	section#section3 .main .row .table table  tr .bottom { border-style:none solid dotted; }
	section#section3 .main .row .table table  tr .center { text-align:center; }
	
/*section 4*/
	section#section4 {  }
	section#section4 .main .row .title { margin-bottom:3%; }
	section#section4 .main .row .photoWrapper {  }
	section#section4 .main .row .photoWrapper .big { width:52%; position:relative; }
	section#section4 .main .row .photoWrapper .big .decText { position:absolute; left:2%; bottom:-5%; }
	section#section4 .main .row .photoWrapper .big .back { position:absolute; width:60%; height:40%; background:linear-gradient(#b6ffd9, #fed7c0); top:30%; right:-2%; z-index:-1; }
	section#section4 .main .row .photoWrapper .small { width:45%; padding-right:3%; box-sizing:inherit; position:relative; }
	section#section4 .main .row .photoWrapper .small .line { position:absolute; top:0; right:3%; border-right:2px dotted; margin-right:-1.5px; height:100%; }
	section#section4 .main .row .photoWrapper .small .line:before, section#section4 .main .row .photoWrapper .small .line:after { background:url('../images/square.png'); content:''; width:15px; height:15px; position:absolute; margin-left:-6px; }
	section#section4 .main .row .photoWrapper .small .line:before { top:0; }
	section#section4 .main .row .photoWrapper .small .line:after { bottom:0; }
	section#section4 .main .row .photoWrapper .photoBlock { width:100%; padding:0 2% 6%; box-sizing:border-box; }
	section#section4 .main .row .photoWrapper .photoBlock.last { padding-bottom:0; }
	section#section4 .main .row .photoWrapper .photoBlock.small { width:50%; }
	
/*section 5*/	
	section#section5 { margin-bottom:5%; }
	section#section5 .main .row .photoWrapper { padding:3%; position:relative; }
	section#section5 .main .row .photoWrapper .photoBlock { width:80%; }
	section#section5 .main .row .photoWrapper .back { width: 35%; height:70%; position:absolute; background:linear-gradient(#fff5e1, #ffc5c0); top:30%; right:-2%; z-index:-1; }
	section#section5 .main .row .photoWrapper .line { position:absolute; top:0; left:0; border-right:2px dotted; margin-right:-1.5px; height:100%; }
	section#section5 .main .row .photoWrapper .line:before, section#section5 .main .row .photoWrapper .line:after { background:url('../images/square.png'); content:''; width:15px; height:15px; position:absolute; margin-left:-6px; }
	section#section5 .main .row .photoWrapper .line:before { top:0; }
	section#section5 .main .row .photoWrapper .line:after { bottom:0; }
	section#section5 .main .row .photoWrapper .desText { position:absolute; bottom:0%; left:3%; }
	
@media only screen and ( max-width: 1280px ){
	.banner .bannerLine { width: 37vw; bottom: -0.6vw; left: -31.7vw; }
}	

@media only screen and ( max-width: 991px ){
	.banner .bannerWrapper .text h1 { left:10%; }
}

@media only screen and (max-width: 768px){
	.banner { height:30vh; }
	.banner .bannerWrapper, .banner .bannerWrapper img { height:100%; }
	header .header .row.top-header.desktop { display:none; }
	.banner .bannerLine, .banner .bannerPhoto { margin-left:0 !important; }
	.banner .bannerWrapper .text h1 { font-size:2em; top:7.5%; left:5%; }
	.banner .bannerWrapper .text ul { width:85%; left:7%; top:50%; }
	.banner .bannerWrapper .text ul li { margin-bottom:3%; }
	.banner .bannerWrapper .text h1 br, .banner .bannerLine { display:none; }
	.banner .bannerWrapper .text a br { display:none; }
}

@media only screen and (max-width: 500px){
	.main .row.caseStudy .content .moreBtn { padding-right:7.5%; }
	.banner .bannerBack { display:none; }
	.banner .bannerPhoto { width:100%; }
	.banner .bannerWrapper .text { width:100%; right:0; }
	.banner .bannerWrapper .text h1 { top:15%; }
	.banner .bannerWrapper .text h1 br { display:none; }
	.banner .bannerWrapper .text ul { width:80%; }
	.banner .bannerWrapper .text ul li { margin-bottom:1%; }
	section#section1 .unsdgs .square { background:url('../images/square2.png') no-repeat; width:10px; height:10px; }	
	section#section1 .row { width:100%; }
	section#section1 .unsdgs .SDGIcon { position: inherit; margin-top: 5%; width: 18.995%; right: 0; }
	section#section1 .back { top:10%; }
	section#section2 .main { padding-top:10%; }
	section#section2 .main .title.GRI h2 { width:90%; }
	section#section3 .main .row .table .circle { background:url('../images/circle3.png') no-repeat; width:10px; height:10px; }
	section#section3 .main .row .table .square { background:url('../images/square2.png') no-repeat; width:10px; height:10px; }
	section#section3 .main .row .table .square.one { margin-top:-4.5px; margin-right:-3.5px; }
	section#section3 .main .row .table .square.two { margin-bottom:-4.5px; }
	section#section3 .main .row .table .circle.one { margin-top:-5.5px; margin-left:-5.5px; }
	section#section3 .main .row .table .circle.two { margin-right:-3.5px; margin-top:-5.5px; }
	section#section4 .main .row .photoWrapper .small, section#section4 .main .row .photoWrapper .big { width:100%; }
	section#section4 .main .row .photoWrapper .small .line { display:none; }
	section#section4 .main .row .photoWrapper .photoBlock { padding:0; margin-bottom:3%; }
	section#section4 .main .row .photoWrapper .big .photoBlock.last { margin-bottom:0; }
	section#section4 .main .row .photoWrapper .photoBlock.small { width:100%; }
	section#section4 .main .row .photoWrapper .big .decText { position:inherit; left:0; margin-top:1.5%; }
	
	section#section5 .main .row .photoWrapper { padding:0; }
	section#section5 .main .row .photoWrapper .line { display:none; }
	section#section5 .main .row .photoWrapper .photoBlock { width:100%; }
	section#section5 .main .row .photoWrapper .desText { position:inherit; left:0; margin-top:1.5%; }
}

@media print{
	.banner { margin-top:0 !important; }
	.banner .bannerPhoto { width:96% !important; }
	.banner .bannerWrapper .text { right:4% !important;  }
	.banner .bannerBack { right:0 !important; }
	.banner .bannerWrapper .text h1 { left:5%; }
	.banner .bannerWrapper .text ul  { width:100%; left:5%; }
	.banner .bannerWrapper .text ul li { margin-bottom:2%; }
	.banner .bannerLine { display:none; }
	
	.banner .bannerBack { background:linear-gradient(#6bffab, #fefac4) !important; }
	body.dark section#section1 .unsdgs { background:#FFF; color:#000; border-color:#000; }
	body.dark section#section1 .main .back { background:linear-gradient(90deg, #c8ffed, #FFF); }
	body.dark section#section2 { background:linear-gradient(to right, #e9eaec 35%, #FFFFFF 100%) !important; }
	section#section3 .main .row .table table tr th, section#section3 .main .row .table table tr td { padding:1.4% 1.5%; }
	section#section3 .main .row .table .square.two { margin-bottom:-1px; }
	body.dark section#section4 .main .row .photoWrapper .big .back  { background:linear-gradient(#b6ffd9, #fed7c0); }
	body.dark section#section5 .main .row .photoWrapper .back { background:linear-gradient(#fff5e1, #ffc5c0); }
}