@charset "utf-8"; /* CSS Document */ #game4 .container{background-color:#eee8c5;} #intro4 .container{ background-color:#eee8c5;} #intro4 .content_box.top { height:100%;min-height:1105px;} #intro4 .content_box.top>.wrapper>h4{ background:url(../images/titleBg_subLevel0.png) center center no-repeat; position:relative; z-index:20;} #intro4 .content_box.top .main_content{width:300px; top:177px; left:110px; position:relative; z-index:5;} #intro4 .content_box.top .slider_btn{top:642px;} #intro4 .content_box.top .slider_pager{top:952px;} #intro4 .content_box.top .btn_take_the_quiz{top:636px;} #intro4 .content_box.bottom{ background:url(../../../images/building_materials_strategy/bg_content_box_bottom_intro1.png) -709px top no-repeat; top:-256px; min-height:271px; z-index:-2; position:relative;} #intro4 .main_animate{position:absolute; top:257px; left:-324px;} #intro4 #intro4_9 .main_animate{left:-180px;} #intro4 .content_box.top h5,#intro4 .content_box.top h6{z-index:50;color:#f15a22;position:absolute;text-align:left;font-size:14px;} #intro4 .content_box.top h5{font-size:18px;} #intro4 .content_box.top h6{font-size:14px;} #intro4 #txt_lifeCycle{top:437px;left:430px;} #intro4 #txt_carbonEmissions{left:356px;top:663px;transform:rotate(-90deg);-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);} #intro4 #txt_conventionalBuilding{top:621px;left:370px;transform:rotate(-90deg);-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);color:#fff;} #intro4 #txt_zcb{top:706px;left:511px;transform:rotate(-90deg);-ms-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);color:#fff;} .ie8 #intro4 #txt_zcb{top:455px;left:842px;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);} #intro4 #txt_extraction{top:796px;left:500px;} #intro4 #txt_operation{top:225px;left:825px;color:#f12938;} #intro4 #txt_operation2{top:620px;left:669px;} #intro4 #txt_constructionPeriod{top:813px;left:669px;} #intro4 #txt_operation3{top:602px;left:562px;color:#66952e;} #intro4 #txt_leanConstruction{top:825px;left:562px; color:#66952e;} #intro4 #txt_passive{width:100px;text-align:right;left:245px;top:609px;color:#fff;} #intro4 #txt_active{width:100px;text-align:right;left:245px;top:565px;color:#fff;} #intro4 #txt_renewable{width:100px;text-align:right;left:244px;top:521px;color:#fff;} #intro4 .intro4_9_btn{cursor:pointer; z-index:10; display:block; position:absolute; top:436px; left:238.5px;} #intro4 .intro4_9_btn svg,#intro4 .intro4_9_btn object{position:relative; z-index:1;margin:-90px auto 0;} #intro4 .intro4_9_btn h4{padding:9px 0; width:232px; height:90px; top:140px; position:relative; z-index:0; color:#ff6418; background:url(../images/titleBg_intro4_9_btn.png) top left no-repeat; margin:0 29px;} #game4 .content_box.top {height:100%;min-height:1002px;} #game4 .content_box.top h2 { color: #356619; position:relative; z-index:1;} #game4 .content_box.top .btn_take_the_quiz{position:absolute;top:1356px;left:243px;} #game4 .content_box.top .btn_tips{background:url(../../../images/building_materials_strategy/btn_tips.png) no-repeat scroll center top;height:57px;padding-right:31px;position:absolute;top:1356px;width:102px;z-index:1000;cursor:pointer;left:479px;display:none;} #game4 .content_box.top .btn_tips h3{line-height:57px;} #game4 .content_box.top .btn_tips:hover{background-position:center bottom;} #game4 #popup_tips{padding:42px;display:none;} #game4 #popup_tips h4{color:#f58426;padding-bottom:10px;} #game4 #popup_tips h5{color:#f58426;} #game4 #popup_tips .tips_box{width:238px; float:left; margin:20px 10px 0; padding:20px;border-radius:10px;} #game4 #popup_tips .tips_box img{padding-bottom:5px;} #game4 #popup_tips .tips_box.fittingOut{border:1px solid #f7941e;} #game4 #popup_tips .tips_box.envelope{border:1px solid #2c95b5;} #game4 #popup_tips .tips_box.structure{border:1px solid #8a9e99;} #game4 #popup_tips .tips_box.others{border:1px solid #69913b;} #game4 #popup_tips .tips_box.fittingOut h4,#game4 #popup_tips .tips_box.fittingOut p{color:#f7941e;} #game4 #popup_tips .tips_box.envelope h4,#game4 #popup_tips .tips_box.envelope p{color:#2c95b5;} #game4 #popup_tips .tips_box.structure h4,#game4 #popup_tips .tips_box.structure p{color:#8a9e99;} #game4 #popup_tips .tips_box.others h4,#game4 #popup_tips .tips_box.others p{color:#69913b;} #game4 .content_box.bottom{background:url(../../../images/index/bg_content_box_bottom.png) top center no-repeat;z-index:-2;min-height:451px;} #game4 .content_box .main_image{ display:block; top:846px; left:192.5px; position:absolute;} #game4 .content_box #balance{position:absolute;left:260px;top:890px;} #game4 .content_box #scales_l{position:absolute;left:161px;top:822px;} #game4 .content_box #scales_r{ position:absolute; right:159px; top:822px;} #game4 .content_box #totalScales{top:863px;left:292px;position:absolute;z-index:2;height:183px;width:183px;margin:0 auto;} #game4 .content_box #totalScales .valueBox{height:151px; width:151px; position:absolute; top:16px; left:16px; z-index:1000; background:url(../../../images/building_materials_strategy/valueBox_total.png) center center no-repeat;} #game4 .content_box #totalScales .valueBox>div{display:table;height:151px;width:151px;} #game4 .content_box #totalScales .valueBox>div>h3{ color:#66952e; width:100%; margin-top:0px; display:table-cell; vertical-align:middle;} #game4 .content_box #totalScales .elementsDisplay{height:151px; width:151px; position:absolute; top:16px; left:16px; z-index:1000; display:none;} #game4 .content_box #totalScales .elementsDisplay>div{display:table;height:151px;width:151px;} #game4 .content_box #totalScales .elementsDisplay>div>h3{color:#fff; display:table-cell; vertical-align:middle;} #game4 .content_box #totalScales #fittingOutDisplay{ background:url(../../../images/building_materials_strategy/valueBox_fittingOut.png) center center no-repeat;} #game4 .content_box #totalScales #envelopeDisplay{ background:url(../../../images/building_materials_strategy/valueBox_envelope.png) center center no-repeat;} #game4 .content_box #totalScales #structureDisplay{ background:url(../../../images/building_materials_strategy/valueBox_structure.png) center center no-repeat;} #game4 .content_box #totalScales #othersDisplay{ background:url(../../../images/building_materials_strategy/valueBox_others.png) center center no-repeat;} #game4 .content_box.top>.wrapper>h4{ background:url(../images/titleBg_subLevel1.png) center center no-repeat; position:relative; z-index:1;} #game4 .main_content{ position:relative; top:40px; width:350px; margin:0 auto; z-index:5;} #game4 .content_box.top .main_content p{ text-align:center; color:#404040;} #game4 .content_box.top .tips{ position:absolute; z-index:1000;} #game4 .content_box.top .tips p{color:#b01a48; line-height:21px;} #game4 .content_box.top #tips1{ background:url(../../../images/arrow_up.gif) left top no-repeat; left:50px; top:622px; width:120px; padding-left:25px; padding-top:20px;} #game4 .content_box.top #tips1 p{ text-align:left;} #game4 .content_box.top #tips2{background:url(../../../images/arrow_left.gif) left bottom no-repeat;z-index:1000;left:330px;top:722px;width:95px;padding-right:25px;padding-bottom:5px;} #game4 .content_box.top #tips2 p{ text-align:right;} #game4 .content_box.top #resetBtn{line-height:22px;height:30px;width:75px;position:absolute;left:480px;top:1020px;} #game4 .content_box.top #resetBtn a{padding:2px 30px 6px 0;background:url(../../../images/building_materials_strategy/btnReset.png) right center no-repeat;display:block;color:#92b1cd;font-size:14px;} #game4 .content_box.top #resetBtn a:hover{background-image:url(../../../images/building_materials_strategy/btnReset_over.png); cursor:pointer;} #game4 .content_box.top #treeBox{width:164px;height:60px;position:absolute;top:762px;left:415px;text-align:left;margin-left:20px;z-index:-1;} #game4 .content_box.top #treeBox .tree{margin-left:-23px; top:-30px; position:relative; display:none;} #game4 .content_box.top .dropBox{width:60px; height:28px; position:absolute; border-radius:5px;} #game4 .content_box.top #dropFittingOut{top:743px; left:185px; border:2px dashed #f7941e;} #game4 .content_box.top #dropEnvelope{top:743px; left:257px; border:2px dashed #2c95b5;} #game4 .content_box.top #dropStructure{top:783px; left:185px; border:2px dashed #8a9e99;} #game4 .content_box.top #dropOthers{top:783px; left:257px; border:2px dashed #69913b;} #game4 .material_box{ width:310px; height:210px; border-radius:15px; position:absolute; background: rgba(0, 0, 0, 0.05); padding:5px;} .ie8 #game4 .material_box{background-image: url(../../../images/black5.png); background-color:inherit;} #game4 .material_boxBg{background-color:#fff; width:100%; height:100%; border-radius:10px; position:relative;} #game4 .material_box>.material_boxBg>h4{line-height:40px;text-align:left;padding:0 20px;position:relative;z-index:2;border-radius:10px 10px 0 0;font-size:24px;} #game4 .material_box.fittingOut{top:483px;left:40px;} #game4 .material_box.fittingOut>.material_boxBg>h4{ background-color:#f7941e;} #game4 .material_box.envelope{ top:483px; right:40px;} #game4 .material_box.envelope>.material_boxBg>h4{ background-color:#2c95b5;} #game4 .material_box.structure{ top:1098px; left:40px;} #game4 .material_box.structure>.material_boxBg>h4{ background-color:#8a9e99;} #game4 .material_box.others{ top:1098px; right:40px;} #game4 .material_box.others>.material_boxBg>h4{ background-color:#69913b;} #game4 .material_box .colL{ float:left; width:146px; height:150px; padding:10px 0 10px 20px;} #game4 .material_box .colL h6{ color:#404040; text-align:left;} #game4 .material_box .colL .elements_box{ float:left; margin-right:4px;} #game4 .material_box .colL .elements{ width:64px; height:32px; text-align:left; margin-bottom:4px; padding-top:4px; padding-right:4px; position:relative; z-index:1001; display:block;cursor:pointer;} #game4 .material_box .colL .elementName_selecting,#game4 .material_box .colL .elementName_dragging{display:none;margin:5px 0 9px;font-size:16px;line-height:19px;} #game4 .material_box.selecting .colL .elementName_selecting{display:block;color:#b2b2b2;font-size:16px;} #game4 .material_box.dragging .colL .elementName_selecting{display:none;} #game4 .material_box.dragging .colL .elementName_dragging{display:block;} #game4 .material_box .colL .recycledContent{position:absolute;top:182px;} #game4 .material_box .colL .elements.bg1a.dragging,#game4 .material_box .colL .elements.bg1a.selected{ background:url(../../../images/building_materials_strategy/elementsBg1a.png);} #game4 .material_box .colL .elements.bg1b.dragging,#game4 .material_box .colL .elements.bg1b.selected{ background:url(../../../images/building_materials_strategy/elementsBg1b.png);} #game4 .material_box .colL .elements.bg1c.dragging,#game4 .material_box .colL .elements.bg1c.selected{ background:url(../../../images/building_materials_strategy/elementsBg1c.png);} #game4 .material_box .colL .elements.bg1d.dragging,#game4 .material_box .colL .elements.bg1d.selected{ background:url(../../../images/building_materials_strategy/elementsBg1d.png);} #game4 .material_box .colL .elements.bg2a.dragging,#game4 .material_box .colL .elements.bg2a.selected{ background:url(../../../images/building_materials_strategy/elementsBg2a.png);} #game4 .material_box .colL .elements.bg2b.dragging,#game4 .material_box .colL .elements.bg2b.selected{ background:url(../../../images/building_materials_strategy/elementsBg2b.png);} #game4 .material_box .colL .elements.bg2c.dragging,#game4 .material_box .colL .elements.bg2c.selected{ background:url(../../../images/building_materials_strategy/elementsBg2c.png);} #game4 .material_box .colL .elements.bg3a.dragging,#game4 .material_box .colL .elements.bg3a.selected{ background:url(../../../images/building_materials_strategy/elementsBg3a.png);} #game4 .material_box .colL .elements.bg3b.dragging,#game4 .material_box .colL .elements.bg3b.selected{ background:url(../../../images/building_materials_strategy/elementsBg3b.png);} #game4 .material_box .colL .elements.bg4a.dragging,#game4 .material_box .colL .elements.bg4a.selected{ background:url(../../../images/building_materials_strategy/elementsBg4a.png);} #game4 .material_box .colL .elements.bg4b.dragging,#game4 .material_box .colL .elements.bg4b.selected{ background:url(../../../images/building_materials_strategy/elementsBg4b.png);} #game4 .material_box .colL .elements.bg4c.dragging,#game4 .material_box .colL .elements.bg4c.selected{ background:url(../../../images/building_materials_strategy/elementsBg4c.png);} #game4 .material_box .colR{ float:right; width:115px; height:150px; padding:10px 20px 10px 0;} #game4 .material_box .colR p, #game4 .material_box .colR h6{ font-size:14px; line-height:18px; letter-spacing: -1px\9; [;letter-spacing: -1px;];} #game4 .material_box .colR>.distance>p{float:left;} #game4 .material_box .colL>.recycledContent>p{float:left;color:#8a9e99;font-size:14px;line-height:18px; letter-spacing: -1px\9; [;letter-spacing: -1px;];} #game4 .material_box .colR>.distance>h6{float:right;} #game4 .material_box .colL>.recycledContent>h6{float:right;color:#8a9e99;font-size:14px;line-height:18px; letter-spacing: -1px\9; [;letter-spacing: -1px;];} #game4 .material_box.fittingOut .colR p, #game4 .material_box.fittingOut .colR h6, #game4 .material_box.fittingOut .colR h4{ color:#f7941e;} #game4 .material_box.envelope .colR p, #game4 .material_box.envelope .colR h6, #game4 .material_box.envelope .colR h4{ color:#2c95b5;} #game4 .material_box.structure .colR p, #game4 .material_box.structure .colR h6, #game4 .material_box.structure .colR h4{ color:#8a9e99;} #game4 .material_box.others .colR p, #game4 .material_box.others .colR h6, #game4 .material_box.others .colR h4{ color:#69913b;} #game4 .material_box .colR .chart {width:90px; height:90px; margin:3px auto;} #game4 .material_box .colR .chart canvas{position:relative; z-index:2;} #game4 .material_box .colR .chart .chartBg{width:90px; height:90px; position:absolute; border-radius:100px; z-index:1;} #game4 .material_box.fittingOut .colR .chart .chartBg{background:url(../../../images/building_materials_strategy/chartBg_fittingOut.png) center center no-repeat;} #game4 .material_box.envelope .colR .chart .chartBg{background:url(../../../images/building_materials_strategy/chartBg_envelope.png) center center no-repeat;} #game4 .material_box.structure .colR .chart .chartBg{background:url(../../../images/building_materials_strategy/chartBg_structure.png) center center no-repeat;} #game4 .material_box.others .colR .chart .chartBg{background:url(../../../images/building_materials_strategy/chartBg_others.png) center center no-repeat;} #game4 .material_box .colR .chart h4{position:absolute;z-index:2;width:70px;top:107px;left:198px;font-size:24px;line-height:30px;} #game4 .material_box .colR .chart img{position:absolute; z-index:2; top:137px; left:214px;} #distanceChoose{ padding:0;} .popup_elementsDetail{position:absolute !important;left:-230px !important;} .ie8 .popup_elementsDetail .fancybox-skin{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000); } .popup_elementsDetail .fancybox-skin{border-radius:0; background:url(../../../images/building_materials_strategy/distanceChoose_poupBg.png) 60px bottom no-repeat;} .popup_elementsDetail .fancybox-outer{padding:20px 35px; border-radius:20px; background-color:#fff;} .popup_elementsDetail, .popup_elementsDetail .fancybox-skin{width:460px !important;} .popup_elementsDetail .fancybox-outer, .popup_elementsDetail .fancybox-inner{width:390px;} .popup_elementsDetail .fancybox-inner .popup_info_box{padding:0; height:100%; width:100%;} .popup_elementsDetail .fancybox-inner .popup_info_box .popup_info_content{height:100%; width:100%;} .popup_elementsDetail .fancybox-inner h5{text-align:center;color:#f58426;padding-bottom:25px;font-size:18px;} .popup_elementsDetail .fancybox-inner h6{color:#b2b2b2;position:absolute;top:30px;left:174px;font-size:14px;} .popup_elementsDetail .fancybox-inner h6.active{color:#404040;} .popup_elementsDetail .fancybox-inner h6.left{left:35px;} .popup_elementsDetail .fancybox-inner h6.right{left:309px;} .popup_elementsDetail .fancybox-close {background:url(../../../images/building_materials_strategy/distanceChoose_poupCloseBtn.png); width:68px; height:39px; top:inherit; bottom:10px; right:196px;} .popup_elementsDetail .distanceChoose_scrollBar {background:url(../../../images/building_materials_strategy/distanceChoose_scrollBar.png) center 10px no-repeat; width:290px; height:28px; margin:4px auto 0;} .popup_elementsDetail .distanceChoose_scrollBtn{background:url(../../../images/building_materials_strategy/distanceChoose_scrollBtn.png); width:28px; height:28px; left:131px; position:relative;} .popup_elementsDetail .recycledContentChoose_scrollBar {background:url(../../../images/building_materials_strategy/distanceChoose_scrollBar.png) center 10px no-repeat; width:290px; height:28px; margin:4px auto 10px;} .popup_elementsDetail .recycledContentChoose_scrollBtn{background:url(../../../images/building_materials_strategy/distanceChoose_scrollBtn.png); width:28px; height:28px; left:131px; position:relative;} .popup_elementsDetail .fancybox-inner .popup_info_content #recycledContentChoose h6.left {left:44px;} .popup_elementsDetail .fancybox-inner .popup_info_content #recycledContentChoose h6.middle {left:183px;} .popup_elementsDetail .fancybox-inner .popup_info_content #recycledContentChoose h6.right {left:324px;} .popup_elementsDetail .fancybox-inner .popup_info_content.bg3a .blank { width:100%; position:relative; top:-15px; left:0;} .popup_elementsDetail .fancybox-inner .popup_info_content.bg3b h6 {top:120px;} .popup_elementsDetail .fancybox-inner .popup_info_content.bg3b #recycledContentChoose h6 {top:30px;}