@charset "utf-8";
/* CSS Document */
.mgl46{
  margin-left: 46px;
}
/* header b */
.header_wrap {
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 151;
  padding: 5px 0;
}
.header_wrap.scroll {
  opacity: 0;
  z-index: 149;
  background-color: #fff;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3);
}
.header_wrap.scroll .head_nav a {
  color: #333;
}
.header_wrap.scroll .head_nav.on::before,
.header_wrap.scroll .head_nav:hover::before {
  left: 3px;
  width: calc(100% - 6px);
  background-color: #07A1E3;
  transition: all 0.3s ease-in;
}
.header_wrap.scroll .head_nav.on a,
.header_wrap.scroll .head_nav:hover a {
  color: #07A1E3;
}
.header_wrap.scroll .user_info a {
  color: #282828;
  line-height: 44px;
}
.header_wrap.scroll .login a{
  color: #3078ed;
  border-color: #3078ed;
}
.header_wrap .logo {
  width: 234px;
  height: 78px;
}
.header_wrap .head_nav {
  position: relative;
  margin: 0 13px;
}
.header_wrap .head_nav::before {
  position: absolute;
  content: '';
  bottom: -7px;
  left: calc(50% - 3px);
  height: 2px;
  width: 0;
  background-color: #fff;
  transition: all 0.3s ease-in;
}
.header_wrap .head_nav.on::before,
.header_wrap .head_nav:hover::before {
  left: 3px;
  width: calc(100% - 6px);
  transition: all 0.3s ease-in;
}
.header_wrap .head_nav a {
  display: block;
  line-height: 25px;
  color: #fff;
}
.header_wrap .user_info {
  height: 44px;
}
.header_wrap .user_info img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.header_wrap .user_info a {
  color: #fff;
  line-height: 44px;
}
.header_wrap.scroll {
  box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.06);
}
.header_wrap .head_nav {
  position: relative;
}
.header_wrap .login{
  margin-top: 23px;
}
.header_wrap .login a{
  display: inline-block;
  width: 72px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border: 1px solid #FFFFFF;
  border-radius: 3px;
  font-size: 16px;
  color: white;
  margin-left: 16px;
}
.header_wrap .login a:hover{
  background-color: white;
  color: #3078ed;
}
.header_wrap .head_nav:hover .more_item {
  display: block;
}
.header_wrap .head_nav .more_item {
  display: none;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%);
  width: 80px;
  padding-top: 10px;
}
.header_wrap .head_nav .more_item .list {
  background-color: #fff;
  border-radius: 3px;
  text-align: center;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.18);
}
.header_wrap .head_nav .more_item .list a {
  display: block;
  font-size: 14px;
  color: #222;
  line-height: 36px;
}
.header_wrap .head_nav .more_item .list a:hover {
  color: #07A1E3;
}
.header_wrap.scroll .head_nav.more {
  padding-right: 15px;
  background: url('../images/ty_portal/icon_head_more_scroll.png') center right no-repeat;
}
.header_wrap .head_nav.more {
  padding-right: 15px;
  background: url('../images/ty_portal/icon_head_more.png') center right no-repeat;
}
.header_wrap.scroll .user_down {
  border-color: #5BB2F6;
}
.header_wrap.scroll .user_down:hover a {
  color: #fff;
  background-color: #5BB2F6;
}
.header_wrap.scroll .user_down a {
  color: #319EF4;
  border-radius: 3px;
}
.header_wrap .user_down {
  margin-top: 24px;
  margin-left: 28px;
  border: 1px solid #fff;
  border-radius: 3px;
}
.header_wrap .user_down.login a {
  width: unset;
  padding: 0 20px;
}
.header_wrap .user_down:hover {
  border-color: #fff;
}
.header_wrap .user_down:hover a {
  color: #396FFF;
  background-color: #fff;
}
.header_wrap .user_down a {
  display: block;
  width: 120px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  border-radius: 3px;
}
.header_wrap .user_down a {
  border-radius: 1px;
}
/* header e */

