/* common start */

@font-face                                  {font-family: "思源黑体";src: url("/static/font/SourceHanSansCN-Regular.otf");}
*                                           {margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}
html                                        {overflow-x: hidden;}
body, button, input, select, textarea       {font: 90% "思源黑体";color: #4d4d4d;}
body                                        {min-height: 100%;}
input, select, textarea                     {font-size: 100%;}
table                                       {border-collapse: collapse;border-spacing: 0;table-layout:fixed;}
ol, ul                                      {list-style: none;}
h1, h2, h3, h4, h5, h6                      {font-size: 100%;font-weight: 500;}
a                                           {color: #333333;text-decoration: none; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
a:hover                                     {text-decoration: none;}
.clearfix:before, 
.clearfix:after                             {content: "";display: table;}
.clearfix:after                             {clear: both;overflow: hidden;}
.clearfix                                   {zoom: 1;}
.fl                                         {float: left;}
.fr                                         {float: right;}
.main                                       {width: 1718px;margin: 0 auto;max-width: 96%;}
.main2                                      {width: 1400px;margin: 0 auto;max-width: 96%;}
.main3                                      {width: 1095px;margin: 0 auto;max-width: 96%;}
.ellipsis                                   {overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
.ellipsis2                                  {overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
.ellipsis3                                  {overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3;}
.transform                                  {width: 100%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.db                                         {display: block;height: auto;}
/* common end */

.header                 {border-top: 2px solid #0055b4;background: #fff;position: relative;}
.header .logo           {padding: 40px 0;font-size: 0;}
.header .m-logo         {display: none;font-size: 0;width: 50%;}
.header .m-logo img     {height: 40px;}
.header .nav            {margin-top: 45px;}
.header .nav-btn        {display: none;}
.headerH                {display: none;}
.nav-btn                {display: block;transition: all .3s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);border-radius: 3px;cursor: pointer;display: block;height: 40px;line-height: 40px;outline-style: none;pointer-events: all;position: relative;text-align: center;width: 40px;z-index: 1020;top: 0;}
.nav-btn-icon           {-webkit-transform: rotate(0deg);cursor: pointer;display: inline-block;height: 14px;position: relative;transform: rotate(0deg);transition: .5s ease-in-out;width: 22px;}
.nav-btn-icon span      {background-color: #007aff;border-radius: 2px;display: block;height: 2px;left: 0;opacity: 1;position: absolute;transform: rotate(0deg);transition: .25s ease-in-out;width: 100%;-webkit-transform: rotate(0deg);}
.nav-btn-icon span:first-child          {-webkit-transform-origin: left center;top: 0;transform-origin: left center;}
.nav-btn-icon span:nth-child(2)         {-webkit-transform-origin: left center;top: 6px;transform-origin: left center;}
.nav-btn-icon span:nth-child(3)         {-webkit-transform-origin: left center;top: 12px;transform-origin: left center;}
.nav-open .nav-btn-icon span:first-child{-webkit-transform: rotate(45deg);left: 3px;top: 0;transform: rotate(45deg);}
.nav-open .nav-btn-icon span:nth-child(2){opacity: 0;width: 0;}
.nav-open .nav-btn-icon span:nth-child(3){-webkit-transform: rotate(-45deg);left: 3px;top: 16px;transform: rotate(-45deg);}
.header .nav li         {float: left;margin-left: 30px;height: 75px;line-height: 75px;position: relative;}
.header .nav li::before {content: '';position: absolute;height: 2px;width: 0;background: #c20000;transition: all .3s;left: 50%;bottom: 0;transform: translateX(-50%);}
.header .nav li a       {color: #747474;font-size: 16px;font-weight: bold;}
.header .nav li:hover a {color: #c20000;}
.header .nav li:hover::before {width: 100%;}
.header .tel            {background: url("../image/telBg.png") no-repeat left center;height: 45px;line-height: 45px;position: absolute;right: 0;top: 0;padding: 0 100px 0 40px;color: #fff;}
.header .tel span       {line-height: 45px;display: inline-block;vertical-align: top;padding-left: 40px;margin-left: 15px;position: relative;}
.header .tel span i     {display: block;width: 30px;height: 30px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.header .tel span.tel1 i{background: url("../image/tel1.png") no-repeat left center;background-size: cover;}
.header .tel span.tel2 i{background: url("../image/tel2.png") no-repeat left center;background-size: cover;}

.banner                 {width: 100%;}
.banner img             {display: block;width: 100%;}

.comt                   {color: #252525;text-align: center;}
.comt .bt               {font-weight: bold;padding: 60px 0 0;font-size: 46px;color: #000;}
.comt .st               {font-size: 16px;color: #8a8a8a;}

.footer                     {width: 100%;background: #343435;}
.footerBg                   {background: url("../image/footerBg.png") no-repeat center;background-size: cover;}
.footerContact              {padding: 80px 0;text-align: center;}
.footerContact .Btit        {font-weight: bold;color: #fff;font-size: 48px;margin-bottom: 30px;}
.footerContactInfo          {width: 850px;margin: 0 auto;color: #fff;}
.footerContactInfo ul       {display: flex;}
.footerContactInfo ul li    {flex: 1;align-items: center;justify-content: center;border: 1px solid #fff;padding: 40px;}
.footerContactInfo ul li:last-child {margin-left: -1px;}
.footerContactInfo ul li i  {display: block;margin: 0 auto 10px;width: 50px;height: 50px;}
.footerContactInfo ul li:first-child i  {background: url("../image/ficon1.png") no-repeat center;background-size: cover;}
.footerContactInfo ul li:last-child i   {background: url("../image/ficon2.png") no-repeat center;background-size: cover;}
.footerContactInfo .tit     {font-size: 24px;margin-bottom: 20px;}
.footerContactInfo .brief   {font-size: 16px;line-height: 25px;height: 50px;}
.footerInfo                 {background: rgba(0,0,0,0.85);padding: 50px 0;}
.footerBg2 .footerInfo      {background: #343435;}
.footerEwm                  {text-align: center;}
.footerEwm img              {width: 220px;height: 220px;display: block;}
.footerEwm p                {color: #cbcccc;font-size: 15px;margin-top: 10px;}
.footerInfotxt              {margin-top: 30px;}
.footerNav                  {border-bottom: 1px solid #5a5958;line-height: 55px;margin-bottom: 15px;}
.footerNav li               {float: left;margin-right: 50px;}
.footerNav li:last-child    {margin-right: 0;}
.footerNav li a             {color: #fff;}
.footerNav li a:hover,
.footerInfotxt p a:hover    {color: #c20000;}
.footerInfotxt              {color: #fff;}
.footerInfotxt p            {margin-top: 10px;}
.footerInfotxt p span,
.footerInfotxt p a          {display: inline-block;margin-right: 15px;}
.footerInfotxt p a          {color: #fff;}

.service 							{background: #eeeeee;padding: 30px 0 100px;}
.serviceList                        {margin-top: 50px;}
.serviceList li						{transition: 0.5s;width: 298px;height: 610px;float: left;margin-right: 10px;position: relative;overflow: hidden;}
.serviceList li.service1 			{background: url("../image/s1.png") no-repeat center;background-size: cover;}
.serviceList li.service2 			{background: url("../image/s2.png") no-repeat center;background-size: cover;}
.serviceList li.service3 			{background: url("../image/s3.png") no-repeat center;background-size: cover;}
.serviceList li.service4 			{background: url("../image/s4.png") no-repeat center;background-size: cover;margin-right: 0;}
.serviceList li.active 				{width: calc(100% - 924px);}
.serviceList li.service1.active  	{background: url("../image/s1.png") no-repeat center;background-size: cover;}	
.serviceList li.service2.active  	{background: url("../image/s2_1.png") no-repeat center;background-size: cover;}	
.serviceList li.service3.active  	{background: url("../image/s3_1.png") no-repeat center;background-size: cover;}	
.serviceList li.service4.active  	{background: url("../image/s4_1.png") no-repeat center;background-size: cover;}	
.serviceList li .mask 				{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);color: #fff;transition: 0.5s;}
.serviceList li .mask .txt 			{padding: 20px;width: 100%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.serviceList .icon 			        {width: 55px;height: 55px;display: block;}
.serviceList .mask .icon            {margin: 10px auto;}
.service1 .icon 				    {background: url("../image/sicon1.png") no-repeat center;background-size: 90%;}
.service2 .icon 				    {background: url("../image/sicon2.png") no-repeat center;background-size: 90%;}
.service3 .icon 				    {background: url("../image/sicon3.png") no-repeat center;background-size: 90%;}
.service4 .icon 				    {background: url("../image/sicon4.png") no-repeat center;background-size: 90%;}
.serviceList .bt 				    {font-size: 24px;color: #fff;}
.serviceList .mask .bt              {text-align: center;}
.serviceList li.active .mask 		{top: -40px;opacity: 0;}
.serviceList li .info               {position: absolute;left: 0;bottom: -40px;width: 100%;height: 100%;background: url("../image/stBg.png") no-repeat center bottom;opacity: 0;transition: 0.3s;}
.serviceList li.active .info        {bottom: 0;opacity: 1;}
.serviceList li .infoTxt            {padding: 50px;position: absolute;left: 0;bottom: 0;width: 100%;text-align: left;}
.serviceList li .infoTxt .bt        {margin: 20px 0;}
.serviceList li .infoTxt .brief     {color: #fff;font-size: 16px;line-height: 25px;height: 50px;overflow: hidden;}


@media screen and (max-width:1405px) {
    .header .logo       {padding: 30px 0;}
    .header .logo img   {height: 30px;}
    .header .tel        {height: 35px;line-height: 35px;}
    .header .tel span   {line-height: 35px;}
    .header .nav        {margin-top: 35px;}
    .header .nav li     {height: 55px;line-height: 55px;}
    .header .nav li     {margin-left: 20px;}
}

@media screen and (max-width:1300px) {
    .serviceList li {height: 550px;width: calc((100% - 430px) / 3);}
    .serviceList li.active {width: 400px;}
}

@media screen and (max-width:1200px) {
    .header .logo img   {height: 25px;}
    .header .nav li     {margin-left: 15px;} 
    .header .nav li a   {font-size: 14px;}
    .header .nav li     {height: 50px;line-height: 50px;}
    .comt .bt               {padding: 40px 0 0;font-size: 30px;}
    .serviceList .bt {font-size: 22px;}
}

@media screen and (max-width:1110px) {
    .footerNav {display: none;}
    .footerxx P:first-child {display: none;}
    .footerEwm img {width: 150px;height: 150px;}
}

@media screen and (max-width:1015px) {
    .header         {padding: 10px;height: 60px;z-index: 2;position: fixed;width: 100%;}
    .headerH        {display: block;height: 60px;opacity: 0;}
    .header .logo,
    .header .tel        {display: none;}
    .header .m-logo,
    .header .nav-btn    {display: block;}
    .header .nav        {margin-top: 0;}
    .header .nav ul {width: 100%;height: 100%;overflow: hidden;position: absolute;left: 0;top: 0;background: rgba(255, 255, 255, 1);transition: all .3s;opacity: 0;z-index: -2;padding: 0 10px;}
    .header.nav-open ul {top: 58px;height: auto;opacity: 1;visibility: visible;z-index: 99999;}
    .header .nav ul li {width: 100%;margin-left: 0;}
    .header .nav li a {height: 35px;line-height: 35px;}
    .comt .bt               {padding: 30px 0 0;font-size: 24px;}
    .footerContact .Btit {font-size: 24px;}
}

@media screen and (max-width:992px){
    .serviceList .bt {font-size: 20px;}
    .serviceList li .infoTxt .brief {font-size: 14px;}
    .serviceList li .mask .txt {padding: 10px;}
}

@media screen and (max-width:860px) {
    .service        {padding: 30px 0 0}
    .service .main  {width: 100%;max-width: 100%;}
    .serviceList li {height: 400px;width: calc((100% - 315px) / 3);margin-right: 5px;}
    .serviceList li.active {width: 300px;}
    .footerInfo     {padding: 30px 0;}
    .footerContactInfo {width: 100%;}
    .footerContactInfo .tit {font-size: 20px;}
    .footerEwm img {width: 100px;height: 100px;}
}

@media screen and (max-width:768px){
    .serviceList li     {height: 300px;margin-bottom: 5px;}
    .serviceList li .mask {display: none;}
    .serviceList li,
    .serviceList li.active {width: 100%;}
    .serviceList li.service1  	{background: url("../image/s1.png") no-repeat center;background-size: cover;}	
    .serviceList li.service2  	{background: url("../image/s2_1.png") no-repeat center;background-size: cover;}	
    .serviceList li.service3  	{background: url("../image/s3_1.png") no-repeat center;background-size: cover;}	
    .serviceList li.service4  	{background: url("../image/s4_1.png") no-repeat center;background-size: cover;}
    .serviceList li .info {opacity: 1;bottom: 0;}
    .serviceList li .infoTxt {padding: 50px 20px;}
    .serviceList .icon {width: 40px;height: 40px;}
    .serviceList li .infoTxt .bt {margin: 10px 0;}
    .footerInfo {padding: 20px 0;}
    .footerContact {padding: 40px 0;}
    .footerContactInfo .tit {font-size: 18px;}
    .footerContactInfo ul li {padding: 10px;}
    .footerContactInfo .brief {font-size: 14px;}
    .footerInfotxt {width: calc(100% - 120px);margin-top: 15px;}
}

@media screen and (max-width:580px) {
    .header .m-logo img {height: 25px;margin-top: 7px;}
    .footerInfotxt {margin-top: 0;}
}


