@charset "utf-8";
/* 
 * Project Name:本草堂
 * Author:shawn
 * Date:2018-06-13
 */
@font-face {
  font-family: "PFDinTextCompPro-Regular";
  src: url("fonts/PFDinTextCompPro-Regular.woff2") format("woff2"),
       url("fonts/PFDinTextCompPro-Regular.woff") format("woff"),
       url("fonts/PFDinTextCompPro-Regular.ttf") format("truetype"),
       url("fonts/PFDinTextCompPro-Regular.eot") format("embedded-opentype"),
       url("fonts/PFDinTextCompPro-Regular.svg") format("svg");
}

@font-face {
  font-family: "PFDinTextCompPro-XThin";
  src: url("fonts/PFDinTextCompPro-XThin.woff2") format("woff2"),
       url("fonts/PFDinTextCompPro-XThin.woff") format("woff"),
       url("fonts/PFDinTextCompPro-XThin.ttf") format("truetype"),
       url("fonts/PFDinTextCompPro-XThin.eot") format("embedded-opentype"),
       url("fonts/PFDinTextCompPro-XThin.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;}

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-box{ width: 100%; position: fixed; left: 0; top: 0; z-index: 99; background: #fff;}
.header-box.scoll .header{ box-shadow: 0 0 5px rgba(0,0,0,0.3);}
/* .header-box.scoll .header-top{ height: 0px;} */
.header-box.scoll .header-top{ height: auto;}
.header{ position: absolute; left: 0; top: 0; width: 100%; background: #fff;}
.header-top{ border-bottom: 1px solid #e5e5e5; padding: 0 125px; transition: 0.32s; height: auto; overflow: hidden;}
.welcome{ float: left; color: #9e9e9e; font-size: 14px; line-height: 39px;}
.welcome span{color: #7c7c7c;}
.bz{ float: left; 
  /* color: #666666; */
  color: red;
 font-size: 14px;font-weight: 600; line-height: 20px;}
.hlist{ float: right; margin-top: 13px;}
.hlist li{ float: left; border-right: 1px solid #aeadad;}
.hlist li:last-child{ border-right: none;}
.hlist li a{ display: block; padding: 0 14px; color: #9f9e9e !important; font-size: 14px; line-height: 15px;}
.hlist li a:hover{ color: #fdb813;}

.navigatie{ position: fixed; right: 0; top: 0; display: none; width: 70px; overflow: hidden; transition: 0.78s cubic-bezier(0.19, 1, 0.22, 1);}
.header.show .navigatie{ width: 310px;}
.header.show .navigatie .navigetewr{ height: 100vh; transition: 0s;}
.header.show .navigatiebg{ opacity: 1; visibility: visible; transition: 0.78s 0.2s;}
.navigatiebg{ width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: fixed; left: 0; top: 0; z-index: -1; transition: 0.78s 0s; opacity: 0; visibility: hidden;}
.navigetewr{ position: relative; transition:0s 0.78s; height: 100%;}
.menubtn{ width:70px; height:60px; background:#fdb813; 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 { background: #044694;}
.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/arrow4.png") center no-repeat; opacity: 0; visibility: hidden; transition: 0.38s;}
.menulist >li.on >a{ background: #fdb813; 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: 14px;}


.nav-box{ padding: 0 138px 0 125px;}
.logo{ display: block; width: 166px; height: auto; float: left; margin-top: 16px;}
.nav{ float: right; margin-top: -1px;}
.nav li{ position: relative; float: left;}
.nav li:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fdb813; -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 a{ display: block; height: 86px; line-height: 86px; color: #686868; font-size: 17px; font-weight: bold; padding: 0 27px; position: relative;}
.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;}
.mtop{ height: 125px;}
.banner-box{ position: relative; overflow: hidden;}
.banner .slick-list{ position: relative; z-index: 3;}
.banner .item{ position: relative; width: 100%; overflow: hidden; float: left;}
.banner .item figure{ display: block; overflow: hidden; line-height: 0;}
.banner .item figure img{ width: 100%; height: auto; display: block; position: relative;}
.banner .item.slick-current figure img{ -webkit-animation: scaleUpDown 4.4s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940); animation: scaleUpDown 4.4s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940); }

@-webkit-keyframes scaleUpDown {
    from { -webkit-transform: scale(1.08); transform: scale(1.08); }
    to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scaleUpDown {
    from {transform: scale(1.08); transform: scale(1.08); }
    to { transform: scale(1); transform: scale(1); }
}
.btext{ position: absolute; left: 50%; margin-left: -600px; top: 22.2%; z-index: 10;}
.btext small{ display: block; line-height: 0.95; color: #044694; font-size: 30px; font-family: "PFDinTextCompPro-Regular"; margin-bottom: 30px; opacity: 0; visibility: hidden; transform: translateY(55px); -webkit-transform: translateY(55px); -moz-transform: translateY(55px);}
.btext h3{ color: #044694; font-size: 45px; font-weight: bold; line-height: 1.2; margin-bottom: 15px; opacity: 0; visibility: hidden; transform: translateY(55px); -webkit-transform: translateY(55px); -moz-transform: translateY(55px);}
.btext span{ display: block; line-height: 1; color: #044694; font-size: 20px; opacity: 0; visibility: hidden; transform: translateY(55px); -webkit-transform: translateY(55px); -moz-transform: translateY(55px);}
.banner .item.slick-current .btext small{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); transition: 0.58s 0.15s;}
.banner .item.slick-current .btext h3{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); transition: 0.58s 0.3s;}
.banner .item.slick-current .btext span{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); transition: 0.58s 0.5s;}
.banner .slick-dots{ position: absolute; left: 50%; margin-left: -600px; top: 418px; z-index: 20; line-height: 1; height: 10px;} 
.banner .slick-dots li:first-child{ margin-left: 4px;}
.banner .slick-dots li{ float: left; margin-right: 10px; line-height: 1; height: 10px;}
.banner .slick-dots li button{ padding: 0; margin: 0; border: none; outline: none; width: 10px; height: 10px; border-radius: 5px; text-indent: 9999px; overflow: hidden; background: #044694; cursor: pointer; transition: 0.4s;}
.banner .slick-dots li.slick-active button{ width: 26px; background: #fdb813;}
.scolldonw{ width: 48px; height: 48px; border-radius: 50%; border: 1px solid #074894; position: absolute; left: 50%; margin-left: -600px; bottom: 32px; z-index: 15;}
.scolldonw:before{ content: ""; width: 7px; height: 22px; background: url("../images/arrow1.png") center no-repeat; position: absolute; left: 50%; margin-left: -3px; top: 13px; z-index: 20; animation:moveDownSpot 1000ms infinite; -webkit-animation:moveDownSpot 1000ms infinite; -moz-animation:moveDownSpot 1000ms infinite;}
@keyframes moveDownSpot {
	from{
		opacity: 1;
		top: 10px;
	}
	to{
		opacity: 0;
		top: 17px;
	}
}

.select1{ position: relative;}
.trailer{ width: 50%; float: left; 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: -45px; top: 50%; margin-top: -45px; z-index:10;}
.video span{ display:block; width:55px; height:55px; 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:10px; 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;}

.informate{ width: 50%; height: 100%; position: absolute; left: 50%; top: 0; background: #fff;}
.informatewr{ padding: 5% 17.7% 0 9.6666%;}
.informatein{ display: none;}
.informatein:first-child{ display: block;}
.inforbtn{ margin-bottom: 5%;}
.inforbtn span{ display: block; float: left; margin-right: 36px; color: #888888; font-size: 18px; font-weight: bold; position: relative; padding-left: 24px; cursor: pointer; transition: 0.42s;}
.inforbtn span:before{ content: ""; width: 10px; height: 10px; border: 2px solid #888888; position: absolute; left: 0; top: 50%; margin-top: -7px; border-radius: 50%; transition: 0.42s;}
.inforbtn span.on,.inforbtn span:hover{ color: #014099;}
.inforbtn span.on:before,.inforbtn span:hover:before{ border-color: #014099;}

.informateli li{ margin-bottom: 14px;}
.informateli li span{ display: block; float: left; color: #666666; font-size: 16px; width: 76.81%; transition: 0.4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.informateli li time{ display: block; float: right; color: #666666; font-size: 16px; transition: 0.4s;}
.informateli li:hover span{ color: #044694;}
.informateli li:hover time{ color: #044694;} 
.checkmore{ padding-top: 2%;}
.checkmore a{ display: block; padding-left: 23px; width: 101px; height: 28px; line-height: 28px; color: #888888; font-size: 14px; border: 1px solid #888888; position: relative; z-index: 3;}
.checkmore a:after{ content: ""; width: 5px; height: 9px; background: url("../images/arrow2.png") center no-repeat; position: absolute; left: 93px; top: 50%; margin-top: -4px; transition: 0.3s;}
.checkmore a:before{ content: ""; width: 100%; height: 100%; background: #014099; position: absolute; left: 0; top: 0; -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; z-index: -1;}
.checkmore a:hover{ color: #fff; border-color: #014099;}
.checkmore a:hover:after{ 
  /* background: url("../images/arrow6.png") center no-repeat; */
   left: 95px;}
.checkmore a:hover:before{ transform:scaleY(1); -webkit-transform:scaleY(1); transform-origin:left 0; -webkit-transform-origin:left 0; visibility:visible\9;}
.info{ position: relative; width: 25%; float: left; line-height: 1;}
.info figure{ display: block; line-height: 1; overflow: hidden; position: relative;}
.info figure mark{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #000; filter:alpha(opacity=50); background: rgba(0,0,0,0.5); z-index: 2; transition: 0.67s;}
.info figure img{ display: block; width: 100%; height: auto; line-height: 0; transition: 0.7s;} 
.info span{ display: block; text-align: center; color: #fff; font-size: 18px; font-weight: bold; width: 100%; position: absolute; left: 0; line-height: 1; bottom: 36px; z-index: 4;}
.infodown{ width: 100%; position: absolute; text-align: center; left: 0; bottom: 40px; z-index: 4;}
.infodown strong{ display: block; line-height: 1; color: #fff; font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 18px;}
.infodown p{ text-align: center; line-height: 1; color: #fff; font-size: 14px; margin-bottom: 14px;}
.infodown b{ display: inline-block; margin: auto; line-height: 1; color: #ffffff; font-size: 14px; padding-bottom: 4px; position: relative;}
.infodown b:before{ content: ""; width: 100%; height: 1px; background: #fff; 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;}
.info:hover figure img{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.info:hover figure mark{ filter:alpha(opacity=0); opacity: 0;}
.info:last-child:hover figure img{ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1);}
.info:hover .infodown b:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}

.partner-box{ padding: 42px 0 27px; background: #888888;}
.partnertop{ border-bottom: 1px solid #b1b1b1;}
.partnerbtn{ float: left;}
.partnerbtn span{ display: block; float: left; margin-right: 42px; position: relative; line-height: 1; padding: 13px 13px 23px; color: #fff; font-size: 16px; font-weight: bold; cursor: pointer;}
.partnerbtn span:before{ content: ""; width: 100%; height: 4px; background: #fdb813; position: absolute; left: 0; bottom: 0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .56s cubic-bezier(.215,.61,.355,1); transition:-webkit-transform .56s cubic-bezier(.215,.61,.355,1); transition:transform .56s cubic-bezier(.215,.61,.355,1); transition:transform .56s cubic-bezier(.215,.61,.355,1),-webkit-transform .56s cubic-bezier(.215,.61,.355,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9;}
.partnerbtn span:hover,.partnerbtn span.on{ color: #fdb813;}
.partnerbtn span:hover:before,.partnerbtn span.on:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}

.partners{ width: 1214px; margin: auto; margin-top: 36px; position: relative;}
.parterinfo{ position: absolute; width: 100%; left: 0; top: 0; opacity: 0; visibility: hidden;}
.parterinfo.on{ opacity: 1; visibility: visible; transition: 0.54s; position: relative;}
.parterin{ float: left;}
.parterin a{ display: block; margin: 0 7px 23px; position: relative; background: #fff; height: 94px;}
.parterin a:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 3px solid #fdb813; box-sizing: border-box; opacity: 0; visibility: hidden; transition: 0.48s;}
.parterin a img{ display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; max-width: 88%; max-height: 88%; transition: 0.5s;}
.parterin a:hover:before{ opacity: 1; visibility: visible;}
.parterin a:hover img{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.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;}
.parterinfo .slick-arrow{ display: block; padding: 0; margin: 0; border: none; outline: none; width: 26px; height: 26px; border-radius: 50%; position: absolute; text-indent: 9999px; overflow: hidden; cursor: pointer; transition: 0.48s; top: -89px;}
.parterinfo .slick-arrow.slick-prev{ right: 36px; background: url("../images/prev.svg") center no-repeat;}
.parterinfo .slick-arrow.slick-prev:hover{ background: url("../images/prev.svg") center no-repeat;}
.parterinfo .slick-arrow.slick-next{ right: 7px; background: url("../images/next.svg") center no-repeat;}
.parterinfo .slick-arrow.slick-next:hover{ background: url("../images/next.svg") center no-repeat;}

.footer-box{ padding: 45px 0 64px; position: relative;}
.footerle{ width: 64%; float: left;}
.address{ margin-bottom: 38px;}
.addretop{ margin-bottom: 3px;}
.addretop span{ display: block; float: left; margin-right: 24px; color: #999999; font-size: 14px;}
.addressd p{ color: #999999; font-size: 14px;}
.addressd p a{ display: inline-block; position: relative; top: 3px; width: 24px; height: 21px; margin-left: 12px; background: url("../images/map.png") center no-repeat;}

.retive{ position:relative; display: inline-block;}
.retive span{ display:block; padding-left:22px; width:216px; height:38px; line-height:38px; color:#666666; font-size:14px; position:relative; cursor:pointer; border:1px solid #999999;}
.retive span:before{ content:""; width:11px; height:6px; background:url("../images/arrow3.png") center no-repeat; position:absolute; right:19px; top:50%; margin-top:-3px; transition:0.35s cubic-bezier(.215,.61,.355,1); -webkit-transition:0.35s cubic-bezier(.215,.61,.355,1); -ms-transition:0.35s cubic-bezier(.215,.61,.355,1);}
.retive span.on:before{ transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg);}
.retiveli{ position:absolute; width:238px; left:0; bottom:39px; border:1px solid #999999; border-bottom:none; background:#fff; display:none;}
.retiveli li{ border-bottom:1px solid #999999;}
.retiveli li a{ display:inline-block; margin-left:22px; height:38px; line-height:38px; font-size: 14px; color:#666666;}
.retiveli li a:hover{ color:#fdb813;}
.copyright{ margin-top: 18px;}
.copyright,.footer_bot{ text-align: center;}
.copyright p{ color: #808080; font-size: 14px;}
.footer_bot p{ color: #808080; font-size: 14px;}
.copyright p a{ display: inline-block; margin-left: 22px; color: #808080;}
.footer_bot p a{ display: inline-block; margin-left: 5px; color: #808080;}
.copyright p a:hover,.footer_bot p a:hover{ color: #fdb813;}
.eqs{ text-align: center; float: right; margin-top: 12px;}
.eqs img{ display: block; width: 123px; height: auto; line-height: 0;}
.eqs span{ display: block; text-align: center; color: #666666; font-size: 14px; line-height: 1; margin-top: 20px;}
.scolltop{ display: block; width: 40px; height: 38px; position: absolute; right: 47px; bottom: 69px; z-index: 5; background: #888888; transition: 0.5s; cursor: pointer;}
.scolltop:before{ content: ""; width: 14px; height: 19px; position: absolute; left: 50%; margin-left: -7px; top: 11px; background: url("../images/arrow4.png") center no-repeat; transition: 0.35s;}
.scolltop:hover{ background: #fdb813;}
.scolltop:hover:before{ top: 8px;}


.pbanner{ position: relative; overflow: hidden;} 
.pbanner figure{ display: block; line-height: 1; overflow: hidden;}
.pbanner figure img{ display: block; width: 100%; height: auto; line-height: 0;}
.ptext{ position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -64px; text-align: center;}
.ptext h3{ line-height: 1; color: #fff; font-size: 36px; font-weight: bold; text-align: center; margin-bottom: 20px;} 
.ptext small{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 36px; font-family: "PFDinTextCompPro-Regular"; padding-bottom: 36px; position: relative; text-transform: uppercase;}
.ptext small:before{ content: ""; width: 50px; height: 4px; background: #fff; position: absolute; left: 50%; margin-left: -25px; bottom: 0;}
.levalmenus{ position: relative; line-height: 0; overflow: hidden; background: #044694; text-align: center;}
.menusd{ display: inline-block; margin: auto; line-height: 0;}
.menusd li{ float: left; position: relative;}
.menusd li a{ display: block; width: 126px; height: 59px; text-align: center; line-height: 59px; position: relative; color: #ffffff; font-size: 17px; transition: 0.5s; z-index: 4;}
.menusd li a:before{ content: ""; width: 100%; height: 4px; background: #fdbf2a; position: absolute; left: 0; bottom: 0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .54s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .54s cubic-bezier(.4,0,.2,1); transition:transform .54s cubic-bezier(.4,0,.2,1); transition:transform .54s cubic-bezier(.4,0,.2,1),-webkit-transform .54s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9; z-index: -1;}
.menusd li a:hover,.menusd li.active a{ background: #366ba9; background: rgba(255,255,255,0.2);}
.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;}

.introducte-box{ padding: 156px 0 130px; background: #f6f6f6;}
.introtop{ margin-bottom: 60px; text-align: center;}
.introtop h2{ text-align: center; color: #333333; font-size: 48px; line-height: 1.2; margin-bottom: 34px;}
.introtop p{ width: 496px; text-align: center; color: #666666; font-size: 15px; margin: auto;}
.introdown{ text-align: center;}
.introble{ display: inline-block; margin: auto; margin-bottom: 66px;}
.introinfo{ float: left; margin-left: 72px;}
.introinfo:first-child{ margin-left: 0;}
.introinfo span{ display: block; color: #666666; font-size: 14px; text-align: center; line-height: 1;}
.introinfo span b{ display: inline-block; font-weight: normal; font-family: "PFDinTextCompPro-Regular"; margin-right: 5px; color: #1860a4 transparent; font-size: 89px; color: transparent; color: #1860a4\9; background-image: -webkit-gradient(linear, 0 bottom, right top, from(rgba(26, 86, 169, 1)), to(rgba(31, 148, 193, 1)));  background-image: -o-linear-gradient(top, #1a56a9, #1f94c1); -webkit-background-clip: text; background-clip: text;-o-background-clip: text; }
.introinfo p{ line-height: 1; color: #666666; font-size: 14px;}
.readmore{ text-align: center;}
.readmore a{ display: block; margin: auto; width: 151px; height: 35px; text-align: center; line-height: 35px; color: #666666; font-size: 15px; font-family: "PFDinTextCompPro-Regular"; border: 2px solid #19559c; font-size: 15px; text-transform: uppercase; position: relative; z-index: 3;}
.readmore a:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #19559c; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .54s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .54s cubic-bezier(.4,0,.2,1); transition:transform .54s cubic-bezier(.4,0,.2,1); transition:transform .54s cubic-bezier(.4,0,.2,1),-webkit-transform .54s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9; z-index: -1;}
.readmore a:hover{ color: #fff;}
.readmore a:hover:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}

.history-box{ padding: 76px 0 56px; background-attachment: fixed; background-position: center;}
.history{ width: 965px; margin: auto;}
.historys{ margin-top: 60px;}
.historytt h3{ text-align: center; line-height: 1; color: #fff; font-size: 30px; font-weight: bold; margin-bottom: 8px;}
.historytt small{ display: block; text-align: center; line-height: 1; color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase;}
.hitt{ color: #fff; font-size: 16px; text-align: center; line-height: 1.2;}
.historylist{ position: relative; text-align: center; margin-top: 18px;}
.hisicon{ display: block; width: 11px; height: 14px; margin: auto; background: url("../images/arrow7.png") center no-repeat;}
.histlist{ margin-top: 8px; padding-bottom: 80px; position: relative;} 
.histlist:before{ content: ""; width: 1px; height: 100%; background: #fff; position: absolute; left: 50%; top: 0;}
.historyin:first-child .historywr{ padding: 55px 0 27px;}
.historywr{ padding: 68px 0 27px; width: 607px; float: right; border-bottom: 1px solid #fff;}
.historywr b{ display: block; line-height: 1; float: left; color: #fdb813; font-size: 50px; font-family: "PFDinTextCompPro-XThin";}
.historytext{ width: 72.3%; float: right; text-align: left; padding-top: 10px; font-weight: normal;} 
.historytext p{ color: #ffffff; font-size: 14px; line-height: 2; margin-bottom: 4px;}
.historytext p:last-child{ margin-bottom: 0;}
.historyin2 .historywr{ float: left;}
.historyin2 .historywr b{ float: right;}
.historyin2 .historywr .historytext{ float: left;}
.historylist .more{ display: block; width: 52px; height: 53px; margin: auto; text-align: center; line-height: 53px; color: #ffffff; font-size: 16px; font-family: "PFDinTextCompPro-Regular"; position: relative; z-index: 3; text-transform: uppercase;}
.more:before{ content: ""; width: 52px; height: 53px; position: absolute; z-index: -1; left: 0; top: 0; background: url("../images/radius.png") center no-repeat; transition: 0.75s;}
.more:hover:before{ transform: rotate(360deg);}

.honor-box{ padding: 98px 0 148px;}
.historytt1 h3{ color: #333333;}
.historytt1 small{ color: #828282;}
.honors{ width: 1236px; position: relative; margin-left: -18px; margin-top: 68px;}
.honorin{ float: left;}
.honorin figure a{ display: block; line-height: 1; margin: 18px; overflow: hidden; cursor:inherit;}
.honorin figure img{ display: block; width: 100%; height: auto; transition: 0.68s;}
.honorin figure img:hover{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.honors .slick-dots{ text-align: center; margin-top: 50px; line-height: 0;}
.honors .slick-dots li{ display: inline-block; margin-left: 40px; height: 31px; width: 7px; position: relative; line-height: 1;}
.honors .slick-dots li:first-child{ margin-left: 0;}
.honors .slick-dots li button{ text-indent: 99999px; overflow: hidden; width: 7px; height: 7px; background: #828282; position: absolute; left: 0; top: 50%; margin-top: -3px; transition: 0.4s; border: none; margin: auto; padding: 0; outline: none; cursor: pointer;}
.honors .slick-dots li.slick-active button{ height: 100%; top: 0; background: #fdb813;}
.honors .slick-arrow{ display: block; border: none; padding: 0; margin: 0; outline: none; width: 87px; height: 45px; position: absolute; bottom: -6px; z-index: 5; text-indent: 99999px; overflow: hidden; cursor: pointer; transition: 0.45s;}
.honors .slick-arrow.slick-prev{ left: 16px; background: #a0a0a0 url("../images/arrow8.png") center no-repeat;}
.honors .slick-arrow.slick-next{ right: 16px; background: #a0a0a0 url("../images/arrow9.png") center no-repeat;}
.honors .slick-arrow.slick-prev:hover{ background: #fdb813 url("../images/arrow8.png") center no-repeat;}
.honors .slick-arrow.slick-next:hover{ background: #fdb813 url("../images/arrow9.png") center no-repeat;}

.responsibility-box{ padding: 96px 0 126px; background-attachment: fixed; background-position: center;}
.responsibes{ margin-top: 52px; margin-bottom: 100px;}
.responsibes p{ width: 700px; margin: auto; text-align: center; color: #808080; font-size: 14px; line-height: 2;}
.responsible{ margin-bottom: 66px;}
.responsible li{ float: left; width: 30.92%; float: left; margin-left: 3.62%; position: relative;}
.responsible li:first-child{ margin-left: 0;}
.responsible li figure{ display: block; line-height: 1; position: relative; overflow: hidden;}
.responsible li figure img{ display: block; width: 100%; height: auto; line-height: 0; transition: 0.68s;}
.responsible li figure mark{ display: block; width: 100%; height: 100%; background: #fdb813; filter:alpha(opacity=90); background: rgba(253,184,19,0.9); position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transition: 0.65s;}
.responsible li figure i{ display: block; width: 47px; height: 47px; position: absolute; left: 50%; margin-left: -23px; top: 50%; margin-top: -23px; z-index: 4; opacity: 0; visibility: hidden; transition: 0.54s;}
.responsible li figure i:before{ content: ""; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; top: 23px;}
.responsible li figure i:after{ content: ""; height: 100%; width: 1px; background: #fff; position: absolute; top: 0; left: 23px;}
.responsible li span{ display: block; position: relative; height: 90px; line-height: 90px; color: #000000; font-size: 16px; background: #fff;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;}
.responsible li span:before{ content: ""; width: 100%; height: 2px; background: #fdb813; position: absolute; left: 0; bottom: 0; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .74s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .74s cubic-bezier(.4,0,.2,1); transition:transform .74s cubic-bezier(.4,0,.2,1); transition:transform .74s cubic-bezier(.4,0,.2,1),-webkit-transform .74s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9;}
.responsible li:hover figure img{ transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06);}
.responsible li:hover figure mark{ opacity: 1; visibility: visible;}
.responsible li:hover figure i{ opacity: 1; visibility: visible; transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg);}
.responsible li:hover span:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}

.ptext.article-block h3,.ptext.article-block small{ opacity: 0; visibility: hidden; transform: translateY(54px); -webkit-transform: translateY(54px); -moz-transform: translateY(54px); transition: 0.55s;}
.ptext.article-block small{ transition-delay: 0.2s;}
.ptext.articleShow h3,.ptext.articleShow small{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.ptext.article-block small:before{ width: 0; margin-left: 0; transition: 0.76s 0.35s;}
.ptext.articleShow small:before{ width: 50px; margin-left: -25px;}
.introducts{ padding: 210px 0 150px; position: relative; background: #f6f6f6 url("../img/27.jpg") center top no-repeat; background-size: 100% auto;}
.inspan{ display: block; width: 53px; height: 53px; background: #fdbf2a; border-radius: 50%; position: absolute; left: 50%; margin-left: -26px; top: -26px; z-index: 5;}
.inspan:before{ content: ""; width: 14px; height: 19px; position: absolute; left: 50%; margin-left: -7px; top: 17px; background: url("../images/arrow10.png") center no-repeat;}
.introductwr{ width: 854px; margin: auto; background: #fff; border-top: 6px solid #fdbf2a; padding: 80px 58px;}
.introductwr p{ color: #666666; font-size: 15px; text-align: justify;}

.responsibed{ padding: 160px 0 130px; background: #f6f6f6;}
.responsible1{ width: 1242px; margin-left: -21px;}
.responsible1 li{ width: 33.3333%; float: left; margin-bottom: 45px; margin-left: 0;}
.responsible1 li a{ display: block; margin: 0 21px;}
.pages{ text-align: center;}
.pages a{ display: inline-block; vertical-align: middle; width: 42px; height: 40px; text-align: center; line-height: 40px; color: #666666; font-size: 16px; border: 1px solid #dddddd; margin-left: 10px;}
.pages a:first-child{ margin-left: 0; width: 70px;}
.pages a:last-child{ width: 70px;}
.pages a:hover,.pages a.active{ background: #fdbf2a; border-color: #fdbf2a; color: #fff;}

.responsibefix{ background: #f6f6f6; padding-bottom: 128px;}
.resposiblefexl{ position: relative;}
.responsiblewr{ width: 972px; margin: auto; margin-top: -296px; position: relative; z-index: 5;}
.responsible-view{ padding: 0 58px 165px; background: #fff; border-top: 6px solid #fdbf2a; box-shadow: 0 0 8px rgba(0,0,0,0.1); margin-bottom: 70px;}
.responsittle{ padding: 60px 0 38px; border-bottom: 1px solid #cccccc;}
.responsittle h2{ text-align: center; line-height: 1.2; color: #000000; font-size: 26px; font-weight: bold;}
.respondown{ text-align: center; margin-top: 12px;}
.respondown span{ display: inline-block; color: #909090; line-height: 1; vertical-align: middle; margin: 0 9px;}
.responsibletext{ padding: 85px 0 0;}
.responsibletext p{ color: #5e5e5e; font-size: 14px; line-height: 2;}
.responsibletext img{ max-width: 100%; width: auto !important; height: auto !important;}
.prevpage{ position: fixed; top: 80%; margin-top: -42px; z-index: 10;}
.prevpage.flexdonw{ position: absolute; top: auto; bottom: 15%;}
.prevpage a{ display: block; padding-top: 55px; position: relative; height: 29px; width: 78px; background: #fff; color: #909090; text-align: center;}
.prevpage a:before{ content: ""; width: 10px; height: 19px; position: absolute; left: 50%; margin-left: -5px; top: 18px; transition: 0.45s;}
.prevpage.prevs{ left: 50%; margin-left: -600px;}
.prevpage.nexts{ right: 50%; margin-right:-600px;}
.prevpage.prevs a:before{ background: url("../images/prev2.png") center no-repeat;}
.prevpage.nexts a:before{ background: url("../images/next2.png") center no-repeat;}
.prevpage a:hover{ background: #044694; color: #fff;}
.prevpage.prevs a:hover:before{ background: url("../images/prev3.png") center no-repeat;}
.prevpage.nexts a:hover:before{ background: url("../images/next3.png") center no-repeat;}

.news-box{ padding: 100px 0 110px; background: #f6f6f6;}
.news{ margin-bottom: 110px;}
.news li{ position: relative;}
.news li:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; -webkit-transition:-webkit-transform .74s cubic-bezier(.215,.61,.355,1); transition:-webkit-transform .74s cubic-bezier(.215,.61,.355,1); transition:transform .74s cubic-bezier(.215,.61,.355,1); transition:transform .74s cubic-bezier(.215,.61,.355,1),-webkit-transform .74s 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;}
.newswr{ width: 1200px; border-bottom: 1px solid #c5c5c5; padding: 60px 0 64px; transition: 0.35s; margin: auto; position: relative;}
.newswr figure{ display: block; width: 29.5%; float: left; line-height: 1; overflow: hidden;}
.newswr figure img{ display: block; width: 100%; height: auto; line-height: 0; transition: 0.68s;}
.newstext{ width: 50.8333%; float: left; margin-left: 46px;}
.newstext h3{ color: #414141; font-size: 20px; font-weight: bold; line-height: 1.2; margin-bottom: 16px; margin-top: -3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.newstext p{ color: #414141; font-size: 14px; height: 98px;}
.newstext b{ display: block; width: 151px; height: 35px; text-align: center; line-height: 35px; color: #666666; font-size: 15px; font-family: "PFDinTextCompPro-Regular"; border: 2px solid #19559c; font-size: 15px; text-transform: uppercase; position: relative; z-index: 3; font-weight: normal;}
.newstext b:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #19559c; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .54s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .54s cubic-bezier(.4,0,.2,1); transition:transform .54s cubic-bezier(.4,0,.2,1); transition:transform .54s cubic-bezier(.4,0,.2,1),-webkit-transform .54s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9; z-index: -1;}
.news li:hover:before{ transform:scaleY(1); -webkit-transform:scaleY(1); transform-origin:left 0; -webkit-transform-origin:left 0; visibility:visible\9;}
.news li:hover .newswr{ border-bottom-color: #fff;}
.news li:hover .newstext b{ color: #fff;}
.news li:hover .newstext b:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}
.news li:hover .newswr figure img{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.news li:hover .datas{ background: #044694;}
.datas{ padding-top: 16px; transition: 0.58s; height: 72px; width: 76px; float: right; text-align: center; background: #a9a9a9;}
.datas time{ display: block; line-height: 1; color: #ffffff; font-size: 30px; font-family: "PFDinTextCompPro-XThin"; margin-bottom: 10px;}
.datas b{ display: block; line-height: 1; color: #ffffff; font-size: 20px; font-weight: normal; font-family: "PFDinTextCompPro-XThin";} 

.explain-box{ padding: 168px 0 0; background: #f6f6f6;}
.explaintt{ color: #000000; font-size: 26px; line-height: 1.4; text-align: center;}
.explanwr{ margin-top: 115px; padding: 0 50px;}
.explainin{ width: 50%; float: left; text-align: center;}
.explainin b{ display: block; width: 128px; height: 128px; margin: auto; border-radius: 50%; position: relative; background: #fff;}
.explainin b:before{ content: ""; width: 100%; height: 100%; background: #fdbf2a; position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; visibility: hidden; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transition: 0.68s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: 0.68s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: 0.68s cubic-bezier(0.175, 0.885, 0.32, 1.275);} 
.explainin b img{ display: block; max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 0.45s;}
.explainin b img.hide{ opacity: 0; visibility: hidden;}
.explaind{ margin-top: 32px;}
.explaind strong{ display: block; line-height: 1; text-align: center; color: #000000; font-size: 26px; margin-bottom: 16px; transition: 0.42s;}
.explaind p{ color: #777777; font-size: 16px;}
.explainin:hover b:before{ opacity: 1; visibility: visible; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1);}
.explainin:hover b img.show{ opacity: 0; visibility: hidden;}
.explainin:hover b img.hide{ opacity: 1; visibility: visible;}
.explainin:hover .explaind strong{ color: #fdbf2a;}

.explainlist{ margin-top: 130px;}
.explains{ position: relative; width: 50%; float: left; line-height: 1; overflow: hidden;}
.explains figure{ display: block; line-height: 1; overflow: hidden;}
.explains figure img{ display: block; width: 100%; height: auto; transition: 0.68s;}
.extitle{ display: block; width: 100%; position: absolute; left: 0; padding-top: 154px; height: 67px; bottom: 0; background: url("../images/line1.png") left top repeat-x; color: #ffffff; line-height: 1; font-size: 26px; font-weight: bold; text-indent: 75px; transition: 0.4s;}
.exmark{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4;}
.explainbg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #346499; filter:alpha(opacity=80); background: rgba(4,70,148,0.8); -webkit-transition:-webkit-transform .74s cubic-bezier(.215,.61,.355,1); transition:-webkit-transform .74s cubic-bezier(.215,.61,.355,1); transition:transform .74s cubic-bezier(.215,.61,.355,1); transition:transform .74s cubic-bezier(.215,.61,.355,1),-webkit-transform .74s 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;}
.expainwr{ padding: 60px 0 0 70px; position: relative; z-index: 2; opacity: 0; visibility: hidden; transition: 0.58s; transform: translateY(38px); -webkit-transform: translateY(38px); -moz-transform: translateY(38px);}
.expainwr h3{ line-height: 1; color: #fff; font-size: 26px; font-weight: bold; padding-bottom: 36px; position: relative; margin-bottom: 40px;}
.expainwr h3:before{ content: ""; width: 53px; height: 3px; background: #fff; position: absolute; left: 0; bottom: 0;}
.expainwr p{ color: #fff; font-size: 15px; font-weight: bold; line-height: 2; width: 70%;}
.explains:hover figure img{ transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05);}
.explains:hover .explainbg{ transform:scaleY(1); -webkit-transform:scaleY(1); transform-origin:left 0; -webkit-transform-origin:left 0; visibility:visible\9;}
.explains:hover .expainwr{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.explains:hover .extitle{ opacity: 0; visibility: hidden;}

.strength{ padding: 75px 0 90px;}
.strengthwr{ margin-top: 43px;}
.strengbtn{ margin-bottom: 80px; text-align: center;}
.strengbtn a{ display: inline-block; width: 130px; height: 34px; border: 1px solid #898989; color: #898989; font-size: 15px; text-align: center; line-height: 34px; position: relative; font-weight: bold; margin: 0 2px;}
.strengbtn a:before{ content: ""; width: 9px; height: 6px; background: url("../images/arrow12.png") center no-repeat; position: absolute; left: 50%; margin-left: -4px; bottom: -6px; opacity: 0; visibility: hidden; transition: 0.4s;}
.strengbtn a:hover,.strengbtn a.active{ background: #044694; border-color: #044694; color: #fff;}
.strengbtn a:hover:before,.strengbtn a.active:before{ opacity: 1; visibility: visible; bottom: -10px;}
.strengli li{ margin-bottom: 75px;}
.strengli li figure{ display: block; line-height: 1; overflow: hidden; width: 47.5%; float: left;}
.strengli li figure img{ display: block; width: 100%; height: auto; line-height: 0;}
.strengfix{ width: 46.5%; float: right;}
.strengfix h3{ color: #343434; font-size: 24px; font-weight: bold; line-height: 1.2; margin-top: -4px; margin-bottom: 20px;}
.strengfix p{ color: #898989; font-size: 15px; 
  /* line-height: 2; */
  line-height: 4vw;
  display: flex;justify-content: space-between;}
 /* 小屏幕 */
@media (max-width: 768px) {
  .element {
    line-height: 3;
  }
}

/* 大屏幕 */
@media (min-width: 1200px) {
  .element {
    line-height: 5;
  }
}
.strengfix span{ text-align: right;}
.strengli li.streng2 figure{ float: right;}
.strengli li.streng2 .strengfix{ float: left;}

.network-box{ padding: 90px 0 140px; background: #f6f6f6;}
.nettable{ margin-top: 98px; margin-bottom: 54px;}
.networks{ border-collapse:collapse;}
.networks thead tr{ background: #044694;}
.networks thead tr th{ color: #ffffff; border-right: 1px solid #c9c9c9; font-size: 16px; font-weight: bold; height: 70px; text-align: center;}
.networks thead tr th.span1{ width: 342px;}
.networks thead tr th.span2{ width: 234px;}
.networks thead tr th.span3{ width: 356px;}
.networks thead tr th.span4{ width: 265px; border-right: none;}
.networks tbody tr td{ color: #777777; font-size: 14px; font-weight: bold; height: 70px; text-align: center; border-bottom: 1px solid #c9c9c9; border-right: 1px solid #c9c9c9;}
.networks tbody tr td:last-child{ border-right: none;}
.networks tbody tr td .mapdit{ display: inline-block; padding-right: 25px; background: url("../images/map1.png") right center no-repeat;}
.networks tbody tr td .mapdit:hover{ color: #044694;}

.idea{ width: 920px; margin: auto; padding: 155px 0 110px;}
.idea h3{ text-align: center; line-height: 1.2; color: #000000; font-size: 30px; font-weight: bold;}
.ideadown{ margin-top: 42px;}
.ideadown p{ color: #666666; font-size: 15px; line-height: 2; text-align: center;}
.enterprise-box{ padding: 185px 0 170px; background-attachment: fixed; background-position: center;}
.enterpriseli li{ width: 24.4%; float: left; margin-left: 0.8%; position: relative;}
.enterpriseli li:first-child{ margin-left: 0;}
.enterpriseli li figure{ display: block; line-height: 1; overflow: hidden;}
.enterpriseli li figure img{ display: block; width: 100%; height: auto; line-height: 0; transition: 0.65s;}
.enterdown{ padding: 28px 0 32px; background: #fff;}
.enterdown span{ display: block; color: #044694; font-size: 20px; font-weight: bold; text-align: center; line-height: 1; margin-bottom: 8px; text-align: center;}
.enterdown small{ display: block; text-align: center; line-height: 1; color: #919191; font-size: 14px;}
.enterprise{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.enterprise:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #044694; -webkit-transition:-webkit-transform .74s cubic-bezier(.215,.61,.355,1); transition:-webkit-transform .74s cubic-bezier(.215,.61,.355,1); transition:transform .74s cubic-bezier(.215,.61,.355,1); transition:transform .74s cubic-bezier(.215,.61,.355,1),-webkit-transform .74s 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;}
.enterprisewr{ padding: 54px 0 0; position: relative; z-index: 4; text-align: center; opacity: 0; visibility: hidden; transition: 0.65s;}
.enterprisewr b{ display: block; width: 40px; height: 40px; margin: auto; position: relative;}
.enterprisewr b img{ display: block; max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.entertitle{ margin-top: 16px; position: relative; padding-bottom: 60px; margin-bottom: 22px;}
.entertitle:before{ content: ""; width: 1px; height: 28px; background: #fff; position: absolute; left: 50%; bottom: 0;}
.entertitle h3{ line-height: 1; color: #fff; text-align: center; font-size: 20px; margin-bottom: 8px;}
.entertitle small{ display: block; text-align: center; color: #ffffff; font-size: 14px;}
.enterprisewr p{ text-align: center; color: #fff; font-size: 14px;}
.enterpriseli li:hover figure img{ transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06);}
.enterpriseli li:hover .enterprise:before{ transform:scaleY(1); -webkit-transform:scaleY(1); transform-origin:left 0; -webkit-transform-origin:left 0; visibility:visible\9;}
.enterpriseli li:hover .enterprisewr{ opacity: 1; visibility: visible;}

.conctpt{ padding: 96px 0 150px;}
.concetpli{ margin-top: 115px;}
.concetpli li{ width: 15.83%; float: left; margin-left: 5.2125%; text-align: center;}
.concetpli li:first-child{ margin-left: 0;}
.concetpli li b{ display: block; width: 67px; height: 67px; position: relative; border: 2px solid #1873cb; margin: auto; border-radius: 50%; margin-bottom: 35px;}
.concetpli li b img{ display: block; max-width: 80%; max-height: 80%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.concetpli li strong{ display: block; text-align: center; line-height: 1; color: #000000; font-size: 20px; font-weight: bold; margin-bottom: 12px;}
.concetpli li p{ text-align: center; color: #777777; font-size: 14px;}

.laws-box{ padding: 90px 0 88px; background: #f6f6f6;}
.lawslist{ width: 1240px; margin-top: 87px; margin-left: -20px;}
.lawslist li{ width: 50%; float: left; margin-bottom: 32px;}
.lawwr{ margin: 0 20px; border: 1px solid #757575; padding: 56px 8px 0; height: 160px; text-align: center; position: relative;}
.lawwr:before{ content: ""; width: 100%; height: 100%; background: #044694; position: absolute; left: 0; top: 0; -webkit-transition:-webkit-transform .74s cubic-bezier(.215,.61,.355,1); transition:-webkit-transform .74s cubic-bezier(.215,.61,.355,1); transition:transform .74s cubic-bezier(.215,.61,.355,1); transition:transform .74s 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;}
.lawwr b{ display: block; position: relative; text-align: center; line-height: 1; color: #757575; font-size: 54px; font-family: "PFDinTextCompPro-Regular"; margin-bottom: 20px; transition: 0.43s;} 
.lawwr span{ text-align: center; color: #757575; font-size: 18px; position: relative; z-index: 2; transition: 0.43s;}
.lawwr:hover:before{ transform:scaleY(1); -webkit-transform:scaleY(1); transform-origin:left 0; -webkit-transform-origin:left 0; visibility:visible\9;}
.lawwr:hover b,.lawwr:hover span{ color: #fff;}

.journal-box{ padding: 184px 0 140px; background: #f6f6f6;}
.journal-list{ width: 1226px; margin-left: -13px; margin-bottom: 100px;}
.journal-list li{ width: 50%; float: left; margin-bottom: 30px;}
.journal-list li a{ display: block; margin: 0 13px; background: #fff; position: relative;}
.journal-list li a figure{ display: block; line-height: 1; overflow: hidden; width: 33.67%; float: left;}
.journal-list li a figure img{ display: block; width: 100%; height: auto; line-height: 1; transition: 0.58s;}
.journle{ width: 66.33%; float: left; height: 100%; position: absolute; right: 0; top: 0;}
.jourfix{ padding: 26px 22px 0;}
.jourfix h3{ line-height: 1.2; color: #545454; font-size: 16px; font-weight: normal; margin-bottom: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.jourfix p{ color: #a0a0a0; height: 63px; overflow: hidden;}
.jourfix b{ display: block; width: 151px; height: 35px; text-align: center; line-height: 35px; color: #666666; font-size: 15px; border: 2px solid #19559c; font-size: 15px; text-transform: uppercase; position: relative; z-index: 3; font-weight: normal; position: absolute; left: 22px; bottom: 27px;}
.jourfix b:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #19559c; transform-origin:100%; -webkit-transform-origin:100%; -webkit-transition:-webkit-transform .54s cubic-bezier(.4,0,.2,1); transition:-webkit-transform .54s cubic-bezier(.4,0,.2,1); transition:transform .54s cubic-bezier(.4,0,.2,1); transition:transform .54s cubic-bezier(.4,0,.2,1),-webkit-transform .54s cubic-bezier(.4,0,.2,1); transform:scaleX(0); -webkit-transform:scaleX(0); visibility:hidden\9; z-index: -1;}
.news li:hover:before{ transform:scaleY(1); -webkit-transform:scaleY(1); transform-origin:left 0; -webkit-transform-origin:left 0; visibility:visible\9;}
.journal-list li a:hover figure img{ transform: scale(1.06); -webkit-transform: scale(1.06); -moz-transform: scale(1.06);}
.journal-list li a:hover .jourfix b{ color: #fff;}
.journal-list li a:hover .jourfix b:before{ transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); transform-origin:0; -webkit-transform-origin:0; visibility:visible\9;}

.qrrows{ display: block; width: 20px; height: 24px; margin: auto; margin-top: 50px; background: url("../images/arrow12.png") center no-repeat; animation:moveDownSpot1 1000ms infinite; -webkit-animation:moveDownSpot1 1000ms infinite; -moz-animation:moveDownSpot1 1000ms infinite;}
@keyframes moveDownSpot1 {
	from{
		opacity: 1;
		transform: translateY(5px);
	}
	to{
		opacity: 0;
		transform: translateY(12px);
	}
}
.recuiteimg{ line-height: 1; overflow: hidden;}
.recuiteimg img{ display: block; width: 100%; height: auto; line-height: 0;}
.recuite-box{ padding: 92px 0 178px; background: #f6f6f6;}
.recuitewr{ margin-top: 35px;}
.dits{ text-align: center; color: #2f2f2f; font-size: 14px;}
.recuites{ margin-top: 80px; padding: 0 28px 0 68px;}
.recuitetle{ margin-bottom: 20px;}
.recuitetle span{ display: block; float: ; line-height: 1; color: #969696; font-size: 16px; float: left;}
.recuitetle span.span1{ padding-left: 78px; width: 182px;}
.recuitetle span.span2{ width: 165px;}
.recuitetle span.span3{ width: 142px;}
.recuitetle span.span4{ width: 170px;}
.recuitetle span.span5{ width: 198px;}
.recuiteinfo{ margin-bottom: 9px;}
.recuitetop{ position: relative; background: #838383; cursor: pointer; transition: 0.5s;}
.recuitetop b{ display: block; width: 21px; height: 21px; position: absolute; left: -35px; top: 50%; margin-top: -10px; background: url("../images/add.png") center no-repeat; transition: 0.4s;}
.recuitetop span{ display: block; height: 47px; line-height: 47px; color: #ffffff; font-size: 14px; float: left;}
.recuitetop span.span1{ width: 120px; padding-left: 64px;}
.recuitetop span.span2{ width: 216px; text-align: center;}
.recuitetop span.span3{ width: 84px; text-align: center;}
.recuitetop span.span4{ width: 230px; text-align: center;}
.recuitetop span.span5{ width: 115px; text-align: center;}
.recuitetop span.span6{ width: 275px; text-align: center;}
.recuitetop:hover,.recuitetop.active{ background: #044694;}
.recuitetop.active b{ transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);}
.recuitedown{ background: #fff; display: none; border: 1px solid #e9e9e9; border-top: none; padding: 30px 60px 72px;}
.recuitetext{ padding-bottom: 38px; border-bottom: 1px solid #eeeeee;}
.recuitetext p{ color: #969696; font-size: 14px; line-height: 2;}
.reruites{ margin-top: 26px;}
.recuiteles{ float: left;}
.recuiteles p{ color: #969696; font-size: 14px; margin-bottom: 8px;}
.recuiteles a{ display: inline-block; color: #c82126; font-size: 14px; line-height: 1; text-decoration: underline;}
.recuiteles a:hover{ color: #044694;}
.recuiteli{ float: right;}
.recuiteli a{ display: block; float: left; margin-left: 25px;} 
.recuiteli a:first-child{ margin-left: 0;}
.recuiteli a img{ display: block; max-width: 90px; height: auto; transition: 0.36s;}
.recuiteli a img:hover{ transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px);}

.readmore1{ margin-top: 48px;}
.readmore1 a{ border:1px solid #838383; font-family: "微軟正黑體"; font-size: 14px;}
.readmore1 a:hover{ border-color: #044694;}

.addresslist{ padding: 94px 0 110px;}
.addrein{ margin-top: 140px; text-align: center;}
.addresin{ width: 20.4%; margin-left: 6.1333%; float: left;}
.addresin:first-child{ margin-left: 0;}
.addresin b{ display: block; width: 67px; height: 67px; border-radius: 50%; border: 1px solid #5d5d5d; position: relative; margin: auto; margin-bottom: 11px;}
.addresin b:before{ content: ""; width: 100%; height: 100%; background: #044694; position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; visibility: hidden; transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transition: 0.68s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: 0.68s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: 0.68s cubic-bezier(0.175, 0.885, 0.32, 1.275);} 
.addresin b img{ display: block; max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 0.38s;}
.addresin span{ display: block; text-align: center; line-height: 1; color: #b3b3b3; font-size: 14px; font-weight: bold; margin-bottom: 26px; text-transform: uppercase; font-weight: bold;}
.addresin p{ text-align: center; color: #666666; font-size: 18px;}
.addresin b img.hide{ opacity: 0; visibility: hidden;}
.addresin:hover b:before{ opacity: 1; visibility: visible; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1);}
.addresin:hover b img.show{ opacity: 0; visibility: hidden;}
.addresin:hover b img.hide{ opacity: 1; visibility: visible;}
.maps{ height: 740px;}
.BMap_bubble_title{ color: #044694; font-size: 16px !important;}
.anchorBL{ display: none !important;}
.BMap_mask{ background: rgba(4,70,148,0.2) !important;}

.trailer.article-block,.informate.article-block{ opacity: 0; visibility: hidden; transform: translateY(68px); -webkit-transform: translateY(68px); -moz-transform: translateY(68px); transition: 0.6s;}
.informate.article-block{ transition-delay: 0.2s;}
.trailer.articleShow,.informate.articleShow{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.select2.article-block .info{ opacity: 0; visibility: hidden; transform: translateY(70px); -webkit-transform: translateY(70px); -moz-transform: translateY(70px); transition: 0.58s;}
.select2.articleShow .info{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.select2.article-block .info:nth-child(2){ transition-delay: 0.2s;}
.select2.article-block .info:nth-child(3){ transition-delay: 0.4s;}
.select2.article-block .info:nth-child(4){ transition-delay: 0.6s;}
.partnertop.article-block,.partners.article-block{ opacity: 0; visibility: hidden; transform: translateY(66px); -webkit-transform: translateY(66px); -moz-transform: translateY(66px); transition: 0.65s 0.12s;}
.partnertop.articleShow,.partners.articleShow{ opacity: 1; visibility: visible; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}