/*banner*/
.m-banner{ height:587px; width:100%; min-width:1200px; position:relative; overflow:hidden; zoom:1;}
.m-banner .w1200{ height:587px; position:relative;}
.m-banner ul{ width:100%; height:587px; }
.m-banner li{ position:absolute; top:0px; left:0px; width:100%; height:587px; display:none;}
.m-banner .banner-li1{ background:url(../images/ty_portal/banner.png) no-repeat center center;}
.m-banner .banner-li2{ background:url(../images/ty_portal/banner2.jpeg) no-repeat center center;}
.m-banner .banner-li3{ background:url(../images/ty_portal/banner2.jpeg) no-repeat center center;}
.m-banner .banner-li4{ background:url(../images/ty_portal/banner2.jpeg) no-repeat center center;}
.m-banner .banner-li5{ background:url(../images/ty_portal/banner2.jpeg) no-repeat center center;}
.m-banner .banner-li6{ background:url(../images/ty_portal/banner2.jpeg) no-repeat center center;}
.m-banner .banner-li7{ background:url(../images/ty_portal/banner2.jpeg) no-repeat center center;}
.m-banner .banner-li8{ background:url(../images/ty_portal/banner2.jpeg) no-repeat center center;}
.m-banner .banner-li9{ background:url(../images/ty_portal/banner2.jpeg) no-repeat center center;}

.m-banner li p{ opacity:0;opacity:1\9;}
.m-banner .li1-1{ top:182px; left:0; position:absolute; background:url(../images/ty_portal/banner1-1.png) no-repeat left top; width:551px; height:157px;}
.m-banner .li1-2{ top:28px; left:587px; position:absolute; background:url(../images/ty_portal/banner1-2.png) no-repeat left top; width:585px; height:515px;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-ms-animation-delay:.5s;animation-delay:.5s;}

.m-banner .li1-2-1{ top:182px; left:0; position:absolute; background:url(../images/ty_portal/banner2-img1.png) no-repeat left top; width:665px; height:157px;}
.m-banner .li1-2-2{ top:28px; left:587px; position:absolute; background:url(../images/ty_portal/banner2-img2.png) no-repeat left top; width:717px; height:431px;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-ms-animation-delay:.5s;animation-delay:.5s;}


.m-banner .li1-3-1{ top:182px; left:0; position:absolute; background:url(../images/ty_portal/banner3-img1.png) no-repeat left top; width:665px; height:157px;}
.m-banner .li1-3-2{ top:83px; right:-64px; position:absolute; background:url(../images/ty_portal/banner3-img2.png) no-repeat left top; width:632px; height:439px;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-ms-animation-delay:.2s;animation-delay:.2s;}


.m-banner .li1-4-1{ top:188px; left:0; position:absolute; background:url(../images/ty_portal/banner4-img1.png) no-repeat left top; width:625px; height:175px; background-size: 625px auto;}
.m-banner .li1-4-2{ top:103px; right:-64px; position:absolute; background:url(../images/ty_portal/banner4-img2.png) no-repeat left top; width:480px; height:362px;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-ms-animation-delay:.2s;animation-delay:.2s;}


.m-banner .li1-5-1{ top:188px; left:0; position:absolute; background:url(../images/ty_portal/banner5-img1.png) no-repeat left top; width:552px; height:191px;}
.m-banner .li1-5-2{ top:103px; right:-30px; position:absolute; background:url(../images/ty_portal/banner5-img2.png) no-repeat left top; width:588px; height:465px;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-ms-animation-delay:.2s;animation-delay:.2s;}


.m-banner .li1-6-1{ top:188px; left:60px; position:absolute; background:url(../images/ty_portal/banner6-img1.png) no-repeat left top; width:624px; height:192px;}
.m-banner .li1-6-2{ top:103px; right:-78px; position:absolute; background:url(../images/ty_portal/banner6-img2.png) no-repeat left top; width:588px; height:465px;}


.m-banner .li1-7-1{ top:198px; left:60px; position:absolute; background:url(../images/ty_portal/banner7-img1.png) no-repeat left top; width:680px; height:173px;}
.m-banner .li1-7-2{ top:124px; right:0px; position:absolute; background:url(../images/ty_portal/banner7-img2.png) no-repeat left top; width:440px; height:318px;}


.m-banner .li1-8-1{ top:188px; left:60px; position:absolute; background:url(../images/ty_portal/banner8-img1.png) no-repeat left top; width:423px; height:223px;}
.m-banner .li1-8-2{ top:55px; right:81px; position:absolute; background:url(../images/ty_portal/banner8-img2.png) no-repeat left top; width:614px; height:407px;}


.m-banner .li1-9-1{ top:188px; left:60px; position:absolute; background:url(../images/ty_portal/banner9-img1.png) no-repeat left top; width:517px; height:223px;}
.m-banner .li1-9-2{ top:121px; right:120px; position:absolute; background:url(../images/ty_portal/banner9-img2.png) no-repeat left top; width:492px; height:456px;}



