html, body { margin: 0; padding: 0; width: 100%; height: 99%; background:url(../bg.jpg) top center no-repeat #000; font-family: 'Segoe UI'; } .blue{color:#0000ff;font-size:34px;} .white{color:white ;font-size:30px;} .icon { position: relative; width: 32px; height: 32px; display: block; fill: rgba(51, 51, 51, 0.5); margin-right: 20px; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } .icon.active { fill: #E74C3C; } .icon.big { width: 64px; height: 64px; fill: rgba(51, 51, 51, 0.5); } #wrapper { width: 1000px; height: 500px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: left; -webkit-justify-content: left; -ms-flex-pack: left; justify-content: left; overflow: hidden; } #wrappe{width:1000px;height:8%;position:absolute;top:90%;bottom:0;left:0;right:0;margin:auto;background-color:#fff;box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, #0.24);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:left;-webkit-justify-content:left;-ms-flex-pack:left;justify-content:left;overflow:hidden;} #left-side { height: 80%; width: 15%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } #left-side ul li { padding: 5px 5px 0 5px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; line-height: 34px; color: rgba(51, 51, 51, 0.5); font-weight: 500; cursor: pointer; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } #left-side ul li:hover { color: #333333; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } #left-side ul li:hover > .icon { fill: #333; } #left-side ul li.active { color: #333333; } #left-side ul li.active:hover > .icon { fill: #E74C3C; } #border { height: 288px; width: 1px; background-color: rgba(51, 51, 51, 0.2); } #border #line.one { width: 5px; height: 54px; background-color: #E74C3C; margin-left: -2px; margin-top: 35px; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } #border #line.two { width: 5px; height: 54px; background-color: #E74C3C; margin-left: -2px; margin-top: 89px; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } #border #line.three { width: 5px; height: 54px; background-color: #E74C3C; margin-left: -2px; margin-top: 143px; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } #border #line.four { width: 5px; height: 54px; background-color: #E74C3C; margin-left: -2px; margin-top: 197px; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } #lef-side { height: 100%; width: 25%; overflow: hidden; } #righ-side { height: 100%; width: 75%; overflow: hidden; } #right-side { height: 400px; width: 85%; overflow: hidden; } #right-side #first, #right-side #second, #right-side #third, #right-side #fourth { position: absolute; height: 400px; width: 85%; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; margin-top: -350px; opacity: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } #right-side #first h1, #right-side #second h1, #right-side #third h1, #right-side #fourth h1 { font-weight: 500; color: #333; } #right-side #first h2, #right-side #second h2, #right-side #third h2, #right-side #fourth h2 { font-weight: 400; color: #333; } #right-side #first p, #right-side #second p, #right-side #third p, #right-side #fourth p { color: #333; font-weight: 500; padding-left: 30px; padding-right: 30px; } #right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active { margin-top: 0px; opacity: 1; -webkit-transition: all .6s ease-in-out; transition: all .6s ease-in-out; }