@charset "utf-8";
/* 
 * Project Name:灰狗运业
 * Author:默默
 * Date:2018-07-26
 */
@font-face {
  font-family: "Humanist 521 BT";
  src: url("fonts/Humanist 521 BT.woff2") format("woff2"),
       url("fonts/Humanist 521 BT.woff") format("woff"),
       url("fonts/Humanist 521 BT.ttf") format("truetype"),
       url("fonts/Humanist 521 BT.eot") format("embedded-opentype"),
       url("fonts/Humanist 521 BT.svg") format("svg");
}
@font-face {
  font-family: "089-CAI978";
  src: url("fonts/089-CAI978.woff2") format("woff2"),
       url("fonts/089-CAI978.woff") format("woff"),
       url("fonts/089-CAI978.ttf") format("truetype"),
       url("fonts/089-CAI978.eot") format("embedded-opentype"),
       url("fonts/089-CAI978.svg") format("svg");
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0px; border: 0; font-size: 100%; outline: none; }
html { font-size: 100%; overflow-x: hidden;}
/* always display scrollbars */
body { font: 12px/1.8 "微軟正黑體","Microsoft YaHei New","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif; margin: 0 auto; color: #000000; background-color: #fff; _background-attachment:fixed; 
_background-image:url(about:blank); overflow-y:visible\9;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
input, select { vertical-align: middle; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
input { outline: none; padding:0;}
img { border: 0; }
input[type="text"], input[type="button"], input[type="submit"], input[type="reset"] ,select{ -webkit-appearance: none; border-radius: 0;}
textarea { -webkit-appearance: none; border-radius: 0; background:none; outline:none; padding:0; margin:0; border:none;}
::-moz-selection { background: #f7a300; color: #fff; text-shadow: none; }
::selection { background: #f7a300; color: #fff; text-shadow: none; }
a { text-decoration: none; blr: expression(this.onFocus=this.blur()); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
a:link, a:visited { text-decoration: none; color:inherit;}
a:active, a:hover { text-decoration: none; color:inherit;}
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.fc { text-align: center; }
.fr { text-align: right; }
.l { float: left; display: inline-block; }
.r { float: right; display: inline-block; }
.vt { vertical-align: top; }
.vm { vertical-align: middle; }
.inner { width:1200px; margin: 0px auto;}

/*header*/
#inner-scrollbar{ position:fixed; height: 100%; overflow: hidden; width:100%; left:0; top:0; display:block;}
.header-box{ width: 100%; background: #fff; position: fixed; box-shadow: 0 0 6px rgba(0,0,0,0.3); left: 0; top: 0; z-index: 999;}
.header{ padding-left: 102px; padding-right: 102px; height: 74px; position: relative;}
.logo{ display: block; width: 186px; height: auto; line-height: 0; float: left; margin-top: 25px;} 
.nav{ position: absolute; left: 50%; top: 0; margin-left: -350px;}
.nav li{ float: left; position: relative;}
.nav li a{ display: block; padding: 0 20px; height: 74px; line-height: 74px; text-align: center; color: #333333; font-size: 16px; position: relative; font-weight: bold;}
.nav li:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #0088d6; -webkit-transition: -webkit-transform .54s cubic-bezier(.215,.61,.355,1); transition: -webkit-transform .54s cubic-bezier(.215,.61,.355,1); transition: transform .54s cubic-bezier(.215,.61,.355,1); transition: transform .54s cubic-bezier(.215,.61,.355,1),-webkit-transform .54s cubic-bezier(.215,.61,.355,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.nav li:hover:before,.nav li.active:before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.nav li:hover a,.nav li.active a{ color: #fff;}

.hotline{ float: right; margin-top: 22px;}
.hotline span{ display: block; width: 35px; height: 35px; background: url(../images/tel.png) center no-repeat; float: left;}
.linetext{ float: left; margin-left: 10px;}
.linetext p{ line-height: 1; color: #333333; font-size: 12px; margin-bottom: 4px; font-family: "微软雅黑";}
.linetext b{ display: block; line-height: 1; color: #0088d6; font-size: 24px; font-weight: normal; font-family: "Humanist 521 BT";}

.navigatie{ position: fixed; right: 0; top: 0; display: none; width: 70px; overflow: hidden; transition: 0.78s cubic-bezier(0.19, 1, 0.22, 1); z-index: 3;}
.header.show .navigatie{ width: 310px;}
.header.show .navigatie .navigetewr{ height: 100vh; transition: 0s;}
.header.show .navigatiebg{ opacity: 1; visibility: visible; transition: 0.78s 0.12s;}
.navigatiebg{ width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: fixed; left: 0; top: 0; transition: 0.78s 0s; opacity: 0; visibility: hidden;}
.navigetewr{ position: relative; transition:0s 0.78s; height: 100%;}
.menubtn{ width:70px; height:60px; background:#0088d6; transition: 0.4s; position:relative; z-index: 20; float: left;}
.menubtn span{ display:block; width:30px; height:3px; background:#fff; margin:auto; margin-top:29px; position:relative; vertical-align: middle; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;}
.menubtn span:after,
.menubtn span:before { content: ""; position: absolute; display: inline-block; width: 100%; height: 3px; left: 0;
 background-color: #fff; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s;-o-transition-duration: .3s,.3s; transition-duration: .3s,.3s;-webkit-transition-delay: .3s,0s;-moz-transition-delay: .3s,0s;-ms-transition-delay: .3s,0s;-o-transition-delay: .3s,0s; transition-delay: .3s,0s}
.menubtn span:before {top: -9px;-webkit-transition-property: top,transform;-moz-transition-property: top,transform;-ms-transition-property: top,transform;-o-transition-property: top,transform;transition-property: top,transform;}
.menubtn span:after {bottom: -9px;-webkit-transition-property: bottom,transform;-moz-transition-property: bottom,transform;-ms-transition-property: bottom,transform;-o-transition-property: bottom,transform;
transition-property: bottom,transform;}
.menubtn.active span {background-color: transparent;-webkit-transition-delay: 0s,0s;-moz-transition-delay: 0s,0s;-ms-transition-delay: 0s,0s;-o-transition-delay: 0s,0s;transition-delay: 0s,0s}
.menubtn.active span:after,.menubtn.active span:before {-webkit-transition-delay: 0s,.3s;-moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s}
.menubtn.active span:before {top: 0px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg)}
.menubtn.active span:after {bottom:0px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
.menubox{ float: left; position: absolute; left: 70px; top: 0; width: 240px; background: #f4f4f4; height: 100vh; overflow-y: auto;}
.menulist >li{ border-bottom: 1px solid #dbdbdb;}
.menulist >li >a{ display: block; padding-left: 24px; height: 60px; line-height: 60px; color: #676767; font-size: 18px; position: relative;}
.menulist >li >a:before{ content: ""; width: 13px; height: 7px; position: absolute; right: 20px; top: 50%; margin-top: -3px; background: url(../images/arrow3.png) center no-repeat; opacity: 0; visibility: hidden; transition: 0.38s;}
.menulist >li.on >a{ background: #0088d6; color: #fff;}
.menulist >li.on >a:before{ opacity: 1; visibility: visible;}
.menus{ padding: 12px 10px 34px 24px; background: #fff; display: none;}
.menus li a{ display: inline-block; line-height: 2.4; color: #707070; font-size: 15px;}

.slick-list { overflow: hidden; width: 100%; height: 100%; }
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.banner-box{ position: relative; overflow: hidden; z-index: 3;}
.banner{ position: relative;}
.item{ position: relative; float: left; overflow: hidden; opacity: 1 !important; z-index: 2 !important; overflow: hidden;}
.item figure{ display: block; line-height: 1; overflow: hidden;}
.item figure img{ display: block; position: relative; line-height: 0;}
.item.slick-current{ z-index: 4 !important;}
.item.hide {
  -webkit-mask: url(../images/urban-sprite-2.png);
          mask: url(../images/urban-sprite-2.png);
  -webkit-mask-size: 7400% 100%;
          mask-size: 7400% 100%;
  -webkit-animation: mask-play 1.4s steps(73) forwards;
          animation: mask-play 1.4s steps(73) forwards;
          z-index: 5 !important;
}
.item.hide.zhide{ z-index: 3 !important;}
@-webkit-keyframes mask-play {
  from {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
}

@keyframes mask-play {
  from {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
}
.banner .slick-dots{ position: absolute; right: 73px; top: 50%; z-index: 20; margin-top: -37px;}
.banner .slick-dots li{ margin-top: 19px; position: relative; line-height: 0;}
.banner .slick-dots li:before{ content: ""; width: 0; height: 1px; background: #fff; position: absolute; top: 50%; right: -73px; transition: 0.45s cubic-bezier(0.16, 0.01, 0.77, 1);}
.banner .slick-dots li:first-child{ margin-top: 0;}
.banner .slick-dots li button{ padding: 0; margin: 0; border: none; width: 8px; height: 8px; box-sizing: content-box; border: 2px solid #fff; border-radius: 50%; outline: none; text-indent: 9999px; overflow: hidden; cursor: pointer; transition: 0.4s; background: none;}
.banner .slick-dots li.slick-active:before{ width: 61px;}
.banner .slick-dots li.slick-active button{ background: #fff;}

.btext{ position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -131px; text-align: center; opacity: 0; visibility: hidden;}
.item.slick-current .btext{ opacity: 1; visibility: visible; transition: 1.4s 0.4s;}
.btext small{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 18px; text-transform: uppercase; font-family: "Humanist 521 BT"; margin-bottom: 12px;}
.btext h2{ text-align: center; line-height: 1.2; color: #fff; font-size: 60px; font-weight: bold;}
.bantexts{ margin-top: 20px; padding-top: 85px; position: relative; text-align: center;}
.bantexts:before{ content: ""; width: 1px; height: 58px; background: #fff; position: absolute; left: 50%; top: 0;}
.bantexts p{ text-align: center; width: 462px; margin: auto; color: #ffffff; font-size: 14px; line-height: 2;}
.chartered{ position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%;}
.chartin{ width: 33.33333%; float: left; position: relative; text-align: center; background: #000; filter:alpha(opacity=75); background: rgba(0,0,0,0.75);}
.chartin:before{ content: ""; width: 1px; height: 100%; background: #36383d; background: rgba(255,255,255,0.2); position: absolute; left: 0; top: 0;} 
.chartin:first-child:before{ display: none;}
.chartin:after{ content: ""; width: 100%; height: 100%; background: #0088d6; position: absolute; left: 0; top: 0; -webkit-transition: -webkit-transform .64s cubic-bezier(.215,.61,.355,1); transition: -webkit-transform .64s cubic-bezier(.215,.61,.355,1); transition: transform .64s cubic-bezier(.215,.61,.355,1); transition: transform .64s cubic-bezier(.215,.61,.355,1),-webkit-transform .64s cubic-bezier(.215,.61,.355,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.chartin a{ display: block; text-align: center; padding: 41px 0 50px; position: relative; z-index: 3;}
.chartinwr{ display: inline-block; margin: auto; position: relative;}
.chartinwr b{ display: block; width: 50px; height: 50px; position: relative; float: left;}
.chartinwr b img{ display: block; max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.charterri{ padding-top: 5px; margin-left: 68px; text-align: left;}
.charterri span{ display: block; line-height: 1; color: #fff; font-size: 16px; margin-bottom: 8px;}
.charterri small{ display: block; line-height: 1; color: #fff; font-size: 13px; font-family: "Humanist 521 BT";}
.chartin:hover:after{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}

.company-box{ padding: 215px 0 160px; position: relative; background-size: cover; background-attachment: fixed; background-position: center;}
.company{ }
.companytop{ text-align: center;}
.companytop small{ display: block; text-transform: uppercase; color: #fff; font-size: 40px; line-height: 1; font-family: "Humanist 521 BT"; padding-bottom: 13px; position: relative;}
.companytop small b{ display: block;}
.companytop small:before{ content: ""; width: 30px; height: 1px; background: #fff; position: absolute; left: 50%; margin-left: -15px; bottom: 0;}
.companytop strong{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 27px; font-weight: bold; margin-top: 30px;}
.companyte{ margin-top: 38px; text-align: center;}
.companyte p{ width: 630px; text-align: center; color: #fff; font-size: 14px; line-height: 2; margin: auto;}
.aboutlist{ position: relative; margin-top: 104px; text-align: center;}
.aboutlist:before{ content: ""; width: 100%; height: 1px; background: #b6b6b7; position: absolute; left: 0; top: 51px;}
.abouts{ display: inline-block; margin: auto; text-align: center;}
.abouts li{ margin-left: 98px; text-align: center; float: left;}
.abouts li:first-child{ margin-left: 0;}
.abouts li .aboutwr{ display: block; width: 100px; height: 100px; border: 3px solid #b1b1b1; position: relative; border-radius: 50%; margin: auto; transition: 0.4s; background: #b1b1b1;}
.abouts li .aboutwr b{ display: block; background: #b1b1b1; position: relative; height: 99px; border-radius: 50%;}
.abouts li .aboutwr b .bors{ border-radius: 50%; position: absolute; left: 0; top: 0; visibility: hidden; stroke-dasharray: 350;
    stroke-dashoffset: 350; transition: 1s; visibility: hidden;}
.abouts li b img{ display: block; max-width: 50%; max-height: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 6;} 
.abouts li span{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 16px; font-weight: bold; margin-top: 20px;}
.abouts li:hover .aboutwr{border: 3px solid rgb(255,255,255,0.3); background: none;}
.abouts li:hover b .bors{ stroke-dashoffset: 0; visibility: visible;}
.abouts li:hover b img{ -webkit-animation: jello 1s; -moz-animation: jello 1s; animation: jello 1s;}

@-webkit-keyframes jello {
    from, 11.1%, to { -webkit-transform: none; transform: none }
    22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) }
    33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) }
    44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) }
    55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) }
    66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) }
    77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) }
    88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) }
}

@-moz-keyframes jello {
    from, 11.1%, to { -moz-transform: none; transform: none }
    22.2% { -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) }
    33.3% { -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) }
    44.4% { -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) }
    55.5% { -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) }
    66.6% { -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) }
    77.7% { -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) }
    88.8% { -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) }
}

@keyframes jello {
    from, 11.1%, to { -webkit-transform: none; -moz-transform: none; transform: none }
    22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) }
    33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) }
    44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) }
    55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) }
    66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); -moz-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) }
    77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) }
    88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) }
}
 
.businessin{ width: 25%; float: left; position: relative; overflow: hidden;}
.businessin2{ width: 50%;}
.businessin figure{ display: block; line-height: 1; overflow: hidden; position: relative;}

.businessin figure img{ display: block; width: 100%; height: auto; line-height: 0; transition: 0.68s;}
.busineewr{ width: 100%; height: 100%; position: absolute; left: 0%; top: 0; z-index:5; -webkit-transition: .64s cubic-bezier(.215,.61,.355,1); transition: .64s cubic-bezier(.215,.61,.355,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; top:0%; visibility: hidden;}
.busineewr:after{ content: ""; width: 100%; height: 100%; background: #0088d6; position: absolute; left: 0; top: 0; -webkit-transition: -webkit-transform .64s cubic-bezier(.215,.61,.355,1); transition: -webkit-transform .64s cubic-bezier(.215,.61,.355,1); transition: transform .64s cubic-bezier(.215,.61,.355,1); transition: transform .64s cubic-bezier(.215,.61,.355,1),-webkit-transform .64s cubic-bezier(.215,.61,.355,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.businee:before{ content: ""; width: 12px; height: 21px; position: absolute; left: 53px; bottom: 40px; background: url(../images/arrow1.png) center no-repeat; background-size: cover; z-index: 3;}

.bustitle{ position: absolute; left: 53px; bottom: 39px; padding-bottom: 34px; z-index: 4; transition: 0.4s 0.15s;}
.bustitle:before{ content: ""; width: 31px; height: 1px; background: #fff; position: absolute; left: 0; bottom: 0;}
.bustitle small{ display: block; color: #ffffff; font-size: 20px; font-weight: normal; line-height: 1; font-family: "Humanist 521 BT";}
.bustitle small b{ display: block; font-weight: bold;}
.bustitle span{ display: block; line-height: 1; color: #fff; font-size: 20px; font-weight: bold; margin-top: 15px;}
.businee{ padding: 0 53px; height: 100%; position: relative; z-index: 3; opacity: 0; visibility: hidden; transform: translateY(34px); -webkit-transform: translateY(34px); -moz-transform: translateY(34px);}
.busineewr .bustitle{ position: relative; left: 0; bottom: 0; margin-top: 0; padding-top: 44px; margin-bottom: 10%;}
.businesstext p{ color: #ffffff; font-size: 14px; height: 75px; overflow: hidden;}
.businessin:hover figure img{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.businessin:hover .busineewr{ visibility: visible;}
.businessin:hover .bustitle{ opacity: 0; visibility: hidden; transition: 0s;}
.businessin:hover .busineewr .bustitle{ opacity: 1; visibility: visible; transition: 0s}
.businessin:hover .busineewr:after{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.businessin:hover .businee{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); transition: 0.5s; }

.news-box{ background-attachment: fixed; background-size: cover; background-position: center; padding: 104px 0 96px;}
.newslist{ width: 1242px; margin-left: -21px; margin-top: 86px;}
.nitem{ float: left;}
.nitem a{ display: block; margin: 0 21px; position: relative; border: 1px solid #e7e7e7; padding-bottom: 75px;}
.nitem a figure{ position: relative; line-height: 1; overflow: hidden;}
.nitem a figure:before{ content: ""; width: 100%; height: 100%; background: #0088d6; filter:alpha(opacity=50); background: rgba(0,136,214,0.5); position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: 0.5s; z-index: 2;}
.nitem a figure img{ display: block; width: 100%; height: auto; line-height: 0; transition: 0.58s;}
.time{ position: absolute; left: 16px; top: 14px; width: 57px; text-align: center; z-index: 3; background: #b6b6b7; filter:alpha(opacity=50); background: rgba(182,182,182,0.5); padding: 14px 0 10px} 
.time b{ display: block; line-height: 1; text-align: center; color: #fff; font-size: 30px; font-weight: normal; font-family: " Humanist 521 BT"; margin-bottom: 12px;}
.time time{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 14px; font-family: "Humanist 521 BT";}
.newsdown{ width: 100%; position: absolute; background: #fff; left: 0; bottom: 0; z-index: 6;}
.newshideen{ overflow: hidden; height: 75px; transition: 0.58s; padding: 0 22px; }
.newshideen h3{ line-height: 1.2; padding-top: 20px; color: #030303; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 10px;}
.newshideen p{ color: #888888; font-size: 13px; font-weight: bold; height: 94px; overflow: hidden; opacity: 0; visibility: hidden; transition: 0.44s;}
.newshideen span{ display: inline-block; line-height: 1; color: #0088d6; text-decoration: underline; padding-bottom: 35px; opacity: 0; visibility: hidden; transition: 0.4s;} 
.nitem a:hover figure img{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.nitem a:hover figure:before{ opacity: 1; visibility: visible;}
.nitem a:hover .newshideen{ height: 190px;}
.nitem a:hover .newshideen p{ opacity: 1; visibility: visible; transition: 0.44s;}
.nitem a:hover .newshideen span{ opacity: 1; visibility: visible;}
.newslist .slick-dots{ text-align: center; line-height: 1; margin-top: 52px;}
.newslist .slick-dots li{ display: inline-block; line-height: 1; margin-left: 9px;}
.newslist .slick-dots li:first-child{ margin-left: 0;}
.newslist .slick-dots li button{ padding: 0; margin: 0; width: 9px; height: 9px; border: 1px solid #fff; outline: none; text-indent: 99999px; overflow: hidden; cursor: pointer; transition: 0.42s; border-radius: 5px; background: none;}
.newslist .slick-dots li.slick-active button{ background: #fff; width: 45px;}

.footer-box{ padding: 48px 0; background: #1f1f1f; position: relative;}
.footer{ position: relative;}
.fnav{ margin-bottom: 52px;}
.fnav li{ float: left; line-height: 1; border-left: 2px solid #8d8d8d;}
.fnav li a{ display: block; opacity: 0.5; line-height: 1; color: #ffffff; font-size: 14px; padding: 0 13px;}
.fnav li:first-child{ border-left: none;}
.fnav li:first-child a{ padding-left: 0;}
.fnav li a:hover{ opacity: 1;}
.address{ margin-bottom: 46px;}
.address p{ color: #ffffff; font-size: 14px; opacity: 0.5; filter:alpha(opacity=50); line-height: 2;}
.follow{ position: absolute; right: 0; top: 0; text-align: center;}
.follow img{ display: block; width: 117px; height: auto; margin-bottom: 13px;}
.follow span{ display: block; text-align: center; color: #fff; font-size: 14px; line-height: 1.6;}
.copyright p{ display: inline-block; color: #ffffff; font-size: 14px; opacity: 0.5;}
.copyright a{ display: inline-block; color: #fff; font-size: 14px; margin-left: 20px; opacity: 0.5;}
.copyright a:hover{ opacity: 1;}
.tops{ position: absolute; right: 15px; cursor: pointer; bottom: 66px; z-index: 10;}
.tops span{ display: block; float: left; line-height: 28px; color: #666666; text-transform: uppercase; margin-right: 8px; font-family: arial; line-height: 28px; transition: 0.4s;}
.tops b{ display: block; float: left; width: 28px; height: 28px; transition: 0.4s; border-radius: 50%; position: relative; background: #666666;}
.tops b:before{ content: ""; width: 12px; height: 7px; background: url(../images/arrow2.png) center no-repeat; position: absolute; left: 50%; margin-left: -6px; top: 11px;}
.tops:hover span{ color: #fff;}
.tops:hover b{ background: #fff;}

.chartered.article-block .chartin{ opacity: 0; visibility: hidden; transform: translateY(144px); -webkit-transform: translateY(144px); -moz-transform: translateY(144px); transition: 0.52s cubic-bezier(0.16, 0.01, 0.77, 1);}
.chartered.articleShow .chartin{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.chartered.article-block .chartin:nth-child(2){ transition-delay: 0.15s;}
.chartered.article-block .chartin:nth-child(3){ transition-delay: 0.3s;}
.companytop.article-block small{ opacity: 0; visibility: hidden; transform: translateY(40px); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); transition: 0.54s 0.25s;}
.companytop.articleShow small{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.companytop.article-block small:before{width: 0; margin-left: 0; transition: 0.4s 0.4s;}
.companytop.articleShow small:before{ width: 30px;  margin-left: -15px;}
.companytop.article-block strong{ opacity: 0; visibility: hidden; transform: translateY(40px); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); transition: 0.54s 0.54s;}
.companytop.articleShow strong{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.companytop.article-block .companyte{ opacity: 0; visibility: hidden; transform: translateY(40px); -webkit-transform: translateY(40px); -moz-transform: translateY(40px); transition: 0.6s 0.65s;}
.companytop.articleShow .companyte{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.aboutlist.article-block:before{ width: 0; transition: 2.4s;}
.aboutlist.articleShow:before{ width: 100%;}

.aboutlist.article-block .abouts li .aboutwr{ opacity:0; visibility:hidden; transition:0.4s;}
.aboutlist.articleShow .abouts li .aboutwr{ opacity:1; visibility:visible; animation:rollIn 1s ease-out;}
.aboutlist.article-block .abouts li span{ opacity: 0; visibility: hidden; transition: 0.45s 0.38s;}
.aboutlist.articleShow .abouts li span{ opacity: 1; visibility: visible;}

@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:none;transform:none;}}
.businessin.article-block a{ display: block; opacity: 0; visibility: hidden; transition: 1s;}
.businessin.articleShow a{ opacity: 1; visibility: visible;}
.businessin.article-block a:before{ content: ""; width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: #0088d6; transition: 1000ms cubic-bezier(0.16, 0.01, 0.77, 1); -webkit-transition: 1000ms cubic-bezier(0.16, 0.01, 0.77, 1); -moz-transition: 1000ms cubic-bezier(0.16, 0.01, 0.77, 1); z-index: 10;}
.businessin.articleShow a:before{ width: 0;}

.nitem.article-block{ opacity: 0; visibility: hidden; transform: translateY(65px); -webkit-transform: translateY(65px); -moz-transform: translateY(65px); transition: 0.65s cubic-bezier(0.16, 0.01, 0.77, 1); -webkit-transition: 0.65s cubic-bezier(0.16, 0.01, 0.77, 1);}
.nitem.articleShow{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}

/*about*/
.pbanner{ position: relative;}
.pbanner figure{ display: block; line-height: 1; overflow: hidden; position: relative;}
.pbanner figure img{ display: block; width: 100%; height: auto; line-height: 0;}
.ptext{ position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -33px; text-align: center;}
.ptext small{ display: block; text-align: center; line-height: 1; color: #ffffff; font-size: 18px; font-family: "Humanist 521 BT"; text-transform: uppercase; margin-bottom: 15px;}
.ptext h2{ text-align: center; line-height: 1; color: #fff; font-size: 60px; font-weight: bold;}
.levalmenus{ text-align: center; line-height: 0;}
.menusd{ display: inline-block; margin: auto;}
.menusd li{ float: left; position: relative; padding: 0 25px;}
.menusd li:before{ content: ""; width: 1px; height: 17px; background: #666666; border-right: 1px solid #c2c2c2; position: absolute; right: 0; top: 50%; margin-top: -8px;}
.menusd li a{ display: block; position: relative; padding: 0 7px; height: 58px; line-height: 58px; color: #424242; font-size: 16px;}
.menusd li:last-child:before{ display: none;}
.menusd li a:before{ content: ""; width: 100%; height: 4px; background: #0088d6; position: absolute; left: 0; bottom: 0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .4s cubic-bezier(.215,.61,.355,1); transition:-webkit-transform .4s cubic-bezier(.215,.61,.355,1); transition:transform .4s cubic-bezier(.215,.61,.355,1); transition:transform .4s cubic-bezier(.215,.61,.355,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9;}
.menusd li a:hover,.menusd li.active a{ color: #0088d6;}
.menusd li a:hover:before,.menusd li.active a:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}

.introduct-box{ padding: 138px 0 95px; background: #f9f9f9;}
.introtext{ width: 45.6666%; float: left;}
.introtitle{ padding-bottom: 38px; position: relative;}
.introtitle:before{ content: ""; width: 55px; height: 1px; background: #0088d6; position: absolute; left: 0; bottom: 0;}
.introtitle h3{ color: #424242; font-size: 32px; line-height: 1; margin-bottom: 8px;}
.introtitle small{ display: block; line-height: 1; color: #424242; font-size: 13px; text-transform: uppercase;}
.introfix p{ color: #424242; font-size: 16px;}
.introfix{ margin-top: 82px;}

.trailer{ width: 50%; float: right; position: relative; line-height: 0; overflow: hidden;}
.trailer .markimg{ display: block; width: 100%; height: auto; transition: 0.68s;}
.vbBox{ height: 100%; width:100%; left:0; top:0; position:absolute; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center; z-index:5;}
.jwplayer{ opacity:0; height:100% !important;}

.video{ position:absolute; cursor:pointer; left: 50%; text-align: center; margin-left: -31px; top: 50%; margin-top: -31px; z-index:10;}
.video span{ display:block; width:62px; height:62px; position:relative; margin: auto;}
.video span img{ display:block; max-width:100%; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto;}
.video span:after,.video span:before { width:100%; height:100%; content:''; display:block;
-webkit-box-sizing:border-box; box-sizing:border-box; position:absolute; top:0; left:0; border-style:solid; border-color:#fff; border-radius:50%; border-width:2px;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1); transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transition-property:opacity,-webkit-transform; transition-property:opacity,-webkit-transform; transition-property:transform,opacity; transition-property:transform,opacity,-webkit-transform;}
.video span:after { opacity:0; -webkit-transform:scale(.8); transform:scale(.8);}
.trailer:hover .markimg{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.trailer:hover .video span:after,.trailer:hover .video span:before { -webkit-transition-duration:1.2s;transition-duration:1.2s}
.trailer:hover .video span:before {opacity:0; -webkit-transform:scale(1.4);transform:scale(1.4);}
.trailer:hover .video span:after { opacity:1; -webkit-transform:scale(1); transform:scale(1);}
.video b{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 18px; font-weight: bold; margin-top: 16px;}
.jwlogo{ display: none !important;}

.commontt{ text-align: center; padding-bottom: 39px;}
.commontt:before{ left: 50%; width: 55px; margin-left: -27px;}
.honors{ padding: 92px 0 98px;}
.honorbann{ margin-top: 33px;}
.honorbtn{ text-align: center;}
.honorbtn span{ display: inline-block; width: 129px; height: 32px; position: relative; line-height: 32px; text-align: center; cursor: pointer; border: 1px solid #292929; margin-left: -1px; color: #292929; transition: 0.4s; font-size: 14px; font-weight: bold;}
.honorbtn span:before{ content: ""; width: 6px; height: 4px; position: absolute; left: 50%; margin-left: -3px; background: url(../images/arrow4.png) center no-repeat; bottom: -7px; opacity: 0; visibility: hidden; transition: 0.35s;}
.honorbtn span:hover,.honorbtn span.active{ background: #0088d6; border-color: #0088d6; z-index: 3; color: #fff;}
.honorbtn span.active:before{ opacity: 1; visibility: visible;}

.honorwhich{ position: relative; width: 1218px; margin-left: -9px; overflow: hidden; margin-top: 66px;}
.honorin{ width: 100%; position: absolute; left: 0%; top: 0; opacity: 0; visibility: hidden;}
.honorin.active{ transition: 0.67s; opacity: 1; visibility: visible; position: relative;}
.honorli{ float: left;}
.honor{ float: left; width: 25%; margin-bottom: 20px;}
.honor figure{ transition: 0.4s; display: block; overflow: hidden; margin: 0 9px; position: relative; border: 3px solid #898989;}
.honor figure img{ display: block; width: 100%; height: auto; transition: 0.58s;}
.honoribg{ display: block; width: 100%; height: 100%; background: #0088d6; filter:alpha(opacity=70); background: rgba(0,136,214,0.7); position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: 0.58s;}
.honoribg b{ display: block; width: 18px; height: 20px; position: absolute; left: 50%; margin-left: -9px; top: 50%; margin-top: -10px; background: url(../images/smak.png) center no-repeat; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); visibility: hidden; transition: 0.42s;} 
.honor figure:hover{ border-color: #0088d6;}
.honor figure:hover img{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.honor figure:hover .honoribg{ opacity: 1; visibility: visible;}
.honor figure:hover .honoribg b{ visibility: visible; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1);}
.honorin .slick-dots{ text-align: center; padding-top: 38px; line-height: 0;}
.honorin .slick-dots li{ display: inline-block; margin-left: 26px;}
.honorin .slick-dots li:first-child{ margin-left: 0;}
.honorin .slick-dots li button{ padding: 0; margin: 0; border: none; width: 14px; height: 14px; border-radius: 50%; outline: none; background: #404040; text-indent: 99999px; overflow: hidden; transition: 0.35s; cursor: pointer;}
.honorin .slick-dots li.slick-active button{ background: #0088d6; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg);}

.history-box{ padding-top: 138px; background-attachment: fixed; background-position: center; background-size: cover;}
.history .introtitle h3{ color: #ffffff;}
.history .introtitle:before{ background: #ffffff;}
.history .introtitle small{ color: #ffffff; opacity: 0.5; filter:alpha(opacity=50);}
.historybann{ position: relative; margin-top: 128px;}
.historybann .slick-track{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: flex-end; align-items: -webkit-flex-end;}
.hisinfo{ padding-bottom: 82px; float: left; position: relative;}
.hisline{ display: block; width: 1px; position: absolute; left: 7px; top: 4px; bottom: 0; background: #ffffff;}
.hisline:before{ content: ""; width: 11px; height: 11px; background: #fff; border-radius: 50%; position: absolute; left: -5px; top: 0;}
.hisinfo strong{ display: block; line-height: 1; color: #fff; font-size: 24px; font-weight: normal; font-family: "089-CAI978"; margin-left: 48px; margin-bottom: 24px;} 
.histext{ padding: 0 46px; min-height: 125px; position: relative;}
.histext:before{ content: ""; width: 12px; height: 1px; background: #fff; position: absolute; left: 2px; top: 13px;}
.histext p{ color: #ffffff; font-size: 14px;}
.historybann .slick-arrow{ padding: 0; margin: 0; border: none; width: 57px; height: 57px; border-radius: 50%; cursor: pointer; outline: none; position: absolute; top: 50%; margin-top: -28px; text-indent: 9999px; overflow: hidden; transition: 0.4s; z-index: 10;}
.historybann .slick-arrow.slick-prev{ left: -98px; background: #0088d6 url(../images/prev.png) center no-repeat;}
.historybann .slick-arrow.slick-next{ right: -98px; background: #0088d6 url(../images/next.png) center no-repeat;}
.historybann .slick-arrow.slick-prev:hover{ background: #fff url(../images/prev1.png) center no-repeat;}
.historybann .slick-arrow.slick-next:hover{ background: #fff url(../images/next1.png) center no-repeat;}

.responsible-box{ padding: 90px 0 146px; background: #f9f9f9;}
.checkmore{ text-align: center; margin-top: 100px;}
.checkmore a{ display: block; width: 136px; height: 44px; text-align: center; line-height: 44px; background: #0088d6; margin: auto; color: #ffffff; font-size: 13px;}
.checkmore a:hover{ background: #016ead;}
.responsibles .nitem a:hover{ box-shadow: 0 0 9px rgba(0,0,0,0.39);}

.ptext.article-block small,.ptext.article-block h2{ opacity: 0; visibility: hidden; transform: translateY(50px); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); transition: 0.48s;}
.ptext.article-block h2{ transition-delay: 0.2s;}
.ptext.articleShow small,.ptext.articleShow h2{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.news-boxs{ padding: 170px 0 185px; background: #f9f9f9;}
.newsde .newslist{ margin-top: 0;}
.newsde .newslist .nitem{ margin-bottom: 54px; width: 33.3333%;}
.pages{ padding: 11px 0 10px; line-height: 1; background: #0088d6; text-align: center;}
.pagewr{ display: inline-block; margin: auto;}
.pagewr a{ display: block; float: left; margin-left: 8px; height: 30px; line-height: 31px; text-align: center; width: 20px; color: #ffffff; font-size: 16px; vertical-align: middle; font-family: "Arial"; font-weight: bold; position: relative;}
.pagewr a:before{ content: ""; width: 0%; height: 3px; background: #fff; position: absolute; left: 50%; bottom: 1px; transition: 0.35s;}
.pagewr a:hover:before,.pagewr a.active:before{ width: 100%; left: 0;}
.pagewr a:first-child{ margin-left: 0;}
.pagewr a.fpage{ width: 28px; height: 28px; border: 1px solid #fff; border-radius: 50%;}
.pagewr a.fpage:before{ display: none;}
.pagewr a.fpage.prevpage{ margin-right: 28px; background: url(../images/prev2.png) center no-repeat;}
.pagewr a.fpage.nextpage{ margin-left: 28px; background: url(../images/next2.png) center no-repeat;}
.newsde .responsibles{ margin-bottom: 44px;}

.dymanics{ width: 1040px; margin: auto; margin-bottom: 150px;}
.dymanics li{ margin-bottom: 28px; border: 1px solid #e5e5e5; transition: 0.35s;}
.dymanics li:last-child{ margin-bottom: 0;}
.dymanicwr{ padding: 20px; transition: 0.35s; font-family: "微软雅黑"; border: 2px solid #fff; background: #fff;}
.dymanicwr figure{ display: block; line-height: 1; float: left; overflow: hidden; width: 178px;}
.dymanicwr figure img{ display: block; width: 100%; height: auto; line-height: 0; transition: 0.58s;}
.dynamicri{ margin-left: 212px; padding-right: 172px; padding-top: 8px; position: relative;}
.dynamicri h3{ color: #1e1e1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; line-height: 1.2; font-weight: normal; margin-bottom: 20px;}  
.dynamicri p{ color: #646464; height: 50px; overflow: hidden; font-size: 14px; margin-bottom: 10px;}
.dynamicri i{ display: block; color: #646464; font-size: 14px; line-height: 1; font-style: normal;}
.dynamicri span{ display: block; width: 37px; height: 37px; position: absolute; right: 30px; top: 40px; background: url(../images/arrow5.png) center no-repeat; transition: 0.4s;}
.dymanics li:hover{border-color: #329fdd;}
.dymanics li:hover .dymanicwr{ border-color: #329fdd; background: none;}
.dymanics li:hover .dymanicwr figure img{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.dymanics li:hover .dynamicri span{ background: url(../images/arrow6.png) center no-repeat;}
.dymanics li.noimg .dynamicri{ margin-left: 0;}

.newsinn{ padding: 178px 0; background-size: cover; background-position: center;}
.newstitle h3{ text-align: center; color: #fff; font-size: 30px; line-height: 1.4; font-weight: normal;}
.newstitle time{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 14px; margin-top: 26px;}
.newsfix{ background: #f9f9f9; padding-bottom: 32px;}
.newstop{ position: relative; top: -84px; width: 1062px; margin: auto;}
.newstext{ padding: 82px 84px 150px; background: #fff; border-top: 5px solid #0088d6;}
.newstext p,.newstext a{ color: #5f5f5f; font-size: 16px;}
.newstext img{ max-width: 100% !important; width: auto; height: auto;} 
.previous{ margin-top: 50px; position: relative;}
.previs{ float: left; position: relative;}
.previs a{ display: block; padding-left: 62px; height: 48px; line-height: 48px; color: #999999; font-size: 14px;}
.previs a b{ display: block; width: 36px; height: 36px; background: #999999; border: 6px solid #c9c9c9; position: relative; position: absolute; left: 0; top: 50%; margin-top: -24px; border-radius: 50%; transition: 0.4s;}
.previs a b:before{ content: ""; width: 10px; height: 19px; position: absolute; top: 50%; margin-top: -9px; left: 50%; margin-left: -5px;}
.previs.prev a b:before{ background: url(../images/prev.png) center no-repeat;}
.previs.next a b:before{ background: url(../images/next.png) center no-repeat;}
.previs.next{ float: right;}
.previs.next a{ padding-left: 0; padding-right: 62px;}
.previs.next a b{ left: auto; right: 0;}
.previs a:hover{ color: #0088d6;}
.previs a:hover b{ background: #0088d6; border-color: #7cc0e7;}
.backlist{ position: absolute; top: 0; left: 50%; margin-left: -51px;}
.backlist a{ display: block; width: 91px; height: 36px; line-height: 36px; color: #ffffff; font-size: 14px; text-align: center; border-radius: 24px; border: 6px solid #7cc0e7; background: #0088d6;}

.charter-box{ padding: 100px 0 180px; background: #f9f9f9;}
.enterpses{ padding: 34px 24px 0; float: left; width: 244px; height: 272px; position: relative; background: #fff;}
.enterpses:before{ content: ""; width: 100%; height: 8px; background: #0088d6; position: absolute; left: 0; bottom: 0;}
.enterpses small{ display: block; line-height: 1; margin-bottom: 16px; color: #0088d6; font-size: 20px; font-family: "Humanist 521 BT";}
.enterpses small b{ display: block;}
.enterpses span{ display: block; line-height: 1; color: #0088d6; font-size: 20px; font-weight: bold; padding-bottom: 34px; position: relative;}
.enterpses span:before{ content: ""; width: 31px; height: 1px; background: #0088d6; position: absolute; left: 0; bottom: 0;}
.enterpses:after{ content: ""; width: 12px; height: 21px; position: absolute; left: 24px; bottom: 58px; background: url(../images/arrow7.png) center no-repeat;}
.entertext{ width: 59.58%; float: right;}
.operate p{ color: #626262; font-size: 16px; line-height: 2;}
.hotelines{ margin-top: 92px; float: none;}


.companybox{ position: relative; overflow: hidden;}
.profilebann{ width: 968px; margin: auto;}
.prointem{ float: left; position: relative; line-height: 1;}
.prointem figure{ display: block; line-height: 1; overflow: hidden;}
.prointem figure img{ display: block; width: 100%; height: auto; line-height: 0;}
.prointem span{ width: 100%; height: 74px; line-height: 74px; color: #fff; font-size: 16px; position: absolute; left: 0; bottom: 0; z-index: 5; background: #000; filter:alpha(opacity=70); background: rgba(0,0,0,0.7); text-indent: 58px; display: none;}
.geogeadbg{ z-index: 10; height: 100%; width: calc((100% - 1200px)/2); position: absolute; top: 0; background: #000; filter:alpha(opacity=50); background: rgba(0,0,0,0.5);}
.geogeadbg span{ display: block; width: 57px; height: 57px; position: absolute; top: 50%; margin-top: -28px; cursor: pointer; transition: 0.4s; border-radius: 50%;}
.geogeadbg1{ left: 0;}
.geogeadbg2{ right: 0;}
.profilebann .slick-list{ overflow: visible;}
.geogeadbg1 span{ right: 30px; background:#fff url(../images/prev1.png) center no-repeat;}
.geogeadbg2 span{ left: 30px; background:#fff url(../images/next1.png) center no-repeat;}
.geogeadbg1 span:hover{ background: #0088d6 url(../images/prev.png) center no-repeat; border-color: #fff;}
.geogeadbg2 span:hover{ background: #0088d6 url(../images/next.png) center no-repeat; border-color: #fff;}
.prointem.slick-current span{ display: block;}
.numble{ position: absolute; left: 50%; margin-left: 358px; bottom: 28px; line-height: 1; z-index: 20;}
.numble span{ display: block; float: left; color: #fff; font-size: 20px; line-height: 1;}
.numble b{ display: block; float: left; color: #fff; font-size: 20px; line-height: 1; margin: 0 5px; font-weight: normal;}

.repairs-box{ padding: 138px 0 108px; background: #f9f9f9;}
.repairtext{ margin-top: 86px;}
.repairtext p{ color: #626262; font-size: 16px; text-align: justify;}
.repairimg{ height: 564px; background-attachment: fixed; background-size: cover; background-position: center;}
.servicein{ padding: 115px 0 95px; background: #fff;}
.servicewr figure{ display: block; line-height: 1; width: 50%; float: left; overflow: hidden;}
.servicewr figure img{ display: block; width: 100%; height: auto; line-height: 0;}
.servicetext{ width: 45.6666%; float: right; padding-top: 32px;}
.servi{ margin-top: 50px;}
.servi p{ color: #626262; font-size: 16px; line-height: 2;}
.servicein2{ background: #f9f9f9;}
.servicein2 .servicewr figure{ float: right;}
.servicein2 .servicetext{ float: left;}

.customers-box{ padding: 106px 0 136px; background-attachment: fixed; background-position: center; background-size: cover;}
.customers .introtitle h3{ color: #fff;}
.customers .introtitle small{ color: #ffffff;}
.customers .introtitle:before{ background: #fff;}
.customerli{ margin-top: 65px; width: 1216px; margin-left: -8px;}
.customerli li{ width: 20%; float: left; margin-bottom: 27px;}
.customerli li a{ display: block; margin: 0 8px;}
.customerli li a img{ display: block; width: 100%; height: auto; transition: 0.45s;}
.customerli li a:hover img{ transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px);}

.idea-box{ padding: 130px 0 120px; background: #f9f9f9;}
.ideatop{ text-align: center; margin-bottom: 56px;}
.ideatop h3{ color: #424242; font-size: 32px; line-height: 1.2; margin-bottom: 54px;} 
.ideatop p{ width: 968px; margin: auto; color: #424242; font-size: 16px; text-align: center;}
.idea img{ max-width: 100%; height: auto; width: auto;}
.elegant{ padding: 98px 0 120px;}

.elegantli{ width: 1240px; margin-left: -20px; margin-top: 75px;}
.elegantli li{ width: 33.333%; float: left;}
.elegantli li a{ display: block; margin: 0 20px; position: relative;}
.elegantli li a figure{ display: block; position: relative; line-height: 1; overflow: hidden;}
.elegantli li a figure img{ display: block; width: 100%; height: auto; line-height: 0; transition: 0.65s;}
.elegantli li a figure span{ display: block; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 3; color: #fff; font-size: 16px; line-height: 61px; background: #000; filter:alpha(opacity=70); background: rgba(0,0,0,0.7); text-align: center; transition: 0.48s;} 
.elegants{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; visibility: hidden; transition: 0.6s;}
.elegants:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #2692d9; filter:alpha(opacity=80); background: rgba(38,146,217,0.8); -webkit-transition: -webkit-transform .66s cubic-bezier(.215,.61,.355,1); transition: -webkit-transform .66s cubic-bezier(.215,.61,.355,1); transition: transform .66s cubic-bezier(.215,.61,.355,1); transition: transform .66s cubic-bezier(.215,.61,.355,1),-webkit-transform .66s cubic-bezier(.215,.61,.355,1); transform-origin: left 100%; -webkit-transform-origin: left 100%; transform: scaleY(0); -moz-transform: scaleY(0); -webkit-transform: scaleY(0); visibility: hidden\9;}
.elegantwr{ width: 100%; position: absolute; left: 0; top: 50%; margin-top: -48px; text-align: center; z-index: 3; opacity: 0; visibility: hidden; transition: 0.48s;}
.elegantwr time{ display: block; text-align: center; color: #fff; font-size: 12px; line-height: 1; margin-bottom: 8px;}
.elegantwr span{ display: block; text-align: center; line-height: 1.2; color: #fff; font-size: 16px; margin-bottom: 36px;}
.elegantwr b{ display:inline-block; margin: auto; color: #fff; line-height: 1; font-size: 12px; text-decoration: underline;}
.elegantli li a:hover figure img{ transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06);}
.elegantli li a:hover figure span{ bottom: -61px;}
.elegantli li a:hover .elegants{ visibility: visible;}
.elegantli li a:hover .elegants:before{ transform: scaleY(1); -webkit-transform: scaleY(1); transform-origin: left 0; -webkit-transform-origin: left 0; visibility: visible\9;}
.elegantli li a:hover .elegantwr{ opacity: 1; visibility: visible;}

.recruite-box{ padding: 95px 0 120px; background: #f9f9f9;}
.recuitedc{ margin-top: 68px;}
.recuitett{ background: #2692d9; margin-bottom: 5px; padding-left: 38px;}
.recuitett span{ display: block; float: left; height: 63px; line-height: 63px; color: #ffffff; font-size: 15px; font-weight: bold; padding-left: 39px;}
.recuitett span.span1{ width: 18.58%; background: url(../images/recuite1.png) left center no-repeat;}
.recuitett span.span2{ width: 22.16%; background: url(../images/recuite2.png) left center no-repeat;}
.recuitett span.span3{ width: 22.333%; background: url(../images/recuite3.png) left center no-repeat;}
.recuitett span.span4{ background: url(../images/recuite4.png) left center no-repeat;}
.recuiteli li{ margin-bottom: 3px; cursor: pointer; background: #fff; padding-left: 78px; transition: 0.4s;}
.recuiteli li span{ display: block; float: left; transition: 0.42s; color: #666666; font-size: 15px; height: 62px; line-height: 62px;}
.recuiteli li span.span1{ width: 18.75%;}
.recuiteli li span.span2{ padding-left: 66px; width: 20.4%;}
.recuiteli li span.span3{ width: 108px; text-align: center; margin-right: 18%;}
.recuiteli li:hover{ background: #b9daef;}
.recuiteli li:hover span{ color: #fff;}
.messages{ margin-top: 58px;}
.messagetop{ margin-bottom: 92px;}
.messagetop p{ float: left; color: #666666; font-size: 15px; line-height: 50px; margin-right: 34px;}
.messagetop img{ display: block; float: left; margin-right: 30px; transition: 0.48s;}
.messagetop img:hover{ transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px);}
.messagefix strong{ display: block; color: #666666; font-size: 16px; font-weight: bold;}
.messagefix p{ color: #666666; font-size: 15px;}

#proPage { position:fixed; top:0; left:0; right: 0px; bottom: 0px;  z-index:1006; background:rgba(0,0,0,0.7); background:#000\9; filter:alpha(opacity=70);  -webkit-overflow-scrolling:touch;  display: block; visibility: hidden; z-index: 1010; opacity:0; transition:560ms; overflow-y: scroll;}
.pro-bd{ left: 50%; width:808px; margin-left:-404px; cursor: default; opacity: 0; position: fixed; top: 50%; visibility: hidden; z-index: 1020;}
.closes{ position:absolute; overflow: hidden; height: 27px; width:27px; right:18px; top:28px; z-index: 1030; cursor:pointer; background:url(../images/close.png) no-repeat scroll center center; transition:480ms;}
.closes:hover {transform:rotate(180deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transform:rotate(360deg); }
html.openPH body{ -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; transition: all 0s;}
html.openPH #proPage{ overflow-y: scroll;}
html.openPH .introduct-mark{ overflow-y: scroll;}
html.openPH .introduct-mark .introduct-filex{ top:0; position:absolute; box-sizing:border-box; margin-top:0 !important;}
html.openPH #proPage .pro-bd{ top:0; position:absolute; box-sizing:border-box; margin-top:0 !important;}
.pro-page{ position:relative;}
html.openPro #proPage { visibility: visible; opacity:1; transition:560ms;}
html.openPro .pro-bd { opacity: 1; -webkit-animation:flipInX .8s ease-in-out both;-moz-animation:flipInX .8s ease-in-out both;-ms-animation:flipInX .8s ease-in-out both; animation:flipInX .8s ease-in-out both; visibility: visible;}

@-webkit-keyframes flipInX
{
  0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}
  40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}
  70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}
  100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}
}
 @keyframes flipInX
 {
  0%{-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}
  40%{-webkit-transform:perspective(400px) rotateX(-10deg);-ms-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}
  70%{-webkit-transform:perspective(400px) rotateX(10deg);-ms-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}
  100%{-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}
}
 
.memberView{ margin:auto; background:#fff; box-shadow: 0 0 21px rgba(0,0,0,0.15); border-top: 6px solid #2692d9;}
.recolite{ padding-bottom:0;}
.recourewr{ padding:62px 84px 0 70px; font-family: "微软雅黑";}
.recouret{ margin-bottom:55px;}
.recoure-info{ float:left;}
.recoure-info.recoure-info1{ width:48%;}
.recoure-info.recoure-info3{ float: right;}
.recoure-info span{ display:block; color:#969696; font-size:14px; line-height:1; margin-bottom:16px;}
.recoure-info strong{ display:block; color:#000000; font-size:32px; line-height:1; font-weight:normal;}
.posite h3{ color:#000000; font-size:14px; line-height:1; padding-bottom:10px; border-bottom:1px solid #7f7f7f; margin-bottom:30px;}
.posite p{ color:#5a5a5a; font-size:14px;}
.hdhapp{ margin-top:100px; border-top:1px solid #7f7f7f; padding: 14px 0 26px;}
.hdhapp p{ color:#646464; font-size:14px;}

.address-box{ padding: 114px 0 208px; background: #f9f9f9;}
.addressbox{ margin-top: 90px;}
.addinfo{ width: 33.3333%; float: left; text-align: center;}
.addinfo b{ display: block; width: 69px; height: 69px; border-radius: 50%; margin: auto; position: relative; background: #2692d9;}
.addinfo b img{ display: block; max-width: 80%; max-height: 80%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.addinfo small{ display: block; text-align: center; color: #b3b3b3; font-size: 14px; font-weight: bold; margin-top: 12px; line-height: 1; margin-bottom: 28px; text-transform: uppercase;}
.addinfo span{ display: block; line-height: 1.2; text-align: center; color: #666666; font-size: 18px; font-family: "微软雅黑";}
.maps{ height: 660px;}
.anchorBL{ display: none !important;}
.BMap_mask{ background: rgba(30,117,174,0.3) !important;}
.BMap_bubble_title{ color: #2692d9 !important; font-size: 16px;}

.error-box{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.error{ position: absolute; left: 50%; margin-left: -600px; margin-top: -220px; font-family: "微软雅黑"; top: 50%; text-align: center;}
.error img{ display: block; margin: auto; max-width: 50%;}
.error h2{ text-align: center; color: #0088d6; font-size: 30px; line-height: 1.2; margin-top: 40px; margin-bottom: 6px;}
.error small{ display: block; text-align: center; line-height: 1; color: #0088d6; font-size: 22px; font-family: arial; text-transform: uppercase; margin-bottom: 40px; font-family: arial;}
.back a{ display: inline-block; margin: 0 18px; color: #0088d6; font-size: 12px; text-decoration: underline;}
.back a:hover{ color: #023874;}
.news .checkmore{ margin-top: 50px;}
.elegant1 .elegantli{ margin-top:0;}
.elegant1 .elegantli .distance{margin-top:54px;}