.m-banner .page{ position:absolute; bottom:13px; left:0px; text-align:center; height:25px; width:100%; z-index:20; background:none;}
.m-banner .page li{ display:inline-block; width:12px; height:12px; background:#fff; border-radius:6px; position:static; margin:0 4px; cursor:pointer;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease; opacity:0.5;}
.m-banner .page li.active{ opacity:1;}
.m-banner .banner_btn{ display:none;}
.m-banner .pre-btn{  position:absolute; top:50%; left:30px; width:48px; height:48px; z-index:21;margin-top: -24px; }
.m-banner .pre-btn i{background:url(../images/w_hjy/banner/banner_btnl.png) no-repeat center center; display:block; width:100%; height:100%;}
.m-banner .pre-btn:hover i{background:url(../images/w_hjy/banner/banner_btnl1.png) no-repeat center center;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease; -webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;}
.m-banner .next-btn{ position:absolute; top:50%; right:30px; width:48px; height:48px; z-index:21;margin-top: -24px;}
.m-banner .next-btn i{background:url(../images/w_hjy/banner/banner_btnr.png) no-repeat center center; display:block; width:100%; height:100%;}
.m-banner .next-btn:hover i{background:url(../images/w_hjy/banner/banner_btnr1.png) no-repeat center center;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease; -webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;}

.m-banner .py_banner3{ width:1223px; height:100%; background:url(../images/w_hjy/banner/banner3.png) no-repeat center center; position:absolute; left:50%; margin-left:-611px; top:0;}
.m-banner .py_banner4{ width:100%; height:100%; background:url(../images/w_hjy/banner/banner4.png) no-repeat center center;}



/*topbar*/
body{ background:#fff; min-width:1200px;}
.w1200{ width:1200px; margin:0 auto;}

/*首页第一屏*/
.who_am_i{ background: url(../images/w_hjy/amibg.png) repeat-x; height:264px; margin-top:-114px; position:relative; z-index:21;overflow:hidden;}
.who_am_i ul li{ float:left; width:300px; height:264px; text-align:center; position:relative; opacity:0;opacity:1\9;}
.who_am_i ul li.li2{animation-delay:0.8s;}
.who_am_i ul li.li3{animation-delay:0.8s;}
.who_am_i ul li a{ display:block; width:100%; height:264px;}
.who_am_i ul li a:hover{ background:#289efb;  position:absolute; bottom:0; left:0;box-shadow:0 0 14px #1c7dcb;}
.who_am_i ul li em,.who_am_i ul li span{ display:block;}
.who_am_i ul li em{ padding-top:62px;}
.who_am_i ul li span{ padding-top:20px; font-size:24px;}
.who_am_i ul li p{ padding-top:20px; color:#c3e4ff; font-size:14px;}
.who_am_i ul li a{ color:#fff;}
.who_am_i ul li a:hover{ text-decoration:none;}

/*首页第二屏*/
.w_service{height:710px; position:relative;}
.w_service .w_tit{padding-top:55px; overflow:hidden; zoom:1;}
.w_service .w_tit h2{ color:#222; font-size:40px; text-align:center;  height:60px; font-weight:normal;  opacity:0;opacity:1\9;*padding-left:240px;}
.w_service .w_tit h2 span{ display:inline-block; line-height:50px; height:50px; vertical-align:bottom; padding-bottom:5px; *float:left; *padding:5px 5px 0 5px;}
.w_service .w_tit .u_h3title .nummber{display:inline-block;opacity:0;*opacity:1\9; vertical-align:bottom;font-size:60px;font-size:60px; line-height:60px; font-family:Arial; color:#29a0ff;*float:left;}
.w_service .w_tit .u_h3title p{ display:inline-block;*float:left;}
.w_service .w_tit .u_h3title ul{ overflow:hidden; height:60px; display:inline-block;vertical-align: bottom; *float:left;}
.w_service .w_tit .u_h3title ul li{ float:left; width:34px; height:60px; position:relative; overflow:hidden; font-size:60px; line-height:60px; font-family:Arial;color:#29a0ff;}
.w_service .w_tit .u_h3title ul li .numbox{ position:absolute; top:0px; left:0px;}
.w_service .w_tit .u_h3title ul li .numbox p{ width:34px; height:60px; display:block; float:left;}

.w_service .w_tit .other_p{ color:#666; font-size:22px; line-height:22px; text-align:center; padding-top:15px;animation-delay:1s;opacity:0; opacity:1\9;}
.w_service .w_cont{ position: absolute; top:0; left:0px; z-index:2;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-ms-animation-delay:.5s;animation-delay:.5s;}
.w_service .w_cont ul li{ width:140px; text-align:center; color:#555555;opacity:0;opacity:1\9;}
.w_service .w_cont ul li:hover i{animation:y-ain 1s 0s linear;-webkit-animation:y-ain 1s 0s linear;}
@keyframes y-ain{
0%{transform: perspective(800px) rotateY(0deg);}
25%{transform: perspective(800px) rotateY(40deg);}
50%{transform: perspective(800px) rotateY(0deg);}
75%{transform: perspective(800px) rotateY(-40deg);}
100%{transform: perspective(800px) rotateY(0deg);}
}
@-webkit-keyframes y-ain{
0%{-webkit-transform: perspective(800px) rotateY(0deg);}
25%{-webkit-transform: perspective(800px) rotateY(40deg);}
50%{-webkit-transform: perspective(800px) rotateY(0deg);}
75%{-webkit-transform: perspective(800px) rotateY(-40deg);}
100%{-webkit-transform: perspective(800px) rotateY(0deg);}
}
.w_service .w_cont ul li.li1{ position:absolute; top:348px; left:60px;animation-delay:1s;-webkit-animation-delay:1s;-moz-animation-delay:1s;-ms-animation-delay:1s;}
.w_service .w_cont ul li.li2{ position:absolute; top:221px; left:260px;animation-delay:1.5s;-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;-ms-animation-delay:1.5s;}
.w_service .w_cont ul li.li3{ position:absolute; top:180px; left:523px; animation-delay:2s;-webkit-animation-delay:2s;-moz-animation-delay:2s;-ms-animation-delay:2s;}
.w_service .w_cont ul li.li4{ position:absolute; top:221px; left:818px;animation-delay:2.5s;-webkit-animation-delay:2.5s;-moz-animation-delay:2.5s;-ms-animation-delay:2.5s;}
.w_service .w_cont ul li.li5{ position:absolute; top:348px; left:1005px; animation-delay:3s;-webkit-animation-delay:3s;-moz-animation-delay:3s;-ms-animation-delay:3s;}
.w_service .w_cont ul li span{display:block; font-size:18px; color:#555555; padding-bottom:15px;}
.w_service .bot_img{width:100%; height:288px; background:url(../images/w_hjy/serviceimg1.jpg) no-repeat center 110px; position:relative;  z-index:1;opacity:0; opacity:1\9; padding-top:110px;}

.w_service .w_btn{ text-align:center; padding-top:20px;-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-ms-animation-delay:.8s;animation-delay:.8s; opacity:0;opacity:1\9;}
.w_service .w_btn a{ display:inline-block; color:#fff; background:#0882e3; height:66px; line-height:66px; padding:0 68px; font-size:27px; border-radius:10px;}
.w_service .w_btn a:hover{ text-decoration:none; background:#0877d1;}

/*首页第三屏*/
.row3-rect{ width:100%; background: url(../images/w_hjy/ecology.jpg) no-repeat top center; height:630px;}
.w_ecology{height:630px; position:relative; overflow:hidden;}
.w_ecology .w_tit{padding-top:48px;}
.w_ecology .w_tit h2{ color:#222; font-size:42px; line-height:42px; font-weight:normal; text-align:center; opacity:0;opacity:1\9;}
.w_ecology .w_tit p{ color:#454545; font-size:18px; line-height:30px; text-align:center; padding-top:12px;animation-delay:1s;opacity:0;opacity:1\9;}
.w_ecology .w_cont{ position: absolute; top:48px; left:0px; z-index:2;-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-ms-animation-delay:.5s;animation-delay:.5s;}
.w_ecology ul li{  text-align:center; color:#555555;}
.w_ecology ul li.li1{ position:absolute; top:207px; left:89px;-webkit-animation-delay:1s;-moz-animation-delay:1s;-ms-animation-delay:1s;}
.w_ecology ul li.li2{ position:absolute; top:164px; left:367px;-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;-ms-animation-delay:1.6s;}
.w_ecology ul li.li3{ position:absolute; top:214px; left:645px;-webkit-animation-delay:2.2s;-moz-animation-delay:2.2s;-ms-animation-delay:2.2s;}
.w_ecology ul li.li4{ position:absolute; top:156px; left:915px;-webkit-animation-delay:2.8s;-moz-animation-delay:2.8s;-ms-animation-delay:2.8s;}
.w_ecology ul li span{display:block; font-size:18px; color:#555555; padding-bottom:15px;}

.w_ecology .w_btn{ text-align:center; padding-top:300px;-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-ms-animation-delay:.8s;animation-delay:.8s;opacity:0;opacity:1\9;}
.w_ecology .w_btn a{ display:inline-block; color:#fff; background:#2dd2c1; height:66px; line-height:66px; padding:0 68px; font-size:27px; border-radius:10px;}
.w_ecology .w_btn a:hover{ text-decoration:none; background:#00b890;}


/*****************************/