body{ background:#f1f1f3 } .flexslider { position: relative; overflow: hidden; background: url(../Images/loading.gif) 50% no-repeat; } .slides { position: relative; z-index: 1; } .slides li a { display: block; } .flex-control-nav { position: absolute; bottom: 20px; z-index: 2; width: 100%; text-align: center; } .flex-control-nav li { display: inline-block; width: 54px; height: 8px; margin: 0 5px; *display:inline; zoom: 1; } .flex-control-nav a { display: inline-block; width: 54px; height: 8px; overflow: hidden; background:#4e6472; cursor: pointer; text-indent:-999rem } .flex-control-nav .flex-active { background:#89959c } .banner-slider{ height: calc(100vh - 170px); /*-bannerwrap height-*/ overflow:hidden; } .banner-slider .slides li, .banner-slider .slides li a { background-size: cover !important; background-position: center !important; height: calc(100vh - 170px); /*-img height-*/ font-style: italic } .main-top{ margin-top:6px; } .main-top ul li{ float:left; width:33.05%; position:relative; overflow:hidden } .main-top ul li.serviceitem{ width:33.05%; margin:0px 0.425% } .main-top ul li img{ display:block; width:100%; height:auto; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; } .title_h6{ font-size: 30px; color: #535353; font-weight: bold; margin-bottom: 20px; } .title_h6 span{ display: block; margin-top: 10px; font-size: 22px; color: #d2d2d2; font-weight: lighter; text-transform: uppercase; } .main-top ul li a{ display:block; width:100%; height:100%; } .main-top ul li a:hover img{ -webkit-transform:scale(1.03); -moz-transform:scale(1.03); -o-transform:scale(1.03); } .main-top ul li a span{ position:absolute; left:8%; bottom:12%; font-size:30px; color:#fff } .main-top ul li a:hover img{ filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; } .product{ width:1200px; margin:0 auto; margin-top:180px; height:660px; margin-bottom:100px; } .product-item{ width:580px; height:660px; position:relative } .hardware{ background:url(../Images/hardware.png) 0 0 no-repeat; padding: 0; } .software{ background:url(../Images/software.png) 0 0 no-repeat; padding: 0; } .product-item>a.baselayer{ display:block; width:520px; height:600px; padding-top:60px; padding-left:60px; font-size:30px; color:#535353; font-weight:bold; position:absolute; top:0; left:0; } .product-item>a.baselayer>span{ font-size:22px; color:#d2d2d2; font-weight:lighter } .product-list{ position:absolute; z-index:1001; width:0px; overflow:hidden; transition: all ease-out .2s; height:660px; background:#fff } .product-list .img-left{ width:580px; height:660px; float:left; } .hardware .product-list{ top:0; left:0; } .product-list ul{ margin-top:30px; height:630px; width:600px; float:right; } .product-list ul li{ width:220px; height:220px; text-align:center; float:left; margin:30px; } .product-list ul li a{ display:block; width:220px; height:220px; font-size:18px; } .product-list ul li img{ width: 220px; height: 165px; display:block; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; margin-bottom:26px; } .product-list ul li a:hover img{ -webkit-transform:scale(1.06); -moz-transform:scale(1.06); -o-transform:scale(1.06); } .product-list ul li a:hover span{ color:#41b6bf } .software .product-list{ top:0; right:0; } .open .product-list{ width:1200px; height:660px; -webkit-box-shadow: 0px 0px 30px #666; -moz-box-shadow: 0px 0px 30px #666; box-shadow: 0px 0px 30px #666; }