﻿@charset "utf-8";

/* CSS Document */

*{ margin:0px; padding:0px; }

body{ font-size:12px; font-family: "微软雅黑"; color:#525252; background:#fff;}

a { text-decoration:none;  outline:none; transition:all 0.2s; } 

a:hover{ text-decoration:none; }





img{ border:0;}

table{ margin:auto;}

input[type="text"]:focus,input[type="password"]:focus,textarea:focus{outline:none;}

/*定义新型浏览器特性*/

::-webkit-scrollbar{width:0px;height:10px}

::-webkit-scrollbar-button:vertical{display:none}

::-webkit-scrollbar-track:vertical{background-color:black}

::-webkit-scrollbar-track-piece{background:#fff}

::-webkit-scrollbar-thumb:vertical{background-color:#999;}

::-webkit-scrollbar-thumb:vertical:hover{background-color:#333}

::-webkit-scrollbar-corner:vertical{background-color:#666}

::-webkit-scrollbar-resizer:vertical{background-color:#666;}



.clear{ width:100%; height:0; font-size:0; line-height:0; clear:both;}



.ma{  position:relative;}

.ma:hover .ma_er{ display:block;transition:all 0.3s;}



.ma_er{ width:100px; height:100px; background-color:#69225b;  position:absolute; top:0; left:-102px; display:none;}





@font-face{ font-family:'lbl'; src:url('../fonts/Lato-Black.ttf');}

@font-face{ font-family:'lbo'; src:url('../fonts/Lato-Bold.ttf');}

@font-face{ font-family:'mbo'; src:url('../fonts/Montserrat-Bold.ttf');}

@font-face{ font-family:'mre'; src:url('../fonts/MyriadPro-Regular.otf');}

@font-face{ font-family:'zhongw'; src:url('../fonts/NotoMono-Regular.ttf');}





.loading{  position: fixed; top:0; z-index:9; width:0px; background:linear-gradient(to right, #a8e1f6,#00a5e1); height:5px;}







/*分页样式*/

.page_list{text-align:center;letter-spacing:0; width:100%; float:left;} 

.page_list a{display:inline-block;color:#fff; width:40px;height:40px;line-height:40px; background-color:#02a19d;font-size:14px;text-align:center;text-decoration:none; margin:0px 3px;}



.page_list a:hover{ background-color:#efefef; color:#000;-webkit-transition: all 0.4s ease-in-out;}

.page_list a.on{background-color:#efefef; color:#000;}









/*内容分页*/

.contPage{text-align: right;letter-spacing:0;font-size:14px; width:100%; float:left;} 

.contPage a{display:inline-block;color:#fff;text-align:center;text-decoration:none; margin-left:5px;height:32px;line-height:32px; width:32px; background-color:#02a19d;}

.contPage a:hover{ background-color:#efefef; color:#000;-webkit-transition: all 0.4s ease-in-out;}

.contPage a.on{background-color:#efefef; color:#000;}







/*头部*/



.header{ width:100%; height:7vh; overflow:hidden;}



.head_logo{ position: fixed; height: auto; cursor:pointer; left:1.3%; top:-100px; opacity:0; animation: careertuoxiaw 0.6s forwards;  -moz-animation: careertuoxiaw 0.6s forwards; -ms-animation: careertuoxiaw 0.6s forwards; z-index:9;}

.head_logo img{ height:74px;}



@keyframes careertuoxiaw{ from {opacity:0px; top:-100px;} to {opacity:1; top:23px} }







.head_right{ height:100%; right:1.1%; position: fixed; top:-100px; opacity:0; animation: careertuoxia 0.6s forwards;  -moz-animation: careertuoxia 0.6s forwards; -ms-animation: careertuoxia 0.6s forwards; z-index:99;}



.cd-nav-trigger {

   float:left; margin-top:13px; position:relative;

  height: 44px;

  width: 44px;

  overflow: hidden;

  text-indent: 100%;

  white-space: nowrap;

  -webkit-transition: -webkit-transform 0.2s;

  -moz-transition: -moz-transform 0.2s;

  transition: transform 0.2s; -webkit-transition: all 0.4s ease-in-out;

}

.cd-nav-trigger span {

  /* icon created in CSS */

  position: absolute;

  left: 50%;

  top: 50%;

  bottom: auto;

  right: auto;

  -webkit-transform: translateX(-50%) translateY(-50%);

  -moz-transform: translateX(-50%) translateY(-50%);

  -ms-transform: translateX(-50%) translateY(-50%);

  -o-transform: translateX(-50%) translateY(-50%);

  transform: translateX(-50%) translateY(-50%);

  width: 33px;

  height: 5px;

  background-color:#4c4c4c;

}

.cd-nav-trigger span::before, .cd-nav-trigger span:after {

  /* upper and lower lines of the menu icon */

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  width: 100%;

  height: 100%;

  background-color: inherit;

  /* Force Hardware Acceleration in WebKit */

  -webkit-transform: translateZ(0);

  -moz-transform: translateZ(0);

  -ms-transform: translateZ(0);

  -o-transform: translateZ(0);

  transform: translateZ(0);

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -webkit-transition: -webkit-transform 0.2s, width 0.2s;

  -moz-transition: -moz-transform 0.2s, width 0.2s;

  transition: transform 0.2s, width 0.2s;

}

.cd-nav-trigger span::before {

  -webkit-transform-origin: right top;

  -moz-transform-origin: right top;

  -ms-transform-origin: right top;

  -o-transform-origin: right top;

  transform-origin: right top;

  -webkit-transform: translateY(-10px);

  -moz-transform: translateY(-10px);



  -ms-transform: translateY(-10px);

  -o-transform: translateY(-10px);

  transform: translateY(-10px);

}

.cd-nav-trigger span::after {

  -webkit-transform-origin: right bottom;

  -moz-transform-origin: right bottom;

  -ms-transform-origin: right bottom;

  -o-transform-origin: right bottom;

  transform-origin: right bottom;

  -webkit-transform: translateY(10px);

  -moz-transform: translateY(10px);

  -ms-transform: translateY(10px);

  -o-transform: translateY(10px);

  transform: translateY(10px);

}

.no-touch .cd-nav-trigger:hover {

  /* rotate trigger on hover */

  -webkit-transform: rotate(180deg);

  -moz-transform: rotate(180deg);

  -ms-transform: rotate(180deg);

  -o-transform: rotate(180deg);

  transform: rotate(180deg);

}

.no-touch .cd-nav-trigger:hover span::after,

.no-touch .cd-nav-trigger:hover span::before {

  /* animate arrow --> from hamburger to arrow */

  width: 50%;

}

.no-touch .cd-nav-trigger:hover span::before {

  -webkit-transform: translateX(2px) translateY(2px) rotate(45deg);

  -moz-transform: translateX(2px) translateY(2px) rotate(45deg);

  -ms-transform: translateX(2px) translateY(2px) rotate(45deg);

  -o-transform: translateX(2px) translateY(2px) rotate(45deg);

  transform: translateX(2px) translateY(2px) rotate(45deg);

}

.no-touch .cd-nav-trigger:hover span::after {

  -webkit-transform: translateX(2px) translateY(-2px) rotate(-45deg);

  -moz-transform: translateX(2px) translateY(-2px) rotate(-45deg);

  -ms-transform: translateX(2px) translateY(-2px) rotate(-45deg);

  -o-transform: translateX(2px) translateY(-2px) rotate(-45deg);

  transform: translateX(2px) translateY(-2px) rotate(-45deg);

}





.cd-nav-container {

  position: fixed; z-index:999;

  top: 0;

  right: 0;

  width: 0%;

  height: 100%;

  overflow-y: auto;

  background-color:#343433; opacity:0; -webkit-transition: all 0.8s ease-in-out;

 

}

.cd-nav-container.is-visible{ opacity:1; width:445px;}

.cd-nav-container.is-visible .cd-nav{ opacity:1; left:0px; }







.cd-close-nav { position: absolute; height: 40px; width: 40px; right:20px; top:20px; overflow:hidden;}







.cd-nav{ padding-top:75px; width:360px; height:auto; overflow:hidden; margin:auto;-webkit-transition: all 0.4s 0.4s ease-in-out; position:relative; opacity:0; left:200px;}

.cd-nav li{ width:100%; height:36px; list-style:none; cursor:pointer;}

.cd-nav li a{ display:block; width:100%; height:36px; font-size:18px; color:#89898b; line-height:36px; font-family:mre; -webkit-transition: all 0.4s ease-in-out;}

.cd-nav li a:hover{ color:#fff;}

.cd-nav li.active a{ color:#fff;}





.cd-overlay {

  height: 100vh;

  width: 100%;

 

}





.cd-overlay.is-visible .cd_bg{ display:block; opacity:1;}



.cd_bg{ width:100%; height:100vh; position:absolute; top:0; background-color:rgba(52,52,51,0.8); z-index:99; display:none; opacity:0; -webkit-transition: all 0.4s ease-in-out}



@keyframes careertuoxia{ from {opacity:0px; top:-100px;} to {opacity:1; top:0} }







/*右侧*/

.showy{ width:4%; height:135px; position:fixed;  right:0; bottom:30%; z-index:999;}

.showy a{ display:block; width:100%; height: auto; cursor: pointer; text-align:center; margin-bottom:10px; font-size:24px; color:#4c4c4c;}

.showy a.showy_a{ background:none;}







/*contact*/

.main{ width:100%; height:86vh; overflow:hidden; position:relative;}

.contact_warp{ width:34%; height:100%; margin-left:6.5%;  position:relative;}

.contact_kong{ width:100%; height:12%; overflow: hidden;}

.contact{ width:88%; background-color:#424242; height:76%; padding-left:12%; position:relative; opacity:0; left:-200px; animation: careertuo 0.6s forwards;  -moz-animation: careertuo 0.6s forwards; -ms-animation: careertuo 0.6s forwards;}

.contact_tit{ width:100%; font-size:55px; font-family:mbo; color:#fff; height:70px; line-height:70px;}

.contact_tit span{ color:#8f8e8e;}

.contact_biao{ width:100%; font-family:lbo; font-size:14px; color:#fff; height:50px; line-height:50px;}
.contact_all{ width:95%; height:302px; overflow-y:scroll;margin-top:85px;}
.contact_all::-webkit-scrollbar{width:2px;height:10px}
.contact_all::-webkit-scrollbar-track:vertical{background-color:black}
.contact_all::-webkit-scrollbar-track-piece{background:#424242}
.contact_all::-webkit-scrollbar-thumb:vertical{background-color:#999;}
.contact_all::-webkit-scrollbar-thumb:vertical:hover{background-color:#333}
.contact_all::-webkit-scrollbar-corner:vertical{background-color:#666}
.contact_all::-webkit-scrollbar-resizer:vertical{background-color:#fff;}

.contact_con{ background:url(../images/contact_10.png) no-repeat left 5px; padding-left:65px;height:67px; overflow:hidden; }

.contact_1{ width:100%; font-size:18px; color:#fff; font-family:mbo;}

.contact_2{ font-family:lbo; font-size:14px; width:280px; color:#fff; margin-top:3px; line-height:21px; height:42px; overflow:hidden;}

.contact_con1{ margin-top:50px;}



.contact_qie{ width:100%; position:absolute; bottom:0; z-index: 99; opacity:0; left:-200px; animation: careertuo 0.6s 0.4s forwards;  -moz-animation: careertuo 0.6s 0.4s forwards; -ms-animation: careertuo 0.6s 0.4s forwards;}

.contact_qie a{ display:inline-block; font-size:14px; color:#424242; font-family:lbo; cursor:pointer;-webkit-transition: all 0.4s ease-in-out;}

.contact_qie span{font-size:14px; color:#424242; font-family:lbo; padding:0px 8px;}

.contact_qie a:hover{text-shadow: 0 0 20px #666; }



.contact_img{ position:absolute; right:4%; height:100%; top:0; z-index:-1; opacity:0; right:-200px; animation: careertuo2a 0.6s 0.5s forwards;  -moz-animation: careertuo2a 0.6s 0.5s forwards; -ms-animation: careertuo2a 0.6s 0.5s forwards;}







/*about us*/

.about{ width:89.5%; height:100%; margin-left:6.5%;  position:relative; overflow:hidden;}

.about_left{ float:left; width:48%; height:100%; overflow:hidden; position:relative; opacity:0; left:-200px; animation: careertuo 0.6s forwards;  -moz-animation: careertuo 0.6s forwards; -ms-animation: careertuo 0.6s forwards;}

.about_tit{ width:100%; font-size:55px; font-family:mbo; color:#424242; height:140px; line-height:70px;  text-align:right;}

.about_tit span{ color:#8f8e8e;}

.about_con{ width:100%; height:355px; overflow:hidden; text-align:right; font-size:14px; color:#424242; font-family:lbo; line-height:21px; margin-top:10px; overflow-y: scroll;}



.about_img{ float:left; width:25%; height:100%; margin-left:3%; position:relative; opacity:0; bottom:-200px;animation: careertuo1 1s 0.6s forwards;  -moz-animation: careertuo1 1s 0.6s forwards; -ms-animation: careertuo1 1s 0.6s forwards;}

.about_right{ float:right; background-color:#ededed; width:24%; height:58%; position:relative; opacity:0; right:-200px;animation: careertuo2 0.6s 1s forwards;  -moz-animation: careertuo2 0.6s 1s forwards; -ms-animation: careertuo2 0.6s 1s forwards;}

.about_nei{ margin-left:18%; width:72%; height:100%;}

.about_1{ width:100%; font-size:24px; color:#424242; font-family:mbo; height:60px;}

.about_2{ width:100%; height:220px; overflow:hidden; font-size:14px; color:#424242; font-family:lbo; line-height:20px; margin-top:10px; overflow-y: scroll;}





@keyframes careertuo{ from {opacity:0px; left:-200px;} to {opacity:1; left:0} }

@keyframes careertuo1{ from {opacity:0px; bottom:-200px;} to {opacity:1; bottom:0} }

@keyframes careertuo2{ from {opacity:0px; right:-200px;} to {opacity:1; right:0} }

@keyframes careertuo2a{ from {opacity:0px; right:-200px;} to {opacity:1; right:4%} }





/*news*/

.news{ width:100%; height:auto; overflow:hidden;}

.news_left{ float:left;font-size:55px; font-family:mbo; color:#424242; height:140px; line-height:60px;  text-align:right;position:relative; opacity:0; left:-200px; animation: careertuo 0.6s forwards;  -moz-animation: careertuo 0.6s forwards; -ms-animation: careertuo 0.6s forwards;}

.news_left a{ color:#424242;}

.news_left span{ color:#8f8e8e;}

.news_right{ float:right; width:74%; height:660px; overflow:hidden; overflow-y: auto;position:relative; opacity:0; right:-200px; animation: careertuo2 0.6s 0.7s forwards;  -moz-animation: careertuo2 0.6s 0.7s forwards; -ms-animation: careertuo2 0.6s 0.7s forwards;}







.news_list{ width:100%; height:auto; overflow:hidden;}

.biaoti{ width:100%;  font-size:24px; font-weight:bold; color:#333333; overflow:hidden; height:31px; }

.obtain_come{ width:100%; height:auto; overflow:hidden;  font-size:14px; color:#999999; height:45px; line-height:45px;}

.obtain_come span{ padding:0px 15px;}

.obtain_con{ width:100%; height:auto; overflow:hidden; font-size:14px; color:#666666; line-height:24px; padding-bottom:15px;}

.news_list ul li{ float:left; height:auto; overflow:hidden;}

.news_list ul li.news_list_li{ float:right;}

.news_list ul li a{ display:block; width:100%; height:100%; overflow: hidden;}

.news_list ul li a:hover .news_img img{-moz-transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);-o-transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1);}

.news_img{ width:625px; height:410px; overflow:hidden;}

.news_img img{ width:625px; height:410px;-moz-transform:scale(1,1);-webkit-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);-webkit-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-o-transition: all 0.4s ease-in;-ms-transition: all 0.4s ease-in;transition: all 0.4s ease-in;}

.news_tit{ width:100%; font-size:18px; color:#424242; font-family:lbl; height:105px; line-height:105px;}

.news_tit span{ font-size:14px; float:right; font-family:Arial, Helvetica, sans-serif;}

.news_con{ width:100%; height:42px; overflow:hidden; font-size:14px; color:#424242; line-height:21px;}





/*Portfolio Desktop*/

.Portfolio_left{ float:left; width:20%; height:100%; position:relative;}

.Portfolio_tit{ width:100%;font-size:55px; font-family:mbo; color:#424242; height:110px; line-height:55px;position:relative; opacity:0; left:-200px; animation: careertuo 0.6s forwards;  -moz-animation: careertuo 0.6s forwards; -ms-animation: careertuo 0.6s forwards;}

.Portfolio_tit span{ color:#8f8e8e;}

.Portfolio_con{ width:70%; height:auto; overflow:hidden; font-size:14px; color:#424242; font-family:lbo; line-height:21px; margin-top:25px;position:relative; opacity:0; left:-200px; animation: careertuo 0.6s 0.4s forwards;  -moz-animation: careertuo 0.6s 0.4s forwards; -ms-animation: careertuo 0.6s 0.4s forwards;}



.Portfolio_right{ float:right; width:74%; height:100%; overflow:hidden; overflow-y:auto; position:relative; opacity:0; animation: careertuo2 0.6s 0.6s forwards;  -moz-animation: careertuo2 0.6s 0.6s forwards; -ms-animation: careertuo2 0.6s 0.6s forwards;}



.Portfolio_list{ width:100%; height:auto; overflow:hidden;}

.Portfolio_list ul li{ float:left; height:auto; overflow:hidden; margin-bottom:50px;}

.Portfolio_list ul li.Portfolio_list_li{ margin-right:0px;}



.Portfolio_list ul li a{ display:block; width:100%; height:100%; overflow:hidden;}

.Portfolio_list ul li a:hover .Portfolio_img_bg{ opacity:1;}

.Portfolio_img{ width:292px; height:292px; overflow:hidden; position:relative;}

.Portfolio_img img{ width:292px; height:292px; -webkit-filter: grayscale(100%);}

.Portfolio_img_bg{ width:100%; height:100%; position:absolute; top:0; background-color:rgba(1,1,1,0.63); opacity:0;-webkit-transition: all 0.4s ease-in-out;}



.Portfolio_1{ width:100%; font-size:16px; color:#424242; font-family:lbl; height:30px; line-height:30px; padding-top:30px; overflow:hidden;}

.Portfolio_2{ width:100%; height:24px; overflow:hidden; font-size:12px; color:#424242; font-family:lbo; line-height:24px;}

.Portfolio_2 span{ padding:0px 13px;}







/*Portfolio page Desktop*/

.main1{ height:auto; overflow:hidden; width:100%; position:relative;}

.about1{ width: 89.5%; height: auto; margin-left: 6.5%;  position: relative; overflow:hidden;}





.detail_bei{ width:76%; background-color:#ededed; height:32%; position:absolute; z-index:-1; opacity:0;animation: careertuoxia 0.8s 0.8s forwards;  -moz-animation: careertuoxia 0.8s 0.8s forwards; -ms-animation: careertuoxia 0.8s 0.8s forwards;}

.detail_left{ float:left; width:5%; height:100%; position:relative;opacity:0; bottom:-200px; animation: careertuo1 0.6s forwards;  -moz-animation: careertuo1 0.6s forwards; -ms-animation: careertuo1 0.6s forwards;}

.detail_left span{ display:inline-block; font-size:24px; color:#424242; font-family:mbo; writing-mode: vertical-rl; padding-top:36vh;}

.detail_mid{ float:left; height:100%; position:relative; overflow:hidden;opacity:0; bottom:-200px; animation: careertuo1 0.8s 0.4s forwards;  -moz-animation: careertuo1 0.8s 0.4s forwards; -ms-animation: careertuo1 0.8s 0.4s forwards;}





.detail_img{ height:100%; position:relative; overflow:hidden;}



.detail_img .paginationd{ position: absolute; left:0px; bottom:0; text-align: center; width:auto; z-index:1; margin:auto; padding:0px 10px;}

.detail_img .swiper-pagination-bullet { display: inline-block; height:8px; width:8px; border-radius:50%; background-color:#8f8e8e; margin:0px 3px; cursor: pointer;  -webkit-transition: all 0.4s ease-in-out;opacity: 1;}

.detail_img .swiper-pagination-bullet-active{ background-color:#000;}







.detail_kong{ width:100%; height:9%; overflow:hidden;}



.detail_nei{ width:100%; font-family:mre; font-size:14px; color:#424242; font-style:italic; line-height:22px; margin-top:30px; position:relative;}

.detail_nei_1{ width:65%; height:auto; overflow:hidden;}



.detail_kuai{ width:22%; height:22%; background-color:#ededed; position:absolute; bottom:0; right:0;}



.detail_right{ float:right; width:55%; height:auto; overflow:hidden; position:relative;opacity:0; top:-200px; animation: careertuoxia 0.8s 0.8s forwards;  -moz-animation: careertuoxia 0.8s 0.8s forwards; -ms-animation: careertuoxia 0.8s 0.8s forwards;}

.detail_tit{ width:55%;font-size:36px; font-family:mbo; color:#424242; height: auto; overflow:hidden; padding-top:8%;}

.detail_tit span{ color:#8f8e8e;}

.detail_1{ width:100%; height:50px; margin-top:24%;}

.detail_1:hover span{ color:#000; padding-right:30px;}

.detail_1 span{ display:inline-block; font-size:14px; color:#424242; height:50px; line-height:50px; font-family:lbl; background:url(../images/portfolio_18.png) no-repeat right; padding-right:35px;-webkit-transition: all 0.4s ease-in-out; cursor:pointer;} 

.detail_2{ font-family:mre; font-size:14px; color:#424242; line-height:21px; margin-top:24%; width:87%; height:auto; overflow:hidden; padding-bottom:85px;}

.detail_2 span.detail_2_span{ font-weight:bold;}





.press_xian{ width:0%; opacity:0; height:1px; background-color:#000; position:absolute; bottom:0;-webkit-transition: all 0.6s ease-in-out;}



.zong{ width:100%; height:100vh; background-color:#343433; position:fixed; top:0; z-index:9999; right:-100%;}

.zong_all{ width:100%; height: auto; overflow:hidden; margin:auto; position:relative;}





.zong_list{ float:right; width:100%; height:86%; position:relative; overflow:hidden;}

.zong_list .swiper-slide {  background-size: cover;  background-position: center;}



.zong_shang{ position:absolute; top:0; left:0; width:50%; height:100%;outline: none; z-index:1;}

.zong_xia{ position:absolute; top:0; right:0; width:50%; height:100%;outline: none; z-index:1;}



.zong_btn{ width:62px; height:226px; overflow:hidden; position:absolute; left:0;}

.zong-left{ width:62px; height:62px; background-color:#ededed; border-radius:50%; -webkit-transition: all 0.4s ease; cursor:pointer; margin-bottom:20px;outline: none;}

.zong-left img{ width:62px; height:62px;}

.zong-left:hover{ opacity:0.5;}



.zong-back{ width:62px; height:62px; -webkit-transition: all 0.4s ease; margin-bottom:20px;}

.zong-back a{ display:block; width:62px; height:62px; background-color:#ededed; border-radius:50%; cursor:pointer;}

.zong-back img{ width:62px; height:62px;}

.zong-back a:hover{ opacity:0.5;}



.zong-right{ width:62px; height:62px; background-color:#ededed; border-radius:50%;-webkit-transition: all 0.4s ease; cursor:pointer;outline: none;}

.zong-right img{ width:62px; height:62px;}

.zong-right:hover{ opacity:0.5;}















/*Our Partners desktop*/

.partners{ float:right; width:74%; height:100%; position:relative; overflow:hidden; opacity:0; animation: careertuo1 0.8s 0.8s forwards;  -moz-animation: careertuo1 0.8s 0.8s forwards; -ms-animation: careertuo1 0.8s 0.8s forwards;}

.partners .swiper-container {  width: 100%; height: 100%; overflow:hidden; margin:auto;}

.partners .swiper-slide{ overflow:hidden;}





.partners_con{ width:100%; height:100%; position:relative; overflow:hidden; margin:auto;}

.partners_con:hover .partners_bg{ opacity:1;}

.partners_con:hover .partners_1{ opacity:1; padding-top:20vh;}

.partners_con:hover .partners_2{ opacity:1;}

.partners_img{ width:100%; height:100%; position:relative;}



.partners_bg{ width:100%; position:absolute; top:0; background-color:#ededed; opacity:0;-webkit-transition: all 0.4s ease-in-out;}

.partners_1{ font-size:24px; color:#424242; font-family:mbo; margin:auto; width:70%; height:60px; padding-top:22vh; opacity:0;-webkit-transition: all 0.4s 0.2s ease-in-out;}

.partners_2{ width:70%; height:auto; overflow:hidden; margin:auto; font-size:14px; color:#424242; font-family:lbo; line-height:24px; margin-top:25px; opacity:0;-webkit-transition: all 0.4s 0.2s ease-in-out;}



	

/*Awards desktop*/

.awards{ width:460px; height: auto; overflow:hidden; position: absolute; z-index:9; padding-top:130px;}

.awards_tit{ width:100%;font-size:55px; font-family:mbo; color:#424242; height:110px; z-index:10; position:relative; opacity:0; left:-200px; animation: careertuo 0.6s forwards;  -moz-animation: careertuo 0.6s forwards; -ms-animation: careertuo 0.6s forwards;}

.awards_tit span{ color:#8f8e8e;}

.awards_con{ width:270px; height:auto; overflow:hidden; font-size:14px; color:#424242; font-family:lbo; line-height:21px; margin-top:25px; z-index:10; position:relative; opacity:0; left:-200px; animation: careertuo 0.6s 0.4s forwards;  -moz-animation: careertuo 0.6s 0.4s forwards; -ms-animation: careertuo 0.6s 0.4s forwards;}



.awards_list{ width:100%; height:100%; position:relative; overflow:hidden; z-index:1; background-color:#fff; opacity:0; bottom:-200px; animation: careertuo1 0.6s 0.8s forwards;  -moz-animation: careertuo1 0.6s 0.8s forwards; -ms-animation: careertuo1 0.6s 0.8s forwards;}



.awards_list .swiper-container {  width: 100%; height: 100%; overflow:hidden; margin:auto;}

.awards_list .swiper-slide{ overflow:hidden; background-color:#fff;}

.awards_list .swiper-slide.swiper-slide-active .awards_left{ bottom:0px; opacity:1;}

.awards_list .swiper-slide.swiper-slide-active .awards_img{ margin-top:0px; opacity:1;}







.awards-left {position: absolute; left:2.35%; bottom:80px; z-index:10; cursor:pointer;  font-size:12px; color:#424242; font-family:lbl; overflow:hidden; height:60px; line-height:60px; outline: none; background:url(../images/awards_06.png) no-repeat left; padding-left:35px;  -webkit-transition: all 0.4s ease-in-out;}



.awards-right {position: absolute; left:41%; bottom:80px; z-index:10; cursor:pointer;  font-size:12px; color:#424242; font-family:lbl; overflow:hidden;  height:60px; line-height:60px; background:url(../images/awards_09.png) no-repeat right; padding-right:35px; outline: none;   -webkit-transition: all 0.4s ease-in-out;}





.awards_left{ float:left; width:47%; height:380px; background-color:#ccc; position:relative; bottom:-200px; opacity:0; -webkit-transition: all 0.8s ease;}

.awards_1{ margin:auto; font-size:25px; color:#424242; font-family:mbo; height:60px; line-height:30px; padding-top:55px; width:90%;}

.awards_2{ margin:auto; font-size:14px; color:#424242; font-family:lbo; height: auto; overflow:hidden; line-height:24px; margin-top:20px; width:90%;}

.awards_img{ float:left; margin-top:-200px; opacity:0; -webkit-transition: all 0.8s 0.8s ease}





.awards_bg{ width:100%; position:absolute; background-color:#ededed; height:380px; bottom:50px;}





/*join us*/

.join_warp{ float:right; width:74%;  height:100%; position:relative; overflow:hidden;}

.join{ width:100%; height:100%; position:relative; overflow:hidden; opacity:0; right:-200px; animation: careertuo2 0.6s 0.8s forwards;  -moz-animation: careertuo2 0.6s 0.8s forwards; -ms-animation: careertuo2 0.6s 0.8s forwards;}

.join ul li{ float: left; width:25%; height:100%; list-style:none;}

.join ul li.join_li .join_img{opacity:1;}

.join ul li.join_li .join_1{color:#fff;}

.join ul li.join_li .join_2 span{color:#fff; background:url(../images/awards_091.png) no-repeat right;}



.join_con{ width:100%; height:100%; position:relative; overflow:hidden; margin:auto;}



.join_img{ width:100%; height:100%; position:relative; opacity:1;-webkit-transition: all 0.4s ease-in-out; opacity:0;}



.join_bg{ width:100%; position:absolute; top:0;}

.join_1{ font-size:24px; color:#424242; font-family:mbo;  margin:auto; width:80%; height: auto; overflow:hidden; line-height:30px; padding-top:45px; cursor:pointer;}

.join_2{ width:80%; height:45px; line-height:45px; overflow:hidden; margin:auto; -webkit-transition: all 0.4s 0.2s ease-in-out;cursor:pointer;}

.join_2 span{ display:inline-block; background:url(../images/awards_09.png) no-repeat right; padding-right:35px; font-size:12px; color:#424242; font-family:lbo;}





.office{ width:95%; background-color:#ededed; position:absolute; z-index:98; left:5%; height:60%; top:205px; opacity:0; animation: careertuo3 0.6s 1.2s forwards;  -moz-animation: careertuo3 0.6s 1.2s forwards; -ms-animation: careertuo3 0.6s 1.2s forwards;}

.office_con{ width:94%; height:100%; margin:auto; display:none;}

.office_tit{  width:100%; font-size:18px; color:#424242; font-family:mbo; height:55px; line-height:55px; padding-top:10px;}

.office_nei{ width:100%; height:95%; overflow-y:auto; font-family:lbo; font-size:14px; color:#424242; line-height:25px; overflow-y: scroll;}





@keyframes careertuo3{ from {opacity:0px; left:10%;} to {opacity:1; left:4%} }







/*index*/

.home{ width:100%; height:100%; position:relative; overflow:hidden;}







.home_con{ width:100%; height:100%; overflow:hidden;}



.home_left{ float:left; width:44%; height:100%; position:relative; z-index:2;}

.home_1{ width:100%;font-size:55px; font-family:mbo; color:#424242; height:auto; position:relative; opacity:0; animation: careertuo 0.6s forwards;  -moz-animation: careertuo 0.6s forwards; -ms-animation: careertuo 0.6s forwards;}

.home_1 span{color:#8f8e8e;}

.home_2{ font-size:14px; color:#424242; line-height:24px; width:460px; height:95px; overflow:hidden; margin-top:60px; position:relative; opacity:0; animation: careertuo 0.6s 0.6s forwards;  -moz-animation: careertuo 0.6s 0.6s forwards; -ms-animation: careertuo 0.6s 0.6s forwards;}

.home_3{ width:100%; height:45px; margin-top:35px; position:relative; opacity:0;  animation: careertuo 0.6s 1s forwards;  -moz-animation: careertuo 0.6s 1s forwards; -ms-animation: careertuo 0.6s 1s forwards;}

.home_3 a{ display:block; width:100%; height:100%; cursor:pointer;}

.home_3 span{ display: inline-block; font-size:14px; color:#424242; font-family: "微软雅黑"; overflow:hidden; height:45px; line-height:45px; background:url(../images/awards_09.png) no-repeat right; padding-right:35px;}



.home_img{ position:absolute; top:0; right:-200px; z-index:1; opacity:0; animation: careertuo2 0.6s 1s forwards;  -moz-animation: careertuo2 0.6s 1s forwards; -ms-animation: careertuo2 0.6s 1s forwards;}





@keyframes careerleft{ from {opacity:0px; margin-left:-40px;} to {opacity:1; margin-left:0} }



.dingbai{ display:none;}

.dibai{ display:none;}













/* Wobble Top */

@-webkit-keyframes hvr-wobble-top {

  16.65% {

    -webkit-transform: skew(-12deg);

    transform: skew(-12deg);

  }



  33.3% {

    -webkit-transform: skew(10deg);

    transform: skew(10deg);

  }



  49.95% {

    -webkit-transform: skew(-6deg);

    transform: skew(-6deg);

  }



  66.6% {

    -webkit-transform: skew(4deg);

    transform: skew(4deg);

  }



  83.25% {

    -webkit-transform: skew(-2deg);

    transform: skew(-2deg);

  }



  100% {

    -webkit-transform: skew(0);

    transform: skew(0);

  }

}



@keyframes hvr-wobble-top {

  16.65% {

    -webkit-transform: skew(-12deg);

    transform: skew(-12deg);

  }



  33.3% {

    -webkit-transform: skew(10deg);

    transform: skew(10deg);

  }



  49.95% {

    -webkit-transform: skew(-6deg);

    transform: skew(-6deg);

  }



  66.6% {

    -webkit-transform: skew(4deg);

    transform: skew(4deg);

  }



  83.25% {

    -webkit-transform: skew(-2deg);

    transform: skew(-2deg);

  }



  100% {

    -webkit-transform: skew(0);

    transform: skew(0);

  }

}



.hvr-wobble-top {

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -moz-osx-font-smoothing: grayscale;

  -webkit-transform-origin: 0 100%;

  transform-origin: 0 100%;

}

.hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active {

  -webkit-animation-name: hvr-wobble-top;

  animation-name: hvr-wobble-top;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-timing-function: ease-in-out;

  animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: 1;

  animation-iteration-count: 1;

}







@-webkit-keyframes hvr-buzz-out {

  10% {

    -webkit-transform: translateX(3px) rotate(2deg);

    transform: translateX(3px) rotate(2deg);

  }



  20% {

    -webkit-transform: translateX(-3px) rotate(-2deg);

    transform: translateX(-3px) rotate(-2deg);

  }



  30% {

    -webkit-transform: translateX(3px) rotate(2deg);

    transform: translateX(3px) rotate(2deg);

  }



  40% {

    -webkit-transform: translateX(-3px) rotate(-2deg);

    transform: translateX(-3px) rotate(-2deg);

  }



  50% {

    -webkit-transform: translateX(2px) rotate(1deg);

    transform: translateX(2px) rotate(1deg);

  }



  60% {

    -webkit-transform: translateX(-2px) rotate(-1deg);

    transform: translateX(-2px) rotate(-1deg);

  }



  70% {

    -webkit-transform: translateX(2px) rotate(1deg);

    transform: translateX(2px) rotate(1deg);

  }



  80% {

    -webkit-transform: translateX(-2px) rotate(-1deg);

    transform: translateX(-2px) rotate(-1deg);

  }



  90% {

    -webkit-transform: translateX(1px) rotate(0);

    transform: translateX(1px) rotate(0);

  }



  100% {

    -webkit-transform: translateX(-1px) rotate(0);

    transform: translateX(-1px) rotate(0);

  }

}



@keyframes hvr-buzz-out {

  10% {

    -webkit-transform: translateX(3px) rotate(2deg);

    transform: translateX(3px) rotate(2deg);

  }



  20% {

    -webkit-transform: translateX(-3px) rotate(-2deg);

    transform: translateX(-3px) rotate(-2deg);

  }



  30% {

    -webkit-transform: translateX(3px) rotate(2deg);

    transform: translateX(3px) rotate(2deg);

  }



  40% {

    -webkit-transform: translateX(-3px) rotate(-2deg);

    transform: translateX(-3px) rotate(-2deg);

  }



  50% {

    -webkit-transform: translateX(2px) rotate(1deg);

    transform: translateX(2px) rotate(1deg);

  }



  60% {

    -webkit-transform: translateX(-2px) rotate(-1deg);

    transform: translateX(-2px) rotate(-1deg);

  }



  70% {

    -webkit-transform: translateX(2px) rotate(1deg);

    transform: translateX(2px) rotate(1deg);

  }



  80% {

    -webkit-transform: translateX(-2px) rotate(-1deg);

    transform: translateX(-2px) rotate(-1deg);

  }



  90% {

    -webkit-transform: translateX(1px) rotate(0);

    transform: translateX(1px) rotate(0);

  }



  100% {

    -webkit-transform: translateX(-1px) rotate(0);

    transform: translateX(-1px) rotate(0);

  }

}



.hvr-buzz-out {

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -moz-osx-font-smoothing: grayscale;

}

.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {

  -webkit-animation-name: hvr-buzz-out;

  animation-name: hvr-buzz-out;

  -webkit-animation-duration: 0.75s;

  animation-duration: 0.75s;

  -webkit-animation-timing-function: linear;

  animation-timing-function: linear;

  -webkit-animation-iteration-count: 1;

  animation-iteration-count: 1;

}



.add{ display:none;}

.cooperate{ display:none;}





@media screen and (max-width:1919px)and (min-width:1600px){

	.head_right{ right:0.8%;}

	.cd-nav-trigger{ margin-top:7px;}

	.cd-nav-trigger span { width: 28px; height: 4px;}

	

	.head_logo img{ height:28px;}

	

	.head_logo{ left:1.3%;}

.head_logo img{ height:62px;}



@keyframes careertuoxiaw{ from {opacity:0px; top:-100px;} to {opacity:1; top:20px} }



	

	

	.cd-nav-trigger span{ width:25px;}

	.cd-nav-trigger span::before { -webkit-transform: translateY(-7px); -moz-transform: translateY(-7px); -ms-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px);}

	.cd-nav-trigger span::after { -webkit-transform: translateY(7px); -moz-transform: translateY(7px); -ms-transform: translateY(7px);-o-transform: translateY(7px); transform: translateY(7px);}

	

	.about_tit{ width:100%; font-size:50px; font-family:mbo; color:#424242; height:100px; line-height:50px;  text-align:right;}

	.awards{ padding-top:40px;}

	.awards_tit{ width: 100%; font-size: 50px; height: auto; overflow:hidden;}

	.awards_con{ margin-top:15px;}

	.contact_tit{ width: 100%; font-size: 50px; height:50px; line-height: 50px;}

	.contact_biao{ height:40px; line-height: 40px;}

.contact_all{ margin-top:40px; height:280px;}


	.contact_con1{ margin-top:30px;}

	.Portfolio_tit { font-size:50px;}

	.office_tit{ height:45px; line-height:45px;}

	.news_left{ font-size: 50px; height: 120px; line-height:50px;}

	.Portfolio_list ul li{ margin-bottom:30px;}

	.Portfolio_1{ padding-top:25px;}

	.Portfolio_2{ margin-top:10px;}

	.detail_tit { font-size: 32px; height: auto; overflow:hidden; padding-top:5%;}

	

	.home_1{font-size:50px;}

	.detail_kong{ height:6%;}



	

	.zong_btn{ width:52px; height:226px; overflow:hidden; position:absolute; left:0;}

	.zong-left{ width:52px; height:52px; margin-bottom:15px;}

	.zong-left img{ width:52px; height:52px;}

	

	

	.zong-back{ width:52px; height:52px; margin-bottom:15px;}

	.zong-back a{ display:block; width:52px; height:52px;}

	.zong-back img{ width:52px; height:52px;}

	

	

	.zong-right{ width:52px; height:52px;}

	.zong-right img{ width:52px; height:52px;}

	

}

@media screen and (max-width:1599px)and (min-width:1440px){

	.head_right{ right:0.7%;}

	.cd-nav-trigger{ margin-top:7px;}

	.cd-nav-trigger span { width: 25px; height: 4px;}

	.head_logo{ left:1.3%;}

.head_logo img{ height:56px;}



@keyframes careertuoxiaw{ from {opacity:0px; top:-100px;} to {opacity:1; top:17px} }





	.cd-nav-trigger span::before { -webkit-transform: translateY(-7px); -moz-transform: translateY(-7px); -ms-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px);}

	.cd-nav-trigger span::after { -webkit-transform: translateY(7px); -moz-transform: translateY(7px); -ms-transform: translateY(7px);-o-transform: translateY(7px); transform: translateY(7px);}

	

	.about_tit{ width:100%; font-size:50px; font-family:mbo; color:#424242; height:100px; line-height:50px;  text-align:right;}

	.awards{ padding-top:40px;}

	.awards_tit{ width: 100%; font-size: 50px; height: auto; overflow:hidden;}

	.awards_con{ margin-top:15px;}

	.contact_tit{ width: 100%; font-size: 50px; height:50px; line-height: 50px;}

	.contact_biao{ height:40px; line-height: 40px;}

	.contact_all{ margin-top:30px; height:255px;}

	.contact_con1{ margin-top:30px;}

	.Portfolio_tit { font-size:50px;}

	.office_tit{ height:45px; line-height:45px;}

	.news_left{ font-size: 50px; height: 120px; line-height:50px;}

	.Portfolio_list ul li{ margin-bottom:30px;}

	.Portfolio_1{ padding-top:25px;}

	.Portfolio_2{ margin-top:10px;}

	.detail_tit { font-size: 32px; height: auto; overflow:hidden; padding-top:5%;}

	

	.home_1{font-size:50px;}

	.detail_kong{ height:6%;}



	

	.zong_btn{ width:52px; height:226px; overflow:hidden; position:absolute; left:0;}

	.zong-left{ width:52px; height:52px; margin-bottom:15px;}

	.zong-left img{ width:52px; height:52px;}

	

	

	.zong-back{ width:52px; height:52px; margin-bottom:15px;}

	.zong-back a{ display:block; width:52px; height:52px;}

	.zong-back img{ width:52px; height:52px;}

	

	

	.zong-right{ width:52px; height:52px;}

	.zong-right img{ width:52px; height:52px;}

}

@media screen and (max-width:1439px)and (min-width:1280px){

	.head_right{ right:0.5%;}

	.cd-nav-trigger{ margin-top:7px;}

	.cd-nav-trigger span { width: 24px; height: 4px;}

	

	

	

.head_logo img{ height:54px;}



@keyframes careertuoxiaw{ from {opacity:0px; top:-100px;} to {opacity:1; top:16px} }

	



	.cd-nav-trigger span::before { -webkit-transform: translateY(-7px); -moz-transform: translateY(-7px); -ms-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px);}

	.cd-nav-trigger span::after { -webkit-transform: translateY(7px); -moz-transform: translateY(7px); -ms-transform: translateY(7px);-o-transform: translateY(7px); transform: translateY(7px);}

	

	.about_tit{ width:100%; font-size:40px; font-family:mbo; color:#424242; height:90px; line-height:45px;  text-align:right;}

	.awards{ padding-top:40px;}

	.awards_tit{ width: 100%; font-size: 40px; height: auto; overflow:hidden;}

	.awards_con{ margin-top:15px;}

	.contact_tit{ width: 100%; font-size: 40px; height:50px; line-height: 50px;}

	.contact_biao{ height:30px; line-height: 30px;}

.contact_all{ margin-top:30px; height:255px;}

	.contact_con1{ margin-top:20px;}

	.Portfolio_tit { font-size:40px; line-height: 45px;}

	.office_tit{ height:35px; line-height:35px; font-size:16px;}

	.news_left{ font-size: 40px; height: 100px; line-height:45px;}

	.Portfolio_list ul li{ margin-bottom:30px;}

	.Portfolio_1{ padding-top:25px;}

	.Portfolio_2{ margin-top:10px;}

	.detail_tit { font-size: 32px; height: auto; overflow:hidden; padding-top:4%;}

	

	.home_1{font-size:40px;}

	.detail_kong{ height:5%;}

	.detail_nei{  line-height:21px;}

	.detail_kuai{ bottom:3%; z-index:-1;}

	.Portfolio_con{ margin-top:15px;}

	.office{ top:160px; width:95%;}

	.join_1{ font-size: 20px; height:  auto; overflow:hidden; line-height: 24px; padding-top: 35px;}

	

	.about_right{ height:70%;}

	.about_1{ font-size:18px; height:auto; overflow:hidden;}

	.partners_con:hover .partners_1{ opacity:1; padding-top:15vh;}

	.partners_1{ padding-top:10vh;}

	







.awards-left {position: absolute; left:2.35%; bottom:40px;}



.awards-right {position: absolute; left:41%; bottom:40px;}





.awards_left{ float:left; width:47%; height:280px; background-color:#ccc; position:relative; bottom:-200px; opacity:0; -webkit-transition: all 0.8s ease;}

.awards_1{ margin:auto; font-size:20px; color:#424242; font-family:mbo; height:60px; line-height:30px; padding-top:25px; }

.awards_2{ margin:auto; font-size:14px; color:#424242; font-family:lbo; height: auto; overflow:hidden; line-height:24px; margin-top:10px; width:90%;}

.awards_img{ float:left; margin-top:-200px; opacity:0; -webkit-transition: all 0.8s 0.8s ease}





.awards_bg{ width:100%; position:absolute; background-color:#ededed; height:280px; bottom:50px;}



.detail_2{ padding-bottom:55px;}



.zong_btn{ width:47px; height:226px; overflow:hidden; position:absolute; left:0;}

	.zong-left{ width:47px; height:47px; margin-bottom:15px;}

	.zong-left img{ width:47px; height:47px;}

	

	

	.zong-back{ width:47px; height:47px; margin-bottom:15px;}

	.zong-back a{ display:block; width:47px; height:47px;}

	.zong-back img{ width:47px; height:47px;}

	

	

	.zong-right{ width:47px; height:47px;}

	.zong-right img{ width:47px; height:47px;}



	.detail_bei{ width:80%;}

	

}

@media screen and (max-width:1279px)and (min-width:300px){

	.dingbai{ display: block; width:100%; height:60px; position:fixed; top:0; background-color:#fff; z-index:1;}

	.dibai{  display: block; width:100%; height:55px; position:fixed; bottom:0; background-color:#fff;z-index:1;}

	

	/*头部*/

	

	.header{ width:100%; height:60px; overflow:hidden;}

	

	.head_logo{ position: fixed; height: auto; cursor:pointer; left:2%; top:0px;}

	.head_logo img{ height:30px; width:auto; padding-top:15px;}

	

	@keyframes careertuoxiaw{ from {opacity:0px; top:-100px;} to {opacity:1; top:0px} }

	

	

	.head_right{ height:100%; right:2%; position: fixed; top:-100px; opacity:0;}

	

	.cd-nav-trigger { float:left; margin-top:15px; position:relative; height: 30px; width: 30px;}

	.cd-nav-trigger span { width: 25px; height: 2px; background-color:#4c4c4c;}

	.cd-nav-trigger span::before { -webkit-transform: translateY(-7px); -moz-transform: translateY(-7px); -ms-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px);}

	.cd-nav-trigger span::after { -webkit-transform: translateY(7px); -moz-transform: translateY(7px); -ms-transform: translateY(7px); -o-transform: translateY(7px); transform: translateY(7px);}

	

	

	.cd-nav-container.is-visible{ opacity:1; width:100%;}

	.cd-nav-container.is-visible .cd-nav{ opacity:1; left:0px; }

	

	.cd-close-nav { position: absolute; height: 35px; width: 35px; right:10px; top:10px; overflow:hidden; z-index:99;}  

	.cd-close-nav img{ width:35px; height:35px;}

	

	.cd-overlay {

    height: 100%;

    width: 100%;

}

	.cd-nav{ padding-top:75px; width:90%;  left:200px;}





	/*右侧*/

	.showy{ width:auto; height:55px; position:fixed;  right:2%; bottom:0; z-index:999;}

	.showy a{ display: inline-block; width:auto; height: auto; cursor: pointer; text-align:center; padding-top:14px; margin-left:10px; margin-bottom:0px; font-size:22px;}

	

	.ma_er {  width: 80px; height: 80px;top: -80px;left: -30px;display: none;}

   .ma_er img{ width:80px; height:80px;}





	/*contact*/

	.main{ width:100%; height: auto; overflow:hidden; position:relative; margin-bottom:55px;}

	.contact_warp{ width:94%; height: auto; overflow:hidden; margin:auto; margin-left:3%;  position:relative;}

	.contact_kong{ width:100%; height:12%; overflow: hidden; display:none;}

	

	.contact{ width:100%; height: auto; overflow:hidden; padding-left:0%; position:relative; opacity:0; left:0px; padding-bottom:50px;}

	

	.contact_tit{ width:90%; margin:auto; font-size:34px; height:40px; line-height:40px;}

	.contact_biao{ width:90%; margin:auto; font-size:14px; color:#fff; height: auto; overflow:hidden; line-height:20px; margin-top:8px;}

	

	.contact_con{ background-size:10%; padding-left:14%; width:76%; margin:auto; height:67px; overflow:hidden; margin-top:55px;}

	.contact_1{ width:100%; font-size:16px;}

	.contact_2{ font-size:13px; width:100%; color:#fff; margin-top:3px; line-height:21px; height:42px; overflow:hidden;}

	.contact_con1{ margin-top:30px;}

	

	

	.contact_qie{ width:98%; position: fixed; bottom:0; z-index: 99; opacity:1; left:0; margin-left: 2%;}

	.contact_qie a{ display:inline-block; height:55px; line-height:55px; font-size:14px;}

	.contact_qie span{font-size:14px; color:#424242; font-family:lbo; padding:0px 8px;}

	.contact_qie a:hover{text-shadow: 0 0 20px #666; }

	

	.contact_img{ position: relative; right:0%; height:270px; top:0; z-index:-1; opacity:1; right:0px;}







	/*about us*/

	.about{ width:100%; height: auto; margin-left: inherit;  position:relative; overflow:hidden;}

	.about_left{ float:none; width:94%; height: auto; margin:auto; overflow:hidden; position:relative; opacity:1; }

	.about_tit{ width:100%; font-size:34px; height:80px; line-height:40px;  text-align:left;}

	.about_con{ width:100%; height: auto; overflow:hidden; text-align:left; font-size:14px; line-height:21px; margin-top:10px; padding-bottom:35px;}



	.about_img{ float:none; width:100%; height:215px; margin-left: inherit; position: inherit; opacity:1;}

	

	.about_right{ float:none; width:94%; margin:auto; height:auto; position:relative; opacity:1; right:0px;}

	.about_nei{ margin:auto; margin-left: inherit; width:90%; height: auto; overflow:hidden;}

	.about_1{ width:100%; font-size:20px; color:#424242; font-family:mbo; height:60px;}

	.about_2{ width:100%; height: auto; overflow:hidden; font-size:14px; line-height:20px; margin-top:10px; padding-bottom:20px;}

	

	

	@keyframes careertuo{ from {opacity:0px; left:0px;} to {opacity:1; left:0} }

	@keyframes careertuo1{ from {opacity:0px; bottom:0px;} to {opacity:1; bottom:0} }

	@keyframes careertuo2{ from {opacity:0px; right:0px;} to {opacity:1; right:0} }

	@keyframes careertuo2a{ from {opacity:0px; right:0px;} to {opacity:1; right:0} }



	

	/*news*/

	.news{ width:94%; margin:auto; height:auto; overflow:hidden;}

	.news_left{ float:none;font-size:34px; height: auto; overflow:hidden; line-height:40px;  text-align:left; opacity:1; left:0px; animation: careertuo5 0.6s forwards;  -moz-animation: careertuo5 0.6s forwards; -ms-animation: careertuo5 0.6s forwards;}

	

	.news_right{ float:none; width:100%; height: auto; overflow:hidden; overflow-y: auto;position:relative; opacity:1; right:0px; animation: careertuo5 0.6s 0.7s forwards;  -moz-animation: careertuo5 0.6s 0.7s forwards; -ms-animation: careertuo5 0.6s 0.7s forwards; margin-top:20px;}

	

	.news_list{ width:100%; height:auto; overflow:hidden;}

	.news_list ul li{ float:none; height:auto; overflow:hidden; list-style:none; margin-bottom:40px;}

	.news_list ul li.news_list_li{ float:none;}

	.news_list ul li a{ display:block; width:100%; height:100%; overflow: hidden;}

	

	

	.news_tit{ width:100%; font-size:16px; height:55px; line-height:55px;}

	.news_tit span{ font-size:12px;}

	.news_con{ width:100%; height:48px; overflow:hidden; font-size:13px;line-height:24px;}



	

.biaoti{ width:100%;  font-size:24px; color:#333333; font-weight:bold; overflow:hidden; height:31px; }

.obtain_come{ width:100%; height:auto; overflow:hidden;  font-size:14px; color:#999999; height:45px; line-height:45px;}

.obtain_come span{ padding:0px 15px;}

.obtain_con{ width:100%; height:auto; overflow:hidden; font-size:14px; color:#666666; line-height:24px; padding-bottom:15px;}



	

		

	

	/*Portfolio Desktop*/

	.Portfolio_left{ float:none; width:94%; height: auto; overflow:hidden; margin:auto; position:relative;}

	.Portfolio_tit{ width:100%;font-size:34px; height: auto; overflow:hidden; line-height:40px;position:relative; opacity:1; left:0px; animation: careertuo5 0.6s forwards;  -moz-animation: careertuo5 0.6s forwards; -ms-animation: careertuo5 0.6s forwards;}

	

	.Portfolio_con{ width:100%; height:auto; overflow:hidden; font-size:14px; line-height:21px; margin-top:20px;position:relative; opacity:1; left:0px; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5;}

	

	.Portfolio_right{ float:none; width:94%; margin:auto; height: auto; overflow:hidden; overflow-y:inherit; position:relative; opacity:1; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5; margin-top:30px;}

	

	.Portfolio_list{ width:100%; height:auto; overflow:hidden;}

	.Portfolio_list ul li{ float:none; height:auto; overflow:hidden; margin-bottom:20px;}

	

	

	

	.Portfolio_img{ width:292px; height:292px; overflow:hidden; position: inherit;}

	.Portfolio_img img{ width:292px; height:292px; -webkit-filter: grayscale(100%);}

	.Portfolio_img_bg{ display:none;}

	

	.Portfolio_1{ width:100%; font-size:16px; color:#424242; font-family:lbl; height:30px; line-height:30px; padding-top:15px; overflow:hidden;}



	

	

	

	/*Portfolio page Desktop*/

	.main1{ height:auto; overflow:hidden; width:100%; position:relative;}

	.about1{ width:94%; margin:auto; height: auto;   position: relative; overflow:hidden;}

	

	

	.detail_bei{ width:100%; background-color:#ededed; height: auto; overflow:hidden; position: absolute; z-index:-1; opacity:1;animation: careertuoxia5;  -moz-animation: careertuoxia5; -ms-animation: careertuoxia5;}

	

	.detail_left{ float:left; width:10%; height:100%; position:relative;opacity:1; bottom:0px; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5;}

	.detail_left span{ display:inline-block; font-size:20px; color:#424242; font-family:mbo; writing-mode: vertical-rl; padding-top:22vh;}

	.detail_mid{ float:left; height:100%; position:relative; overflow:hidden;opacity:1; bottom:0px; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5;}

	

	

	.detail_nei{ margin-top:20px}

	.detail_nei_1{ width:100%; height:auto; overflow:hidden;}

	

	.detail_kuai{ display:none;}

	

	.detail_right{ float:none; width:100%; height:auto; overflow:hidden; position:relative;opacity:1; top:0px; animation: careertuoxiaa;  -moz-animation: careertuoxiaa; -ms-animation: careertuoxiaa;}

	

	.detail_tit{ width:100%;font-size:24px; padding-top:8%;}

	

	.detail_1{ width:100%; height:50px; margin-top:24px;}

	

	.detail_2{ margin-top:24px; width:100%; height:auto; overflow:hidden; padding-bottom:55px;}

	.detail_2 span.detail_2_span{ font-weight:bold;}



	

	.press_xian{ width:0%; opacity:0; height:1px; background-color:#000; position:absolute; bottom:0;-webkit-transition: all 0.6s ease-in-out;}

	

	.zong{ width:100%; height:100vh; background-color:#343433; position:fixed; top:0; z-index:9999; right:-100%;}

	.zong_all{ width:100%; height: auto; overflow:hidden; margin:auto; position:relative;}

	

	

	.zong_list{ float:none; width:100%; height:86%; position:relative; overflow:hidden;}

	

	

	.zong_shang{ position:absolute; top:0; left:0; width:50%; height:100%;outline: none; z-index:1;}

	.zong_xia{ position:absolute; top:0; right:0; width:50%; height:100%;outline: none; z-index:1;}

	

	.zong_btn{ width:100%; height:50px; text-align:center; overflow:hidden; position: relative; left:0; margin:40px 0px;}

	.zong-left{ display:inline-block; width:50px; height:50px; margin-bottom:20px;outline: none;}

	.zong-left img{ width:50px; height:50px;}

	

	

	.zong-back{ display:inline-block; width:50px; height:50px;  margin-bottom:20px; margin:0px 15px;}

	.zong-back a{ display:block; width:50px; height:50px; background-color:#ededed; border-radius:50%; cursor:pointer;}

	.zong-back img{ width:50px; height:50px;}

	

	

	.zong-right{ display:inline-block; width:50px; height:50px; background-color:#ededed; border-radius:50%;-webkit-transition: all 0.4s ease; cursor:pointer;outline: none;}

	.zong-right img{ width:50px; height:50px;}



	

	

	

	/*Our Partners desktop*/

	.partners{ float:none; width:96%; margin:auto; height: auto; position:relative; overflow:hidden; opacity:1; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5; margin-top:30px; display:none;}

	

	

	

	.cooperate{ display: block; width:96%; margin:auto; height: auto; position:relative; overflow:hidden; margin-top:30px;}

	.cooperate ul li{ width:100%; height:auto; overflow:hidden; list-style:none; margin-bottom:20px;}

	

	

	.partners_con{ width:100%; height:100%; position:relative; overflow:hidden; margin:auto;}

	.partners_con:hover .partners_1{ opacity:1; padding-top:30px;}

	

	.partners_img{ width:100%; height:100%; position:relative;}

	

	.partners_bg{ width:100%; position:absolute; top:0; background-color:#ededed; opacity:0;}

	.partners_1{ font-size:20px; width:90%; height:40px; padding-top:40px; opacity:0;}

	.partners_2{ width:90%; height:147px; overflow:hidden; margin:auto; font-size:14px; color:#424242; font-family:lbo; line-height:21px; overflow-y: scroll; margin-top:20px; opacity:0;}	

		

	/*Awards desktop*/

	.awards{ width:94%; margin:auto; height: auto; overflow:hidden; position:  relative; z-index:0; padding-top:30px;}

	.awards_tit{ width:100%;font-size:34px; font-family:mbo; color:#424242; height: auto; overflow:hidden; z-index:10; position:relative; opacity:1; left:0px; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5;}

	

	.awards_con{ width:100%; height:auto; overflow:hidden; font-size:14px; ine-height:21px; margin-top:15px; z-index:10; position:relative; opacity:1; left:0px; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5;}

	

	.awards_list{ width:94%; margin:auto; height: auto; overflow:hidden; position:relative; overflow:hidden; z-index:0; background-color:#fff; opacity:1; bottom:0px; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5; margin-top:30px;}

	.awards_list .swiper-slide {background-color: #ededed; padding-bottom:53px;}

	

	.awards_list .swiper-slide.swiper-slide-active .awards_left{ bottom:0px; opacity:1;}

	.awards_list .swiper-slide.swiper-slide-active .awards_img{ margin-top:0px; opacity:1;}

	

	

	

	.awards-left {position: absolute; left:5%; bottom:0px; z-index:10; cursor:pointer;  font-size:12px; color:#424242; font-family:lbl; overflow:hidden; height:53px; line-height:53px; outline: none; background:url(../images/awards_06.png) no-repeat left; padding-left:35px;  -webkit-transition: all 0.4s ease-in-out;}

	

	.awards-right {position: absolute; left:75%; bottom:0px; z-index:10; cursor:pointer;  font-size:12px; color:#424242; font-family:lbl; overflow:hidden;  height:53px; line-height:53px; background:url(../images/awards_09.png) no-repeat right; padding-right:35px; outline: none;   -webkit-transition: all 0.4s ease-in-out;}

	

	

	.awards_left{ float:none; width:100%; height: auto; overflow:hidden; background-color:#ededed; position:relative; bottom:0px; opacity:1; padding-bottom:25px;}

	.awards_1{ margin:auto; font-size:20px; color:#424242; font-family:mbo; height: auto; overflow:hidden; line-height:25px; padding-top:20px; width:90%; overflow:hidden;}

	.awards_2{ margin:auto; font-size:14px; color:#424242; font-family:lbo; height: 168px; overflow:hidden; line-height:24px; margin-top:10px; width:90%;}

	.awards_img{ float:none; margin-top:0px; opacity:1; margin-left:5%;}

	

	

	.awards_bg{ display:none;}





	/*join us*/

	.join_warp{ display:none;}

	.join{ width:100%; height: auto; position:relative; overflow:hidden; opacity:1; right:0px; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5;}

	

	

	

	.join_con{ width:100%; height:100%; position:relative; overflow:hidden; margin:auto;}

	

	.join_img{ width:100%; height:100%; position:relative; opacity:1;-webkit-transition: all 0.4s ease-in-out; opacity:0;}

	

	.join_bg{ width:100%; position:absolute; top:0;}

	.join_1{ font-size:20px;  width:80%; height:40px; line-height:40px; padding-top:45px; cursor:pointer;}

	.join_2{ width:80%; height:45px; line-height:45px; overflow:hidden; margin:auto; -webkit-transition: all 0.4s 0.2s ease-in-out;cursor:pointer;}

	.join_2 span{ display:inline-block; background:url(../images/awards_09.png) no-repeat right; padding-right:35px; font-size:12px; color:#424242; font-family:zhongw;}

	

	

	.office{ width:70%; background-color:#ededed; position:absolute; z-index:98; left:4%; height:68%; top:155px; opacity:1; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation: careertuo5;}

	.office_con{ width:94%; height:100%; margin:auto; display:none; overflow-y: scroll;}

	.office_tit{ width:100%; font-size:16px; color:#424242; font-family:zhongw; height:45px; line-height:45px; padding-top:10px;}

	.office_nei{ width:100%; height:90%; overflow:hidden; font-family:zhongw; font-size:12px; color:#424242; line-height:21px;}



	.add{ display:block; width:100%; margin:auto; height:auto; overflow:hidden; margin-top:20px;}

	.add ul li{ width:100%; height:auto; overflow:hidden; list-style:none; margin-bottom:20px;}

	.add_1{ width:94%; padding:0px 3%; height:auto; overflow:hidden;}

	.add_1_1{ width:100%; font-size:23px; color:#424242; padding-top:20px; font-weight:bold;}

	.add_1_2{ width:100%; height:30px; }

	.add_1_2 span{ display:inline-block; height:30px; line-height:30px; font-size:12px; color:#424242; background:url(../images/add_10.png) no-repeat right; padding-right:32px;}

	.add_1_3{ width:100%; height:30px; display:none;}

	.add_1_3 span{ display:inline-block; height:30px; line-height:30px; font-size:12px; color:#424242; background:url(../images/add_03.png) no-repeat left; padding-left:32px;}

	

	.add_con{ width:94%; height:auto; overflow:hidden; padding:10px 3%; padding-bottom:40px; display:none; background-color:#ededed;}

	.add_2{ width:100%; font-size:17px; color:#424242; height:30px; line-height:30px;}

	.add_3{ width:100%; height:auto; overflow:hidden; margin-top:10px;}

	.add_3 span{ display:inline-block; height:auto; overflow:hidden; font-size:13px; color:#424242; line-height:18px; background:url(../images/add_06.jpg) no-repeat left 10px; padding-left:5%; width:95%; padding-bottom:20px;}

	

	.add_11{ background-color:#ededed;}

	.add_11 .add_1_2{ display:none;}

	.add_11 .add_1_3{ display: block;}



/*index*/

.home{ width:100%; height: auto; position:relative; overflow:hidden;    z-index: 0;}





.home_con{ width:100%; height: auto; overflow:hidden;}



.home_left{ float:none; width:94%; height: auto; overflow:hidden; margin:auto; position:relative; z-index:2;}

.home_1{ width:100%;font-size:30px; height:auto; opacity:1; animation:careertuo5s;  -moz-animation:careertuo5; -ms-animation: careertuo5;}



.home_2{ font-size:14px; color:#424242; line-height:24px; width:100%; height: auto; overflow:hidden; margin-top:20px;  opacity:1; animation: careertuo5;  -moz-animation: careertuo5; -ms-animation:careertuo5;}

.home_3{ width:100%; height:45px; margin-top:25px; position:relative; opacity:1;  animation:careertuo5;  -moz-animation:careertuo5; -ms-animation:careertuo5;}







.home_img{ width:94%; margin:auto; position: relative; top:0; right:0px; z-index:1; opacity:1; animation: careertuo5;  -moz-animation:careertuo5; -ms-animation:careertuo5; margin-top:25px;}





@keyframes careerleft{ from {opacity:0px; margin-left:-40px;} to {opacity:1; margin-left:0} }

	

}

