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

@import url("common.css");


header{ width:100%; position:fixed; top:0; height:92px; border-bottom:solid thin #27231f; background:url(../images/header-bg.png) repeat scroll; z-index:1;}
header .top{ height:2px; widows:100%; background-color:#4988c5;}
header .wrapper .f-left img{ margin-top:8px;}
header .wrapper .f-right{ text-align:right;}
header .wrapper .menu li{ float:left; height:91px;}
header .wrapper .menu li.active{background-color:#e0121b;}
header .wrapper .menu li a{ line-height:5em; color:#FFF; text-transform:uppercase; display:block; padding:0 15px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
header .wrapper .menu li a:hover{ color:#4988c5;}
header:hover .f-right .light-gray{ color:#ccc;}

.banner{ position:fixed; top:0;}

.skdslider{height: 587px;position: relative; top:0}
.skdslider ul.slides{ margin:0; padding:0; list-style-type:none;}
.skdslider ul.slides li{height: 587px; left: 0; position: absolute; display: none;width:100%;}
.skdslider ul.slides li img{ width: 100%;height:100%;border:0;}
.skdslider .slide-navs { bottom: 20px; left: 50%; position: absolute;list-style-type: none; margin: 0; padding: 0; background:url(../images/banner-nave-bar.png) no-repeat scroll center center; padding:0 10px; display:block; text-align:center;}
.skdslider .slide-navs li { float: left;background: url(../images/slide-bg.png) no-repeat scroll 0 0 transparent;height:10px;width:10px;margin-right:5px; margin-left:5px;cursor:pointer; display:inline-block;}
.skdslider .slide-navs li.current-slide { background: url(../images/slide-bg-active.png) no-repeat scroll 0 0 transparent;}
.skdslider .slide-desc { background: url(../images/slide_desc.png) repeat scroll 0 0 transparent; left: 0; padding:20px; min-width:320px; position: absolute;  top: 30%; left:6%;}
.skdslider .slide-desc > h1 { color:#e0121b; font-size:60px; font-family:'CenturyGothicBold'; margin-bottom: 10px;}
.skdslider .slide-desc > h2 { color:#FFF; font-size: 30px; margin-bottom: 10px; font-weight:normal;}
.skdslider .slide-desc > p {color: #FFFFFF; font-size: 16px; line-height: 20px; margin-top: 5px;}
.skdslider .slide-desc > p a.more:hover {text-decoration:underline;}
.skdslider a.prev{  background: url(../images/banner-left-arrow.png) no-repeat scroll 0 0 transparent;width:35px;height:49px;display:block;cursor:pointer;position:absolute;top:49%;left:2%; opacity:1;}
.skdslider a.next{  background: url(../images/banner-right-arrow.png) no-repeat scroll 0 0 transparent;width:35px;height:49px;display:block;cursor:pointer;position:absolute;top:49%;right:2%;opacity:1;}
.skdslider a.prev:hover{ opacity:.7;}
.skdslider a.next:hover{ opacity:.7;}

.section2{ background:url(../images/section-2-lightgray-bg.jpg) repeat scroll;height:335px;}
.block01{ width:49.95%; border-right:solid thin #FFF; padding:50px 0; height:205px;}
.block01:last-child{border-right:none;}
.block01:last-child h2 { -webkit-animation: LeftToRight 2s ease; -moz-animation: LeftToRight 2s ease;-ms-animation: LeftToRight 2s ease;}
@-webkit-keyframes LeftToRight{
    from {margin-left:90px; opacity:.1;}
    to {margin-left:20px; opacity:1;}
}
@-moz-keyframes LeftToRight{
    from {margin-left:90px; opacity:.1;}
    to {margin-left:20px; opacity:1;}
}
@-ms-keyframes LeftToRight{
    from {margin-left:90px; opacity:.1;}
    to {margin-left:20px; opacity:1;}
}
.block01:last-child p{ -webkit-animation: bcd 2s ease; -moz-animation: bcd 2s ease;-ms-animation: bcd 2s ease;}
@-webkit-keyframes bcd{
    from {margin-left:55px; opacity:.1;}
    to {margin-left:20px; opacity:1;}
}
@-moz-keyframes bcd{
    from {margin-left:55px; opacity:.1;}
    to {margin-left:20px; opacity:1;}
}
@-ms-keyframes bcd{
    from {margin-left:55px; opacity:.1;}
    to {margin-left:20px; opacity:1;}
}
.block01:last-child .more{ -webkit-animation: asd 2s ease; -moz-animation: asd 2s ease;-ms-animation: asd 2s ease;}
@-webkit-keyframes asd{
    from {margin-left:55px; opacity:.1;}
    to {margin-left:20px; opacity:1;}
}
@-moz-keyframes asd{
    from {margin-left:55px; opacity:.1;}
    to {margin-left:20px; opacity:1;}
}
@-ms-keyframes asd{
    from {margin-left:55px; opacity:.1;}
    to {margin-left:20px; opacity:1;}
}
.block01 h2{ font-size:24px; color:#000; font-weight:normal;}
.block01 ul li{ float:left; padding:30px 0 0 0; margin:0 70px 0 0; text-align:center;}
.block01 ul li:last-child{margin:0;}
.block01 ul li h3{ font-weight:normal; margin:10px 0;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.block01 ul li img{ display:inline-block;-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
.block01 p{ color:#666;}
.block01 ul li:hover img{-webkit-transform: rotatey(360deg);-moz-transform: rotatey(360deg);-ms-transform:  rotatey(360deg);-o-transform: rotatey(360deg);transform: rotatey(360deg);}
.block01 ul li:hover h3{ -webkit-animation: abcd 1s ease; -moz-animation: abcd 1s ease;-ms-animation: abcd 1s ease;}
@-webkit-keyframes abcd{
    from {margin-top:30px; opacity:.1;}
    to {margin-top:10px; opacity:1;}
}
@-moz-keyframes abcd{
    from {margin-top:30px; opacity:.1;}
    to {margin-top:10px; opacity:1;}
}
@-ms-keyframes abcd{
    from {margin-top:30px; opacity:.1;}
    to {margin-top:10px; opacity:1;}
}



.service-area{ padding:30px 0; color:#000; display:block;}
.service-area .wrapper ul{ display:inline-block; text-align:center; margin:35px 0; width:100%;}
.service-area .wrapper ul li{ position:relative; float:left; width:32%; height:197px; display:inline-block; margin-right:2%;}
.service-area .wrapper ul li:last-child{ margin-right:0;}
.service-area .wrapper ul li h3{ font-size:18px; font-weight:normal; padding:3%; background:url(../images/header-bg.png) repeat scroll; text-align:left; color:#FFF; position:absolute; bottom:0; width:94%;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.service-area .wrapper ul li:hover h3{ background:#000 url(../images/header-bg.png) repeat scroll;}
.service1{ background:url(../images/service1.jpg) no-repeat scroll center center;}
.service2{ background:url(../images/service2.jpg) no-repeat scroll center center;}
.service3{ background:url(../images/service3.jpg) no-repeat scroll center center;}
.corporate-area{ width:100%; padding:45px 0 0 0; border-top:solid thin #cccccc;}
.corporate-area h2{ padding-right:20px; background:url(../images/blue-arrow.png) no-repeat scroll right center; display:inline-block; margin-right:30px;}
.corporate-area .logos{ float: left; display:inline-flex;}
.corporate-area .logos img{ margin-right:10px; float:left;}


.inner-content{ margin-top:90px; color:#333; padding:20px 0;}
.inner-wrap{ min-height:400px;}
.inner-wrap h2.red{ text-align:center; padding-top:120px;}
.inner-list li{ list-style:url(../images/inner-list-arrow.png) outside; line-height:1.8em; margin-left:12px;}
.inner-wrap .inner-left{width:70%; margin-right:2%; float:left; min-height:450px;}

.inner-wrap .inner-right{width:28%; float:left; padding-top:70px;}

footer{background:#333333 url(../images/footer-top-shadow.png) no-repeat scroll center top; border-top:solid thin #000; padding:15px 0 15px 0; border-bottom:solid thin #000;}
.f-block{ width:46.33%; text-align:left; color:#333;}
.f-block h3{ font-weight:normal;}
.f-block .row{ width:99%; padding-top:8px; padding-bottom:8px; display:block;}
.f-block .row a{ color:#333;}
.mobile1{ background:url(../images/mobile1.png) no-repeat scroll left center;}
.phone1{ background:url(../images/phone1.png) no-repeat scroll left center;}
.fax1{ background:url(../images/fax1.png) no-repeat scroll left center;}
.email1{ background:url(../images/mail1.png) no-repeat scroll left center;}
.f-block .row span{ min-width:200px; float:left;}
.f-block .row ul li{ float: left; margin:0 5px;}
.f-block .row ul li:first-child{ margin-left:0!important;}
.f-block .row ul li a img{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} 
.f-block .row ul li:hover a img{ transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg);}

@media screen and (max-width: 1160px) {
	
	.wrapper{ width:94%; margin:0 auto; padding:0 3%}
	.block01{ width:49.9%;}
	.inner-wrap { padding: 20px 0;}
	
	}