@charset "utf-8"; /*-- Author: W3layouts Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/ --*/ /*--- header ----*/ .container { width: 1200px; margin: 0 auto; } .mobile-divise { text-align: center; margin-top: 11%; } .divise-info { color: #FFFFFF; margin-top: 60%; } .divise-info h1 { font-family: '黑体', sans-serif; font-weight:700; font-size:60px; } .divise-info span { display:block; } .divise-info p { font-family: '黑体', sans-serif; font-size:18px; margin-top:8%; } .divise-info p span { display:block; } .get { margin-top: 14%; } .get a { padding:01em 1.5em; border: #1C8DD5 solid 2px; background:#1C8DD5; color:#FFFFFF; font-family: '黑体', sans-serif; font-weight:700; border-radius:7px; } .get a:hover { background:#FFFFFF; color:#1C8DD5; text-decoration:none; border: #1C8DD5 solid 2px; transition:0.5s all; -webkit-transition:0.5s all; -o-transition:0.5s all; -moz-transition:0.5s all; -ms-transition:0.5s all; } .divise-info p.text { color:#B4B3B3; font-family: '黑体', sans-serif; font-size:14px; margin-top: 7%; } .divise-info p.text span { display:block; } .header-bg { min-height:1000px; } /*--- content ----*/ .content { background:#EEEEEE; } .content-girds { text-align:center; padding:10% 0; } .service-grid { text-align:center; } .service a span { background:url(../images/img-sprits.png) no-repeat 0px 0px; width:120px; height:120px; display: inline-block; } .service-grid h2 a { font-size:24px; font-family: '黑体', sans-serif; font-weight: 700; color:#1C8DD5; } .service-grid h2 a:hover { color:#BFBFBF; text-decoration:none; transition:0.5s all; -webkit-transition:0.5s all; -o-transition:0.5s all; -moz-transition:0.5s all; -ms-transition:0.5s all; } .service-grid span { display:block; } .service-grid p { font-size:14px; color:#999898; } .service a span.security { background:url(../images/img-sprits.png) no-repeat -282px 0px; width:120px; height:120px; display: inline-block; } .service a span.seconds { background:url(../images/img-sprits.png) no-repeat -560px 0px; width:120px; height:120px; display: inline-block; } /*--- content-recent-works ----*/ .recent-works-text { text-align:center; padding:1% 0; background-color:#eeeeee; } .portfolio-text h2 { font-size: 24px; font-weight:bold; color: #000000; height:47px; } .portfolio-text p { font-size: 14px; font-family: '黑体', sans-serif; color: #999898; } .portfolio-text span { display: block; } /* Strip /*-----------------------------------------------------------------------------------*/ .b-link-stripe{ position:relative; display:inline-block; vertical-align:top; font-family: '黑体', sans-serif; font-weight: 300; overflow:hidden; } .b-link-stripe .b-wrapper{ position:absolute; width:100%; height:100%; top:0; left:0; text-align:left; padding: 9% 0 0 14%; color:#ffffff; overflow:hidden; } .b-link-stripe .b-wrapper:hover { background: rgba(28, 141, 203, 0.78); transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; } /*-----------------------------------------------------------------------------------*/ /* Animation effects /*-----------------------------------------------------------------------------------*/ .b-animate-go{ text-decoration:none; } .b-animate{ transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; visibility: hidden; font-size:1.1em; font-weight:700; } .b-animate img{ margin-top:33%; display: -webkit-inline-box; } /* lt-ie9 */ .b-animate-go:hover .b-animate{ visibility:visible; } .b-from-left{ position:relative; left:-100%; } .b-animate-go:hover .b-from-left{ left:0; } span.m_4{ font-size:14px; font-weight:400; } p.m_5 { margin: 2% auto 5%; width: 70%; color: #283A47; font-size: 1.1em; font-weight: 600; line-height: 1.5em; text-align: center; } ul#filters { padding: 0px; } #filters { margin: 3% 0; padding: 0; list-style: none; text-align: center; } #filters li { display:inline-block; display: -webkit-inline-box; display: -moz-inline-box; display: -o-inline-box; display: -ms-inline-box; } #filters li span.active { display: block; padding: 8px 16px; text-decoration: none; background: #1C8DD5; color: #FFFFFF; cursor: pointer; font-size: 18px; font-family: '黑体', sans-serif; font-weight: 700; border: solid 2px #FFFFFF; border-radius: 7px; } #filters li span { display: block; padding: 8px 16px; text-decoration: none; color: #1C8DD5; cursor: pointer; font-size: 18px; font-family: '黑体', sans-serif; font-weight: 700; border: solid 2px #FFFFFF; border-radius: 7px; } #filters li span:hover { border: solid 2px #1C8DD5; border-radius: 7px; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width: 23%; display: none; float: left; overflow: hidden; margin: 1%; } div#portfoliolist { margin-top:10px; } .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; } .portfolio img { max-width:100%; /*--position: relative;--*/ transition: all 300ms!important; -webkit-transition: all 300ms!important; -moz-transition: all 300ms!important; } .portfolio .label { position: absolute; width: 100%; height:40px; bottom:-40px; } .portfolio .label-bg { background: #22B4B8; width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label-text { color:#fff; position: relative; z-index:500; padding:5px 8px; } .portfolio .text-category { display:block; font-size:9px; font-size: 12px; text-transform:uppercase; } /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /*----- effects-comman-css------*/ .contenthover{ padding:1em; } .contenthover h3{ color:#FFF; } .contenthover p{ color:#FFF; font-size:0.875em; line-height:1.5em; } /*-----caption ------*/ .caption { text-align:left; margin-left:9%; } .caption h3{ color:#FFF; font-family: '黑体', sans-serif; font-weight: 700; font-size:1.8em; } .caption p { text-align:left; font-size:14px; } .caption small { display:block; text-align:left; font-size:14px; } p.b-animate.b-from-left.b-delay03 { font-family: '黑体', sans-serif; font-weight: 400; font-size: 16px; color: #FFFFFF; } p.b-animate.b-from-left.b-delay03 small { display:block; font-size: 16px; } h2.b-animate.b-from-left.b-delay03 { font-family: '黑体', sans-serif; font-size: 28px; } /*--- our-team ---*/ .our-team { background:#fff; padding:1% 0; } .our-team-left-grid h2 { font-size: 24px; color: #1C8DD5; font-family: '黑体', sans-serif; margin-top: 2%; font-weight: 700; } .our-team-left-grid p { font-size:16px; color:#1C8DD5; font-family: '黑体', sans-serif; font-weight:300; margin: 18% 0 12% 0; } .our-team-left-grid a { background:#FFFFFF; font-family: '黑体', sans-serif; font-size:16px; color:#1C8DD5; border-radius:7px; padding:.5em 1em; } .our-team-left-grid a:hover { text-decoration:none; color:#1C8DD5; background:#125E8F; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .our-team-left-grid span { display:block; } .grid-right-left { background:#FFFFFF; padding:2%; text-align:center; border-radius:5px; } .grid-right-left-img { background:url(../images/team-img.png) no-repeat 0px 0px; width:120px; height:118px; display: inline-block; margin-top: 10%; } .grid-right-left h4 a { color:#1C8DD5; font-family: '黑体', sans-serif; font-size:18px; font-weight:700; } .grid-right-left h4 a:hover { text-decoration:none; color:#BFBFBF; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .grid-right-left p { color:#A6A3A3; font-family: '黑体', sans-serif; font-size:16px; } .icons { text-align: center; margin: 15% 0 10% 0; } .icons ul { margin:0; padding:0; } .icons ul li { display:inline-block; margin-left: 4%; } .icons ul li.icon1 a small { background:url(../images/social-icons1.png) no-repeat 0px 0px; width:24px; height:24px; display: inline-block; } .icons ul li.icon2 a small { background:url(../images/social-icons1.png) no-repeat -36px 0px; width:24px; height:24px; display: inline-block; } .icons ul li.icon3 a small { background:url(../images/social-icons1.png) no-repeat -71px 0px; width:24px; height:24px; display: inline-block; } .icons ul li.icon1 a small:hover { background:url(../images/social-iconshr.png) no-repeat 0px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .icons ul li.icon2 a small:hover { background:url(../images/social-iconshr.png) no-repeat -36px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .icons ul li.icon3 a small:hover { background:url(../images/social-iconshr.png) no-repeat -71px 0px; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .grid-right-middle-img { background:url(../images/team-img.png) no-repeat -212px 0px; width:120px; height:118px; display: inline-block; margin-top: 10%; } .grid-right-right-img { background:url(../images/team-img.png) no-repeat -426px 0px; width:120px; height:118px; display: inline-block; margin-top: 10%; } .grid-right-zright-img { background:url(../images/team-img.png) no-repeat -429px 0px; width:120px; height:118px; display: inline-block; margin-top: 10%; } .grid-right-dright-img { background:url(../images/team-img.png) no-repeat -855px 0px; width:120px; height:118px; display: inline-block; margin-top: 10%; } .grid-right-lright-img { background:url(../images/team-img.png) no-repeat -1014px 0px; width:130px; height:130px; display: inline-block; margin-top: 10%; padding-left:30px; } /*--- latest-posts ---*/ .latest-posts { padding: 6% 0; } .latest-posts-text { text-align:center; margin-bottom: 5%; } .latest-posts-text h2 { color:#1C8DD5; font-family: '黑体', sans-serif; font-weight:700; font-size: 38px; } .latest-posts-text p { font-family: '黑体', sans-serif; font-size:16px; color:#BCBBBB; } .latest-posts-text span { display:block; } .latest-posts-grid-left img { width:100%; } .latest-posts-grid-right h2 a { color:#1C8DD5; font-family: '黑体', sans-serif; font-weight:700; font-size: 28px; margin-top: 7%; text-decoration:none; } .latest-posts-grid-right h2 a:hover { color:#A9A9A9; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .latest-posts-grid-right span { display:block; font-family: '黑体', sans-serif; font-weight: 700; color:#949393; font-size:18px; } .latest-posts-grid-right p { font-family: '黑体', sans-serif; color:#B5B1B1; font-size:16px; } .latest-posts-grid-right small { display:block; font-size: 16px; } .latest-posts-bottom-grids { margin-top:2%; } /*--- contact-us ---*/ .content-contact { position: relative; min-height: 456px; } .map { position:relative; } .map iframe { width: 100%; min-height: 481px; border: none; position: absolute; } .contact-us { background: rgba(48, 138, 194, 0.56); width: 100%; padding: 1.65em 0; top: 0; right: 0; position: absolute; } .contact-us-text { text-align:center; margin: 5% 0; } .contact-us h2 { color:#FFFFFF; font-family: '黑体', sans-serif; font-weight:700; font-size: 38px; } .contact-us p { font-family: '黑体', sans-serif; font-size:16px; color: #EAF4F7; position:relative; } .contact-us span { display:block; } .text-fields { width:60%; margin:0 auto; } .location a span { position: absolute; top: 21%; right: 9%; } .location a span img { width:100%; } .text-fields-left form input[type="text"] { width:100%; padding: 3%; font-family: '黑体', sans-serif; font-weight:600; font-style:italic; color:#E5E5E5; outline:none; border-radius: 8px; border: solid 2px #FFFFFF; margin-bottom: 2.5%; } .text-fields-left form input[type="text"]:hover { color:#1C8DD5; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .text-fields-right { padding: 0; } .text-fields-right textarea { width:100%; resize:none; padding: 3%; font-family: '黑体', sans-serif; font-weight:600; font-style:italic; color:#E5E5E5; outline:none; border-radius: 8px; border: solid 1px #FFFFFF; margin-bottom: 5%; } .text-fields-right textarea:hover { color:#1C8DD5; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .button-sub { margin: 2% 0 0 43%; } .button-sub form input[type="submit"] { padding: 01em 1.5em; border: #1C8DD5 solid 2px; background: #1C8DD5; color: #FFFFFF; font-family: '黑体', sans-serif; font-weight: 700; border-radius: 7px; } .button-sub form input[type="submit"]:hover { background: #FFFFFF; color: #1C8DD5; text-decoration: none; border: #1C8DD5 solid 2px; transition: 0.5s all; -webkit-transition: 0.5s all; -o-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; } /*----- to-top ----*/ #toTop { display: none; text-decoration: none; position: fixed; bottom: 14px; right: 3%; overflow: hidden; width: 40px; height: 40px; border: none; text-indent: 100%; background: url("../images/to-top1.png") no-repeat 0px 0px; } #toTopHover { width: 40px; height: 40px; display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } span.menu:before { content:url(../images/nav-icon.png) no-repeat 0px 0px; color:#999; text-decoration:none; display:block; text-transform:uppercase; cursor:pointer; } .header-nav span.menu { display:none; } /*----- responsive-design ------*/ @media (max-width:1280px) { .divise-info h1 { font-size: 50px; } .divise-info p { font-size: 16px; } .get { margin-top: 19%; } .portfolio-text h2 { font-size: 32px; } #filters li span { padding: 6px 14px; font-size: 16px; } #filters li span.active { padding: 6px 14px; font-size: 16px; } h2.b-animate.b-from-left.b-delay03 { font-size: 24px; } p.b-animate.b-from-left.b-delay03 { font-size: 14px; } p.b-animate.b-from-left.b-delay03 small { ont-size: 14px; } .latest-posts-text h2 { font-size: 32px; } .latest-posts-text p { font-size: 14px; } .latest-posts-grid-right h2 a { font-size: 26px; } .latest-posts-grid-right span { font-size: 14px; } .contact-us { padding: 1.96em 0; } .contact-us h2 { font-size: 32px; } .contact-us p { font-size: 14px; } } @media (max-width:1024px) { .header-logo h2 a { font-size: 43px; } .header-nav ul li a { margin: 0 1.5em; } .divise-info { margin-top: 88%; } .divise-info h1 { font-size: 45px; } .get { margin-top: 15%; } .divise-info p { margin-top: 4%; } .our-team-left-grid p { font-size: 13px; font-weight: 400; } .latest-posts-grid-right p { font-size: 13px; font-weight: 400; } .latest-posts-grid-right small { font-size: 13px; font-weight: 400; } .contact-us { padding: 3.1em 0; } } @media (max-width:768px) { /*----- resposnive-menu -----*/ .header-nav { float: none; } .header-nav ul { display:none; } .header-nav ul li { font-size: 16px; display:block; padding: 2% 0; } .header-nav span.menu { display:block; } .header-nav ul { margin: 0; padding: 2% 0; z-index: 999; position: absolute; width: 96%; background: rgba(47, 187, 142, 0.64) } .mobile-divise { ` width: 50%; margin: 11% auto; } .divise-info { margin-top: 7%; text-align: center; } .divise-info h1 { color:#1C8DD5; } .divise-info p { color: #999898; } .header { height: 670px; } .header-bg { min-height: 1350px; } .divise-info h1 { font-size: 40px; } .divise-info p { font-size: 14px; } .get { margin-top: 6%; } .divise-info p.text { font-size: 13px; } .service-grid { margin: 5% 0; } .portfolio-text h2 { font-size: 24px; } .portfolio-text p { font-size: 13px; } #filters li span.active { font-size: 13px; } #filters li span { font-size: 13px; } h2.b-animate.b-from-left.b-delay03 { font-size: 19px; } .b-link-stripe .b-wrapper { padding: 0% 0 0 5%; } p.b-animate.b-from-left.b-delay03 { font-size: 13px; } p.b-animate.b-from-left.b-delay03 small { font-size: 13px; } .our-team-left-grid { text-align: center; width:320px; margin-bottom:10px; } .our-team-left-grid p { margin: 3% 0 5% 0; font-size: 15px; } .grid-right-left { width: 53%; margin: 6% auto; padding: 4%; } .icons { margin: 5% 0 0 0; } .latest-posts-grid-left { width: 51%; margin: 0 auto; } .latest-posts-grid-right { text-align: center; } .latest-posts-text h2 { font-size: 28px; } .latest-posts-grid-right h2 a { font-size: 23px; } .contact-us h2 { font-size: 28px; } .text-fields-left form input[type="text"] { width: 93%; } .text-fields-right textarea { width: 93%; } .content-contact { min-height: 615px; } .contact-us { padding: 2.05em 0; } .map iframe { min-height: 615px; } .location a span { top: 25%; right: 3%; width: 20%; } .button-sub { margin: 2% 0 0 34%; } .footer-left { width: 30.333%; } .footer-left h2 a { font-size: 41px; } } @media (max-width:640px) { .container { width: 95%; margin: 0 auto; } .header-nav ul { padding: 1.5% 0; margin: 0; } .mobile-divise { margin: 11% auto; width: 50%; } .mobile-divise img { width: 100%; } .header { height: 560px; } .header-bg { min-height: 1130px; } p.b-animate.b-from-left.b-delay03 { font-size: 10px; } p.b-animate.b-from-left.b-delay03 small { font-size: 10px; } .content-contact { min-height: 564px; } .map iframe { min-height: 564px; } .contact-us { padding: 2.1em 0; } } @media (max-width:480px) { .header { height: 435px; } .header-nav ul { width: 90%; } .header-bg { min-height: 920px; } #portfoliolist .portfolio { width:40%; float: none; } #filters li span.active { font-size: 12px; } #filters li span { font-size: 12px; } .header-nav ul li.active a { padding: .4em 1em; } p.b-animate.b-from-left.b-delay03 { font-size: 16px; } p.b-animate.b-from-left.b-delay03 small { font-size: 16px; } .b-link-stripe .b-wrapper { padding: 9% 0 0 11%; } .grid-right-left { width: 100%; float:left; margin-right:5px; } .latest-posts-text h2 { font-size: 30px; } .latest-posts-text p { font-size: 16px; } .latest-posts-grid-right p { font-size: 16px; } .text-fields { width: 80%; } .location a span { top: 88%; right: 38%; width: 34%; } .text-fields-left form input[type="text"] { width: 100%; } .text-fields-right textarea { width: 100%; } .footer-left { width: 24.333%; } .latest-posts-grid-right small { font-size: 16px; } .footer-left h2 a { font-size: 35px; } .latest-posts-grid-left { width: 80%; } .content-contact { min-height: 545px; } .map iframe { min-height: 545px; } .contact-us { padding: 2.15em 0; } .location a span img { display: none; } } @media (max-width:320px) { .mobile-divise { width: 80%; } .divise-info h1 { font-size: 30px; } .divise-info p { font-size: 12px; } .get a { padding: .5em 1em; } .get { margin-top: 12%; } .header-bg { min-height: 822px; } .divise-info p.text { font-size: 12px; } .b-link-stripe .b-wrapper { padding: 2% 0 0 8%; } h2.b-animate.b-from-left.b-delay03 { font-size: 16px; } p.b-animate.b-from-left.b-delay03 { font-size: 11px; } p.b-animate.b-from-left.b-delay03 small { font-size: 11px; } .content-contact { min-height: 471px; } .map iframe { min-height: 471px; } .our-team-left-grid p { font-size: 11px; } .our-team-left-grid h2 { font-size: 28px; } .latest-posts-text h2 { font-size: 28px; } .latest-posts-text p { font-size: 13px; } .latest-posts-grid-right p { font-size: 12px; } .latest-posts-grid-right small { font-size: 12px; display:none; } .contact-us p { font-size: 13px; } .contact-us span { display: none; } .button-sub { margin: 2% 0 0 30%; } .button-sub form input[type="submit"] { padding: .5em .8em; } .copy-right p { margin-top: 4%; } } /*----- responsive-end ------*/