@charset "utf-8";
/* CSS Document */
body > .container {min-height:450px; }
body {font-family:'Microsoft YaHei', 'Microsoft YaHei UI','Hiragino Sans GB', serif;color:#333;  }
li,ul,dd,dt,dl { list-style:none;margin:0;padding:0;}
p { max-height: 999999px; }
a { cursor:pointer;
 transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out; }
a:active,a:focus,a:visited { text-decoration:none}
.table > tbody > tr > td, .table > tbody > tr > th  { line-height:1.8; padding: 12px 4px;}
.modal-backdrop.in { filter: alpha(opacity=70); opacity: .7;} 
.modal-content {box-shadow:none;}
.text-orange{ color:#ed6942;}


.btn {padding:6px 25px;}
.a-link { position: relative;overflow: hidden;z-index: 1;display: inline-block; border-radius:0;width: 120px;height:34px; line-height:32px;display: inline-block;
font-size: 14px; border:1px solid #555; background-color:#fff;color: #444;letter-spacing: 1px; }
.a-link:hover {text-decoration:none;color:#fff; border:1px solid #555; }
.a-link:after {content: " "; position: absolute; left: -1px;top: 0;z-index:-1;background-color:#555; width:0;height:34px; 
	transition:width .3s; 
	-webkit-transition:width .3s;} 
.a-link:hover:after {width:120px;color:#fff;} 
	
.fs-lg { font-size:1.2em;}	
.fs-xs { font-size:0.8em;}	
.color-green { color:#36D3B0}


	
.sub-title {font-weight:normal; line-height:1.4;text-align:center;margin-top:20px;margin-bottom:20px;color:#222; }
.sub-title h1 {margin-top:0;margin-bottom:0; line-height:1.4; font-size:20px;font-weight:normal;font-family: Georgia,'Times New Roman', serif;  }
.sub-title h1 em { display:none;font-weight:normal; font-style:normal; text-decoration:none;}
.sub-title h1 span { display:block;line-height:1.4; }
 

.sub-leftmenu {border-bottom: 1px solid #ccc;padding:50px 5px 0px 5px;}
.sub-leftmenu ul {margin:0;display:table;width:100%; margin:0 auto;border:0px solid #444;border-radius:5px;}
.sub-leftmenu ul > li {margin:0; display:table-cell; vertical-align:middle; border-top:0px solid #ddd;  text-align:center; border-right:5px solid #fff;}
.sub-leftmenu ul > li a { background:none;border-bottom:3px solid #fff;display:block;text-align:center;padding-top:10px;padding-bottom:10px; }
.sub-leftmenu ul > li a span { display:none;}
.sub-leftmenu ul > li a:hover {background:none;color:#333;  text-decoration:none;border-bottom:3px solid #ddd;}
.sub-leftmenu ul > li.active a {background:none; color:#333; position:relative;border-bottom:3px solid #ff6537;}
.sub-leftmenu ul > li.active a:hover { color:#ff6537;border-bottom:3px solid #ff6537;}
.sub-leftmenu ul > li:last-child { border-right:0;}
.sub-leftmenu ul > li:last-child a { border-radius:0 0px 0px 0;}
.sub-leftmenu ul > li:first-child a {border-radius:0px 0 0 0px;}
.tab-content .tab-pane > div {min-height:300px;padding-top:40px;padding-bottom:80px; }
.my-pic { z-index: 1; position:relative; }
.my-pic img {position:absolute;width:90px;height:90px; top:50%;margin-top:-45px;right:2px; border:3px solid #fff; }




.case-list {}
.case-list .col-xs-12 {padding-bottom:35px; padding-right:15px;padding-left:15px;}
.case-list .each {position: relative; overflow:hidden;background-color:#eee;  }
.case-list .each > a { display:block; overflow:hidden; position:relative;cursor: pointer; height:auto;z-index:0;min-height:180px;}
.case-list .each strong { display:none;font-size:12px; font-weight:normal;position:absolute;right:0;bottom:20px;padding:1px 10px; color:#333; 
 background:#fff;filter:alpha(opacity=90); -moz-opacity:0.9;  -khtml-opacity: 0.9;  opacity: 0.9; z-index:1;}
.case-list .each img {width:100%;height:auto;position:relative;z-index:-1;
transition: .1s transform; 
 -webkit-transition: .1s transform;}  
.case-list .each:hover img { 
  transform: scale(1.1); 
  -webkit-transform: scale(1.1);
  transition: .3s transform;
  -webkit-transition: .3s transform;}

.case-list .each .overlay {    overflow: hidden; position: absolute;left:0;top:0; border:0; opacity:0;z-index:1; text-align:center; display:none;
    -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;}

.case-list .each:hover .overlay {z-index:1; opacity:1; background-image:url(../img/opacity.png); background-repeat:repeat;    transition: all .5s; }
.case-list .each .overlay em {width:340px; height:230px; text-align:center;font-style:normal; display: table-cell; vertical-align: middle;}  
.case-list .each .overlay em span.glyphicon {color: #555;font-size:28px;padding:15px; background-color:#fff; border-radius:50px;}
.case-list .each .overlay em p {color: #fff;font-size:16px;width:220px; text-align:center;  margin:0 auto; padding-top:15px; }
.case-list .each .text {    border :1px solid #eee; background-color:#fff; border-top:0; padding:15px 0; text-align: center; font-size: 14px; }
.case-list .each .text h1 {margin:0; font-size:15px; font-weight:normal;}
.case-list .each .text p {margin:0; padding-top:5px;color:#ccc;}
.case-list .each .text a { text-decoration:none;color:#444;}



/* ie678 error
==================================== */
.error-backdrop {width:100%;position:absolute;top:0;height:4000px; overflow:hidden;z-index:99;background:#000000;
-moz-opacity:0.7; 
opacity: 0.7;
filter:Alpha(opacity=70);

 }
.error-modal {position:absolute;width:480px;height:210px;left:50%;margin-left:-230px;top:50%;margin-top:-100px;  background-color:#fff; z-index:200;  }
.error-modal .error-text {padding-left:180px;padding-top:25px; background:url(../img/error.jpg) no-repeat 50px 55px;}
.error-modal .error-text h2 { font-size:24px; line-height:40px;color:#36D3B0; font-weight:normal;}
.error-modal .error-text p { font-size:14px;line-height:160%;padding-right:30px;}




/*-----qqtalk----*/

.qqtalk {z-index:98;position:fixed;right:15px;bottom:15px;width:60px;height:60px; border-radius:100px;background-image:url(../img/qqtalk.gif); background-repeat:no-repeat; background-position:center center; background-size:60px; text-align:center; cursor:pointer;
transition: transform .15s ease-in-out ;
-webkit-transition: transform .15s ease-in-out ;
-webkit-box-shadow: 0 4px 32px 0 rgba(0,0,0,.175);
    -moz-box-shadow: 0 4px 32px 0 rgba(0,0,0,.175);
    box-shadow: 0 4px 32px 0 rgba(0,0,0,.175)
	}
.qqtalk a { position:relative;display:block;width:100%;height:100%;}
.qqtalk span.glyphicon { position:absolute;top:-4px;left:-4px; font-size:12px;color:#fff;padding:8px; background-color:#444;border-radius:100px;}
 

/*-------header------*/

.header .navbar { z-index:99; background:none; margin-bottom:0; border:0;border-radius:0;}
.header .navbar .container { position:relative; z-index:99;}
.header .navbar-nav > li > a { color:#fff;text-align:center; text-shadow:none; font-weight:normal;padding-top:10px;padding-bottom:20px; font-size:18px;}
.header .navbar-brand .logo-black { display:none}
.header .navbar-brand .logo-white { display:block}
.header .navbar-brand{height:auto;}
.header .navbar-default .navbar-toggle {border:0;}
.header .navbar-default .navbar-nav > .active > a,
.header .navbar-default .navbar-nav > .active > a:hover,
.header .navbar-default .navbar-nav > .active > a:focus { color:#fff;background:none; }
.header .navbar-default .navbar-nav > li > a:hover { color:#fff;background:none;   }
.header.nav-white { 
   -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
	} 
.header.nav-white .navbar { background-color:#fff; border-bottom:0px solid #eee;
-webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-in; }
.header.nav-white .navbar-nav > li > a {color:#444; }

.header.nav-white .navbar-brand .logo-black { display:block}
.header.nav-white .navbar-brand .logo-white { display:none}
.header.nav-white .navbar-default .navbar-nav > .active > a,
.header.nav-white .navbar-default .navbar-nav > .active > a:hover,
.header.nav-white .navbar-default .navbar-nav > .active > a:focus { color:#ff6537;background:none;}
.header.nav-white .navbar-default .navbar-nav > li > a:hover { color:#ff6537;background:none; }
.top-logo { position:absolute;top:0; z-index:9;width:100%;left:0;}
.header .navbar-default .navbar-toggle .icon-bar { background-color:#FFF;} 


@media (max-width: 991px) {
.header .navbar .container {width:100%}
.header .navbar-nav { padding-bottom:0;}
 
.header .navbar-brand,.top-logo > div,.header .navbar-title {padding:8px 15px;}
.header .navbar-brand,.top-logo > div,.header .navbar-text {padding:8px 15px; line-height: 3.8;}


.header .navbar-brand img,.top-logo img {width:170px;height:auto;}
.header .navbar-default .navbar-toggle {margin-top:14px;}
.header .navbar-default .navbar-toggle:hover,
.header .navbar-default .navbar-toggle:focus { background:none;}
.navbar-toggle .icon-bar {height:2px;width:28px;}
.header .navbar-default .navbar-collapse {background:#fff;border: 0; }
.header .navbar-default .navbar-collapse .navbar-nav > li > a,
.header .navbar-default .navbar-collapse .navbar-nav > li > a:hover,
.header .navbar-default .navbar-collapse .navbar-nav > li > a:focus {color:#444;background:none; line-height:1.2;}

.header .navbar-default .navbar-collapse .navbar-nav > .active > a,
.header .navbar-default .navbar-collapse .navbar-nav > .active > a:hover,
.header .navbar-default .navbar-collapse .navbar-nav > .active > a:focus {color:#ff6537; }

.header.nav-white .navbar-default .navbar-toggle:hover,
.header.nav-white .navbar-default .navbar-toggle:focus { background:none;}
.header.nav-white .navbar-default .navbar-toggle .icon-bar { background-color:#444;}
.header.nav-white .navbar-default .navbar-collapse {background:none; }
 
}
@media (min-width: 768px) and (max-width: 991px) {
.header .navbar-brand,.top-logo > div {padding: 10px 10px;}
.header .navbar-brand,.top-logo > div,.header .navbar-text {padding: 10px 10px; line-height: 1.42857143;}
.header .navbar-brand img,.top-logo img {width:200px;height:auto;}
.header .navbar-default .navbar-toggle {margin-top:20px; }
.navbar-toggle .icon-bar {width:32px;height:2px;}
.header .navbar-default .navbar-collapse .navbar-nav > li > a,
.header .navbar-default .navbar-collapse .navbar-nav > li > a:hover,
.header .navbar-default .navbar-collapse .navbar-nav > li > a:focus { padding-top:55px;padding-bottom:55px; font-size:32px;}
.header .navbar-nav {
    padding-bottom:50px;
} 
}



/*-----footer----*/

.footer { display:block;padding-top:10px;padding-bottom:30px; font-size:12px; color:#999;}
.footer .container {padding:0;}
.footer p.copyright {margin:10px 0;padding-top:10px;text-align:center;}

@media (min-width : 414px) {


}

@media (min-width : 768px) { 

.swiper-button-next {right: 40px;    
moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;} 
.swiper-button-prev {left:40px;    
-moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;} 
	
.footer { display:block; font-size:14px;}
.qqtalk-b { display:block}
.left-saoma { display:block;}

.sub-title h1 {font-size:28px;}
.sub-title h1 em { display:inline}
.sub-title h1 span { display:inline; }


.sub-leftmenu { position:relative;padding-top:70px;z-index: 0;} 
.sub-leftmenu ul {width:480px;}
.design .sub-leftmenu ul {width:565px;}
.sub-leftmenu ul > li a { font-size:16px;margin-left:10px;margin-right:10px;padding-top:12px;padding-bottom:12px; }
.sub-leftmenu ul > li a span { display:inline}
.tab-content .tab-pane > div { padding-bottom:20px; padding-top:40px; }
.my-pic img { width:150px;height:150px; margin-top: -75px;right:0;border:5px solid #fff;}


.design .work-list {    width: 655px; margin: 0 auto;}
.case-list .each .overlay em {width:345px; height:230px;}
.case-list .each .overlay { display:block}
.case-list .each .text {  padding:25px 0;  }
.case-list .each .text h1 { font-size:18px; }
 
 
}

@media (min-width : 992px) {

body {font-family:'Microsoft YaHei', 'Microsoft YaHei UI','Hiragino Sans GB', serif;}
.sub-leftmenu {width:100%; }
.my-pic img {width:180px;height:180px;margin-top:-90px; right:20px; border:8px solid #fff;}
.case-list .each .overlay em {width:455px; height:310px;}
.a-link:hover:after {width:130px;color:#fff;} 
.design .work-list {    width:auto; margin: 0 auto;}


.qqtalk span.glyphicon {  
-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
-webkit-animation-name:flash;
	animation-name:flash;}
.qqtalk:hover,.qqtalk:active {
	  transform: scale(1.1); 
   -webkit-transform: scale(1.1);
  transition: 1s transform;
  -webkit-transition: 1s transform;
  }
 

.header .navbar-brand ,.top-logo > div{padding:10px 10px; }
.header .navbar-text {padding:5px 0; font-size:20px;}
.header .navbar-header i{color:#ccc;font-style: normal; padding-right:10px;}
.header .navbar-nav > li > a {padding:35px 15px 20px 15px;text-align:center;font-size:15px; } 
.header .navbar-nav > li > a:after {content: " "; position: absolute; left:15px; bottom: 10px; z-index:-1;background-color:#ff6537;
     height:2px;width:0; 
	transition:width .3s; 
	-webkit-transition:width .3s;} 
.header .navbar-nav > li > a:hover:after {width:30px; }
.header .navbar-default .navbar-right {margin-right: 0; display:none;}
.header.nav-white .navbar-default .navbar-right { display:block}
.header.nav-white .navbar-default .navbar-nav > .active > a { color:#444;background:none;}


.footer {padding-top:50px; padding-bottom:20px; font-size:14px;}


}
@media (min-width: 1200px) {
.header .navbar-nav > li > a {padding:35px 20px 20px 20px;}
.header .navbar-nav > li > a:after {left:20px;}
.case-list .each .overlay em {width:555px; height:370px;} 
}

@media (min-width: 1400px) {
.container { width: 1370px;}

.case-list .each .overlay em {width:430px; height:290px;} 

.col-xlg-1, .col-xlg-2, .col-xlg-3, .col-xlg-4, .col-xlg-5, .col-xlg-6, .col-xlg-7, .col-xlg-8, .col-xlg-9, .col-xlg-10, .col-xlg-11, .col-xlg-12 { float: left;}
  .col-xlg-12 {
    width: 100%;
  }
  .col-xlg-11 {
    width: 91.66666667%;
  }
  .col-xlg-10 {
    width: 83.33333333%;
  }
  .col-xlg-9 {
    width: 75%;
  }
  .col-xlg-8 {
    width: 66.66666667%;
  }
  .col-xlg-7 {
    width: 58.33333333%;
  }
  .col-xlg-6 {
    width: 50%;
  }
  .col-xlg-5 {
    width: 41.66666667%;
  }
  .col-xlg-4 {
    width: 33.33333333%;
  }
  .col-xlg-3 {
    width: 25%;
  }
  .col-xlg-2 {
    width: 16.66666667%;
  }
  .col-xlg-1 {
    width: 8.33333333%;
  }
   
}