@charset "UTF-8";

/* Base */
html{font-family: 'Helvetica Nenu', Arial, sans-serif; height: 100%;}
body{height: 100%;}
p{margin: 0;}
.scene{position: relative; height: 100%; overflow: hidden; width: 100%;}
.clearfix:after{content: ''; display: block; clear: both;}	
.scene1{height: 1000px; background: red;}
.scene3{height: 1000px; background: blue;}




/* 인포 그래픽 */
#scene-2 .scene-bg{position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto;}
#scene-2-content{position: absolute; width: 30%; min-width: 600px; height: 100%; top: -125px; right:90px;}
.charts{position: relative; margin: 0 auto; width: 655px; top: 66%; margin-top: -300px; overflow: hidden; left: -75px;}
.chart{float: left; position: relative; margin: 20px; width: 120px; height: 120px;}
.circle-mask-outer, .circle-mask-inner{overflow: hidden; position: absolute; width: 60px; height: 120px;}
.circle-mask-outer.left{left: 0;}
.circle-mask-outer.right{right: 0;}
.circle-mask-outer.left .circle-mask-inner{left: 100%; 
	-o-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	-moz-transform-origin: 0 50%;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.circle-mask-outer.right .circle-mask-inner{right: 100%; 
	-o-transform-origin: 100% 50%;
	-ms-transform-origin: 100% 50%;
	-moz-transform-origin: 100% 50%;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}	
.circle-body{border-radius: 50%; position: absolute; width: 120px; height: 120px;}
		.circle-mask-outer.left .circle-body{right: 0;}
		.circle-mask-outer.right .circle-body{left: 0;}
#water .circle-body{background-color: #cccccc;}		
#sunshine .circle-body{background-color: #cccccc;}		
#birds .circle-body{background-color: #cccccc;}		
#woods .circle-body{background-color: #cccccc;}		
.chart-content{position: absolute; left: 9px; top: 11px; width: 100px; height: 80px; background-color: #ffffff; border-radius: 50%; padding-top: 18px; text-align: center; -webkit-box-shadow: 0 0 20px rgba(0,0,0,.5); box-shadow: 0 0 20px rgba(0,0,0,.5);}
.chart-content img{width: 55px; height: 55px;}
.chart-content .text{left: 8px; line-height: 1; position: relative;}
.chart-content .percent-number{font-size: 18px; font-weight: bold;}
.chart-content .percent-symbol{font-size: 15px;}

.no-borderradius .circle-mask-outer, .no-csstransforms .circle-mask-outer{display: none;}
.no-borderradius .chart-content, .no-csstransforms .chart-content{top: 0; left: 0; width: 240px; height: 180px; padding-top: 60px; /* background: url(../images/bg.jpg) no-repeat 0 0; */}
.no-borderradius #sunshine .chart-content,
.no-csstransforms #sunshine .chart-content{background-position: -240px 0;}
.no-borderradius #birds .chart-content,
.no-csstransforms #birds .chart-content{background-position: -480px 0;}
.no-borderradius #woods .chart-content,
.no-csstransforms #woods .chart-content{background-position: -720px 0;}