@charset "utf-8"; /*初始样式*/ body{ color:#333; font-size:14px;font-family: "Microsoft Yahei";min-width: 1200px;max-width: 1920px;margin: 0 auto;overflow-x: hidden;} /*网站字体颜色*/ body,ul,ol,li,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,img,span,input{margin:0;padding:0;list-style:none;} a { color:#333; text-decoration:none;font-family: "Microsoft Yahei";} /*for ie f6n.net*/ a:focus{outline:0;} /*for ff f6n.net*/ /*a:hover { text-decoration:underline;}*/ img{border:none;} .vam { vertical-align:middle;} .clear{clear:both; height:0; line-height:0; font-size:0;} p{ word-spacing:-1.5px;font-family: "Microsoft Yahei"; } h1,h2,h3,h4,h5,h6{ font-family:"Microsoft Yahei";} .tr { text-align:right;} .tl { text-align:left;} .center { text-align:center;} .fl { float:left;} .fr { float:right;} .pa{ position:absolute;} .pr{ position:relative;} i,em{ font-style:normal;} .clearfix:after{content:"";height:0;clear:both;display:block;visibility:hidden;} .clearfix{zoom:1;} /* -- 页面整体布局 -- */ .content{ width:1200px; margin:0 auto;font-family: "Microsoft Yahei";} .tit{text-align: center;font-weight: normal;font-size: 0;line-height: 0;} .tit h2{ font-size: 40px; color: #333333; font-weight: normal;} .tit span{display:inline-block;font-size: 40px;color: #333;line-height:40px;font-weight: bold;} .tit b{background: url(../images/tit1.png) no-repeat; width: 20px; height: 20px; display: inline-block; vertical-align: top; margin: 13px 18px 0;} .tit em{background: url(../images/tit2.png) no-repeat; width: 20px; height: 20px; display: inline-block; vertical-align: top; margin: 13px 18px 0;} .tit i{display:block;font-size: 20px;line-height:20px;color: #333333;margin-top: 15px;} /*banner*/ .banner{position: relative;} .banner li{width: 100%;} .banner li img{display: block;width: 100%;} .banner .content{position: relative;} .ban_pg{position: absolute;width: 100%;height: 10px;right: 0;bottom: 44px;text-align: center;} .ban_pg i{display: inline-block;width: 14px;height: 14px;background: #fff;margin:0 10px;border-radius: 7px;} .ban_pg i.on{background: #2b378b;} .search{height: 70px;background: #f6f6f6;} .search p{float: left;height: 70px;line-height: 70px;font-size: 14px;color: #666666;} .search p b{ color: #666666;float: left;font-weight: bold;} .search p a{ font-size:14px ;display: block;float: left;color: #666666;line-height: 70px;margin-right: 24px;} .search p a:hover{color: #2b378b;} .s_box{float: right;width: 702px;height: 70px;position: relative;background: #2b378b;border-bottom: 3px solid #91c42f;box-sizing: border-box;margin-right: -360px;} .s_box .txt{float:left;width:258px;height:70px;line-height: 70px;font-size:14px;color:#fff;border:none;background: none;outline: 0;padding-left: 44px;} .s_box .btn{float: left;width:32px;height: 32px;border: 0;background: url(../images/sea.png) no-repeat center;outline: 0;cursor: pointer;margin-top: 17px;position: relative;} input::-webkit-input-placeholder{ color:#fff; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#fff; } input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:#fff; } input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#fff; } .yz{ padding: 80px 0 0;box-sizing: border-box;} .yz ul{ margin-top: 145px; } .yz li{ float: left;position: relative;transition:all 0.3s;margin-right: 75px;width: 350px;height: 363px;border: 2px solid #DADADA;border-radius: 30px;box-sizing: border-box;transition: all 0.5s;} .yz li:last-child{ margin-right: 0; } .yz li i>img{ display: block;width: 192px;height: 192px;margin: -96px auto 0;position: relative;z-index: 50; } .yz li:hover i img {animation-duration: 2s;animation-name: flipInY;} .yz li span{ display: block;width: 148px;margin: 26px auto 0;height: 84px;background: url(../images/yz_jt.png) no-repeat right bottom; } .yz li span img{ display: inline-block;width: 68px;height: 60px;vertical-align: bottom; } .yz li:hover span img {animation-duration: 2s;animation-name: flipInY;} .yz li span b{ display: inline-block;font-size: 24px;color: #333333;line-height: 30px;padding-left: 6px; } .yz li em{ display: block;font-size: 14px;color: #666666;line-height: 24px;padding-top: 20px; text-align: center;} .yz li.cur{ box-shadow: 0 0 18px rgba(0,0,0,0.15);border:0; transform: translateY(-5px); } .pro{ padding-top: 80px;margin-top: 90px;height: 1961px;background: url(../images/pro_bg.jpg) no-repeat center;box-sizing: border-box; } .pro1 .tit span{display:inline-block;font-size: 40px;color: #fff;line-height:40px;font-weight: bold;} .pro1 .tit b{background: url(../images/tit3.png) no-repeat; width: 20px; height: 20px; display: inline-block; vertical-align: top; margin: 10px 18px 0;} .pro1 .tit em{background: url(../images/tit4.png) no-repeat; width: 20px; height: 20px; display: inline-block; vertical-align: top; margin: 10px 18px 0;} .pro_t{ margin-top: 66px;height: 70px; } .pro_t li{ float: left;width: 300px;height: 70px;background: #f6f6f6; } .pro_t li>a{width: 300px;height: 70px;line-height: 70px;background:url(../images/pro_jt.png) no-repeat 243px 35px #f6f6f6;font-size: 20px;color: #333333;font-weight: bold;padding-left: 40px;box-sizing: border-box;display: block; } .pro_t li.cur>a{ background:url(../images/pro_jth.png) no-repeat 234px 25px #91c42f;color: #fff; } .pro_qie{display: block;height: 50px;padding-left: 40px;background: #f6f6f6;box-sizing:border-box; } .pro_qie p>a{display: block;height: 50px;line-height: 50px; float: left;margin-right: 35px;font-size: 16px;color: #333; } .pro_qie p>a:hover{ font-weight: bold; } .pro_con{height: 640px!important;display: none;} .pro_con dt{ display: block;width: 600px;height: 640px;float: left;overflow: hidden; } .pro_con dt img{ display: block;width: 600px;height: 640px;transition: all 0.5s; } .pro_con dt:hover img{ transform: scale(1.05); } .pro_con dd{ float: right;width: 600px;height: 640px;padding: 35px;box-sizing: border-box; background: #fff;overflow: hidden;} .pro_con li{ float: left;width: 265px;position: relative;border-right: 1px solid #e8e8e8;border-bottom: 1px solid #e8e8e8;height: 285px;padding-top: 22px;box-sizing: border-box;position: relative;} .pro_con li:nth-child(2),.pro_con li:nth-child(4){ border-right: 0; } .pro_con li:nth-child(3),.pro_con li:nth-child(4){ border-bottom: 0; } .pro_con li em>img{ display: block;width: 55px;height: 60px;position: absolute;top: 0;left: 30px;animation: downup 1s infinite linear;-webkit-animation: downup 1s infinite linear;} @keyframes downup { 0% { transform: translate(0, 0); } 50% { transform: translate(0, -8px); } 100% { transform: translate(0, 0); } } @-webkit-keyframes downup { 0% { -webkit-transform: translate(0, 0); } 50% { -webkit-transform: translate(0, -8px); } 100% { -webkit-transform: translate(0, 0); } } .pro_con li i{ display: block;width: 240px;height: 240px;overflow: hidden;margin: 0 auto;} .pro_con li i>img{ display: block;width: 240px;height: 240px;transition: all 0.5s;} .pro_con li:hover i img{ transform: scale(1.05); } .pro_con li span{ display: block;line-height: 240px;font-weight: normal;font-size: 16px;color: #ffffff;width: 100%;text-align: center;position: absolute;left:0;bottom:0;height: 0;transition: all 0.5s;background: rgba(51,51,51,0.5);} .pro_con li:hover span{height: 100%; position: absolute; z-index: 9999;} .pro2{ padding-top: 90px; } .pro_s{ margin-top: 60px; } .pro2 dl{ float: left;width: 590px; } .pro2 dt{ display: block;width: 590px;height: 325px;position: relative;overflow: hidden; } .pro2 dt img{ display: block;width: 590px;height: 325px;transition: all 0.5s; } .pro2 dt b{ display: block;position: absolute;left:35px;bottom:35px;font-size: 32px;color: #fff;font-weight: bold;line-height: 32px; } .pro2 dt:hover img{ transform: scale(1.05); } .pro2 dd{width: 590px;height: 401px;background: #FFFFFF;padding: 0 45px;box-sizing: border-box;} .pro2 dd .pro_z{ height: 75px;border-bottom: 1px solid #e8e8e8; } .pro2 dd .pro_z li{ float: left;padding: 0 30px;font-size: 16px;color: #666;line-height: 75px; position: relative;} .pro2 dd .pro_z li:after{ position: absolute;content: ""; width: 1px; height:17px; background: #e8e8e8;right: 0; top: 28px; transition: .3s ease; -o-transition: .3s ease; } .pro2 dd .pro_z li:first-child{ padding-left: 0; } .pro2 dd .pro_z li:last-child{ padding-right: 0; } .pro2 dd .pro_z li:last-child:after{ background: 0; } .pro2 dd .pro_z li a{ display: block;font-size: 16px;color: #666;line-height: 71px;position: relative; } .pro2 dd .pro_z li a:hover,.pro2 dd .pro_z li.cur a{color: #2b378b;border-bottom:4px solid #2b378b; } .pro2 dd .pro_z li a:hover:after,.pro2 dd .pro_z li.cur a:after{ position: absolute;left:50%;margin-left: -5px;top:67px;width: 0;height: 0;border-style: solid;border-width: 0 5px 5px 5px;border-color: transparent transparent #2b378b transparent;background: 0;content: ""; } .pro2 dl:last-child{ float: right; } .pro2 dl:last-child dt b{ left:35px;top:35px;bottom:0; } .pro2 .pros1{background:#fff;} .pro2 .pros1 dt{ display: block;width: 590px;height: 113px;position: relative;overflow: hidden; } .pro2 .pros1 dt img{ display: block;width: 590px;height: 113px;transition: all 0.5s; } .pro2 .pros1 .pro_d li{ float: left;width: 250px;position: relative;border-right: 1px solid #e8e8e8;border-bottom: 1px solid #e8e8e8;height: 258px;box-sizing: border-box;position: relative;} .pro2 .pros1 .pro_d li:nth-child(2),.pro2 .pros1 li:nth-child(4){ border-right: 0; } .pro2 .pros1 .pro_d li:nth-child(3),.pro2 .pros1 li:nth-child(4){ border-bottom: 0; } .pro2 .pros1 .pro_d li:after{background:0;} .pro_d{ margin-top: 20px; } .pro_d li{ float: left;width: 250px;position: relative;padding-top: 6px;box-sizing: border-box;position: relative;position: relative;} .pro_d li:after{ position: absolute;position: absolute; content: ""; width: 1px; height:200px; background: #e8e8e8;right: 0; top: 20px; transition: .3s ease; -o-transition: .3s ease; } .pro_d li:last-child:after{ background: 0; } .pro_d li i{ display: block;width: 240px;height: 240px;overflow: hidden;margin: 0 auto;} .pro_d li i>img{ display: block;width: 240px;height: 240px;transition: all 0.5s;} .pro_d li:hover i img{ transform: scale(1.05); } .pro_d li span{ display: block;line-height: 240px;font-weight: normal;font-size: 16px;color: #ffffff;width: 100%;text-align: center;position: absolute;left:0;bottom:0;height: 0;transition: all 0.5s;background: rgba(51,51,51,0.5);overflow:hidden;} .pro_d li:hover span{height: 100%; position: absolute; z-index: 9999;} .pro_d li em>img{ display: block;width: 55px;height: 60px;position: absolute;top: 0;left: 30px;animation: downup 1s infinite linear;-webkit-animation: downup 1s infinite linear;} @keyframes downup { 0% { transform: translate(0, 0); } 50% { transform: translate(0, -8px); } 100% { transform: translate(0, 0); } } @-webkit-keyframes downup { 0% { -webkit-transform: translate(0, 0); } 50% { -webkit-transform: translate(0, -8px); } 100% { -webkit-transform: translate(0, 0); } } .coop{ padding-top: 80px; } .coop .tit span{ color: #0e0e0e; } .coop_list{position: relative;margin-top: 50px;} .coop_list li{float: left;width: 155px;height: 87px;margin-right: 19px;margin-bottom: 10px;border: 1px solid #e6e6e6;border-radius: 8px;box-sizing: border-box;} .coop_list li:nth-child(7n){ margin-right: 0; } .coop_list li i{display: block;overflow: hidden;width: 147px;height: 79px;margin: 0 auto;} .coop_list li i img{display: block;width: 100%;transition: all 0.5s;margin: 0 auto;} .coop_list li i:hover img{transform: scale(1.05);} .pz{padding-top: 65px;padding-bottom: 100px;} .pz_t{ width: 750px;margin: 30px auto; } .pz_t li{ float: left;width: 375px;padding-left: 20px;position: relative;font-size: 16px;line-height: 40px;color: #333;float: left;box-sizing: border-box;transition:all 0.5s; } .pz_t li:hover{ transform: translateY(-5px); } .pz_t li b{ color: #91c42f; } .pz_t li:after{ position: absolute; content: ""; width:11px; height:11px; left:0; top: 15px;border:3px solid #2b378b;box-sizing: border-box;border-radius: 7px; } .zs_con{ position: relative; } .zs_con li{ float: left;width:203px;margin-right: 46px;transition: all 0.3s; } .zs_con li:hover{ transform: translateY(-5px); } .zs_con li img{ display: block;width: 203px;height: 268px; } .zs_con li span{ display: block;font-size: 14px;color: #666;text-align: center;line-height: 22px;padding-top: 16px; } .zs_con .prev{position: absolute;left: -90px;top: 125px;width: 56px;height: 56px;background: url(../images/sprev.png) no-repeat center;} .zs_con .next{position: absolute;right: -90px;top: 125px;width: 56px;height: 56px;background: url(../images/snext.png) no-repeat center;} .zs_con .prev:hover{ background: url(../images/sprevh.png) no-repeat center;cursor: pointer; } .zs_con .next:hover{ background: url(../images/snexth.png) no-repeat center; cursor: pointer;} .ys{ padding-top: 80px;background: #f6f6f6;padding-bottom: 105px; } .ys .tit strong{ color: #2b378b; } .ys li { position: relative; width: 170px; height: 570px; margin-right: 18px; float: left; transition: all ease .5s; overflow: hidden;margin-top: 60px;} .ys li img:first-child { width: 170px; height: 197px; display: block; padding: 38px 0; border-top: 2px solid #333333; border-bottom: 2px solid #333333; } .ys li img:nth-child(2) { width: 170px; height: 197px; position: absolute; top: 40px; left: 0; z-index: -1; transition: all ease .5s; } .ys li h4 { font-size: 24px; color: #333; line-height: 50px;height: 60px; transition: all ease .5s; position: absolute; left: -300px; top: 420px; transition-delay: .1s } .ys li h4 i{color: #165396;} .ys li .zoomit { display: block; top: 304px; left: 0;height: 90px;line-height: 34px;position: absolute;font-size: 24px;color:#333333; transition: all ease .5s;width: 170px;text-align: center;font-weight: bold;background: url(../images/ys_jt.png) no-repeat center bottom;} .ys li .zoomit b{display: block;font-weight: normal;font-size: 18px;line-height: 20px;} .ys li .number { display: block; font-size: 20px; color: #333; line-height: 54px; position: absolute; bottom: 0px;left: 50%;margin-left: -27px; width: 54px;height: 54px;background: #fff;font-family: "DINOT";text-align: center;font-weight: bold;border-radius: 50%;} .ys li .info { position: absolute; top: 660px; left: 0; width: 146px; font-size: 14px; color: #2e303d; line-height: 25px; height:50px; overflow:hidden; transition: all ease .5s } .ys li:last-child { margin-right: 0 } .ys li.cur { width: 626px } .ys li.cur:before{content: "";width: 626px;height: 210px;position: absolute;bottom: 0;left: 0;background:#2b378b;} .ys li.cur img:first-child,.ys li.cur img:nth-child(3) { display: none } .ys li.cur img:nth-child(2) { display: block; width: 626px; height: 390px; top: 0; left: 0; z-index: 1 } .ys li.cur h4 { z-index: 2; left: 110px;color: #fff;} .ys li.cur h4:before{content: "";width: 36px;height: 2px;background: #fff;position: absolute;bottom: 0;left: 0;} .ys li.cur .number { color: #333;background: #fff;left: 40px;bottom: 62px;margin-left: 0;} .ys li.cur .zoomit{top: 600px;} .ys li.cur .info { display: block; width: 456px; top: 500px; left: 110px; z-index: 2;color: #fff; } .xad{height: 199px;background:url(../images/xad_bg.jpg) no-repeat center;box-sizing: border-box; } .xad ul{ float: left;width: 720px; padding-top: 65px;} .xad ul li{float: left;padding: 0 39px;transition: all 0.5s;} .xad ul li:first-child{ padding-left: 0; } .xad ul li img{ display: block;width:40px;height: 40px;margin: 0 auto; } .xad ul li:hover img {animation-duration: 2s;animation-name: flipInY;} .xad ul li:hover{ transform: translateY(-5px); } .xad ul li span{ display: block;font-size: 18px;color: #fff;text-align: center;line-height: 35px; } .xad .zx{ float: right;width: 175px;height: 41px;background: #fff;border-radius: 21px;margin-top: 77px;padding-left: 20px;font-size: 16px;color: #333;line-height: 41px;box-sizing: border-box;transition: all 0.5s;} .xad .zx:hover{ transform: translateY(-5px); } .xad .zx img{ display: block;width: 28px;height: 28px;padding-top: 7px;float: right;padding-right: 7px;vertical-align: middle; } .xad_t { float: right; margin-top: 60px; margin-right: 40px;} .xad_t p{ height: 32px;margin-bottom: 12px; } .xad_t p:hover span img {animation-duration: 2s;animation-name: flipInY;} .xad_t span img{ display: block; width:32px;height: 32px;float:left;padding-right: 8px;} .xad_t strong { display: block; font-size: 26px; color: #fff; line-height:32px; float:left;font-weight: bold;} .case{padding: 125px 0 0;} .case_con{ margin-top: 60px;position: relative;} .case_con .tempWrap{padding-left:10px;margin-left:-10px;} .case_con dl{width: 290px;float: left;margin-right: 14px;margin-bottom: 100px;} .case_con dl dt{width: 290px;height: 217px;line-height: 0;overflow: hidden;} .case_con dl dt img{width: 290px;height: 217px;transition: all 0.5s;} .case_con dl:hover dt img{ transform: scale(1.05); } .case_con dl dd{width: 290px;padding: 42px 32px 0;height: 220px;box-sizing: border-box;} .case_con dl dd h3{line-height: 24px;font-weight: normal;display: block;font-size: 16px;text-align: center;} .case_con dl dd h3 b{font-size: 20px;color: #333333;display: block;line-height: 24px;} .case_con dl dd p{font-size: 14px;color: #666666;padding: 16px 0 0;line-height: 24px;text-align: center;} .case_con dl dd .more{width: 142px;height: 40px;border: 2px solid #2B378B;border-radius: 20px;box-sizing: border-box; line-height: 40px;padding-left: 28px; background: url(../images/case_ic.png) no-repeat 100px 8px;font-size: 14px;color: #333;display: block;margin: 24px auto 0;transition: all 0.5s;} .case_con dl:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.15); } .case_con dl dd .more:hover{ background:url(../images/case_ich.png) no-repeat 100px 8px #2b378b;color: #fff; } .case_con .sprev{position: absolute;left: -90px;top: 105px;width: 56px;height: 56px;background: url(../images/sprev.png) no-repeat center;} .case_con .snext{position: absolute;right: -90px;top: 105px;width: 56px;height: 56px;background: url(../images/snext.png) no-repeat center;} .case_con .sprev:hover{ background: url(../images/sprevh.png) no-repeat center;cursor: pointer; } .case_con .snext:hover{ background: url(../images/snexth.png) no-repeat center; cursor: pointer;} .fw ul{ padding-top: 85px; } .fw ul li{ float: left;width: 25%;position: relative; } .fw ul li>img{ display: block;width: 100%; } .fw ul li span{ position: absolute;left:12.5%;bottom:40px; font-size: 26px;line-height: 28px;color: #fff;display: block;} .fw ul li span>img{ display: block;width: 48px;height: 48px;margin-bottom: 24px; } .fw ul li span em{ display: block;font-size: 12px;line-height: 12px;color: #9f9e9d;text-transform: uppercase;margin-top: 5px; } .fw ul li.cur span{ display: none; } .fw ul li div{ display: none; transition: all 0.5s;} .fw ul li.cur div{display: block;position: absolute;left:0;bottom: 0;padding: 46px 10% 40px 12.5%; font-size: 26px;line-height: 28px;color: #fff;font-weight: bold;background: #2b378b;} .fw ul li.cur div em{ display: block;font-size: 12px;line-height: 12px;color: #9f9e9d;text-transform: uppercase;margin-top: 5px;font-weight: normal; } .fw ul li.cur div img{ display: block;width: 48px;height: 48px;float: right; } .fw ul li.cur div p{font-size: 14px;color: #f4f4f4;line-height: 24px;padding-top: 20px;font-weight: normal;} .news{padding: 125px 0 60px;} .news .news-tit{text-align:center;margin-top:60px;margin-bottom:37px} .news .news-tit li{display:inline-block;width:200px;height:50px;text-align:center;font-size:16px;font-weight:700;line-height:50px;color:#333;background:#fff} .news .news-tit li a{display:block;color:#333} .news .news-tit li.cur{background:#2b378b} .news .news-tit li.cur a{color:#fff} .news .news-con .new-l{float:left;width:547px;position:relative} .news .news-con .new-lc{position:relative} .news .news-con .new-lc dt{width:547px;height:307px;display:block;line-height:0;overflow:hidden} .news .news-con .new-lc dt img{width:547px;height:307px;display:block;transition:all 1s} .news .news-con .new-lc dt:hover img{transform:scale(1.03)} .news .news-con .new-lc dd{margin-top:23px} .news .news-con .new-lc dd>em{float:left;width:102px;box-sizing:border-box;font-size:28px;color:#333;font-weight:700;text-align:right;padding-right:20px;border-right:1px solid #d6d6d6;letter-spacing:-1px;height:160px;line-height:80%} .news .news-con .new-lc dd>em i{display:block;font-size:12px;font-weight:400;line-height:80%;margin-top:5px} .news .news-con .new-lc dd h4{/*float:right;width:415px;*/font-weight:400} .news .news-con .new-lc dd h4 b a{display:block;font-size:22px;color:#202428;line-height:30px;font-weight:400;letter-spacing:1px;width:90%;overflow:hidden;} .news .news-con .new-lc dd h4 b a:hover{color:#2b378b} .news .news-con .new-lc dd h4 span{font-size:14px;line-height:22px;color:#666;margin-top:10px;display:block;} .news .news-con .new-lc dd h4 em a{display:block;font-size:14px;color:#202428;opacity:.7;font-weight:700;;background: url(../images/new-line.png) no-repeat left bottom;margin-top: 25px;} .news .news-con .new-lc dd h4 em a:hover{color:#2b378b;opacity:1} .news .news-con .new-r{float:right;width:525px} .news .news-con .new-rt{margin-left:88px;height:68px} .news .news-con .new-rt li{width:147px;float:left;line-height:50px;height:50px;background:#fff;font-size:16px;text-align:center;font-weight:700} .news .news-con .new-rt li.cur{background:#2b378b} .news .news-con .new-rt li.cur a{color:#fff;display:block} .news .news-con .new-rc dl{border-bottom:1px solid #d6d6d6;height:146px} .news .news-con .new-rc dt{float:left;width:102px;height:146px;border-right:1px solid #d6d6d6;padding-right:18px;box-sizing:border-box;text-align:right;padding-top:30px} .news .news-con .new-rc dl:first-of-type dt{padding-top: 30px;height:170px;box-sizing:border-box;} .news .news-con .new-rc dl:last-of-type{border-bottom:none;padding-bottom: 20px;} .news .news-con .new-rc dl:last-of-type dt{height:170px;padding-top: 30px;box-sizing:border-box;} .news .news-con .new-rc dl:first-of-type,.news .news-con .new-rc dl:last-of-type{height:170px; } .news .news-con .new-rc dt em{font-size:28px;color:#333;font-weight:700;line-height:80%} .news .news-con .new-rc dt em i{display:block;font-size:12px;font-weight:400;line-height:100%;margin-top:5px} .news .news-con .new-rc dd{float:right;width:422px;padding-left:25px;box-sizing:border-box} .news .news-con .new-rc dd h4 a{display:block;font-size:22px;font-weight:400;padding-top:30px;line-height:22px} .news .news-con .new-rc dd h4 a:hover{color:#2b378b} .news .news-con .new-rc dd span{font-size:14px;line-height:14px;display:block;color:#666;margin-top:10px} .news .news-con .new-rc dd em a{display:block;font-size:14px;line-height:14px;margin-top:30px;color:#202428;opacity:.7;font-weight:700} .news .news-con .new-rc dd em a:hover{color:#2b378b;opacity:1} .abt{ padding-bottom: 134px; position: relative;} .abt dl{ margin-top: 42px;height: 673px;} .abt dt{ display: block;width:960px;height:673px;position: relative;float: right;overflow: hidden;margin-right: -360px;} .abt dt>img{ display: block;width:960px;height:673px;position: relative;} .video-box { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; font-size: 0; z-index: 9999; background: rgba(0, 0, 0, 0.9); display: none; } .video-box .video-wrapper { width: 800px; height: 580px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video-box video { width: 800px; height: 580px; } .video-box .close-video { position: absolute; top: calc(54px); right: 5%; width: 30px; height: 30px; cursor: pointer; background: url(../images/close.png) no-repeat center rgba(0, 0, 0, 0.4); } .abt dd{ float: left;width:960px;height:673px;background: url(../images/abt_dd.jpg) no-repeat center;padding-left: 360px;box-sizing: border-box;margin-left: -360px;} .abt dd p{ font-size: 14px;line-height: 28px;color: #ffffff;padding-top: 12px;padding-right: 36px;} .abt dd .more{ display: block;width: 105px;height: 40px;line-height: 36px;border:2px solid #e2e2e2;box-sizing: border-box;text-align: center;font-size: 14px;color: #fff;font-weight: bold;margin-top: 40px;transition: all 0.5s;} .abt dd .more:hover{ transform: translateY(-5px);background: #91c42f;border-color: #91c42f; } .abt_t{margin: 140px 0 0;} .abt_t li{ display: block;float: left;position: relative;background: url(../images/abt_line.png) no-repeat right top;padding:0 100px 0 80px;} /*.abt_t li:first-child{ padding-left:0;}*/ .abt_t li:last-child{ padding-right:0;} .abt_t li:nth-child(2){background: 0;} .abt_t li img{ display: block;width: auto;height: 36px;} .abt_t li span{ display: block;font-size: 18px;line-height: 18px;color: #ffffff;padding-top: 18px;padding-bottom: 48px;font-weight: normal;} .abt_z{height: 130px;position: relative;z-index: 50;box-shadow: 0 0 10px rgba(0,0,0,0.15);background: #fff; box-sizing: border-box;position: absolute;width: 1200px;margin-left: -600px;left:50%;top: 712px;} .abt_z li{position: relative;float: left;width: 400px;border-right: 1px solid #efefef;padding-left: 120px;box-sizing: border-box;padding-top: 40px;height: 130px;} .abt_z li:last-child{ border-right: 0; } .abt_z li:after{position: absolute;width: 0;height: 4px;background: #2b378b;content: "";left: 0;bottom: 0;transition: all 0.3s;} .abt_z li img{display: block;margin-right: 8px;width: 56px;height: 56px;float: left;vertical-align: middle;} .abt_z li span{display: block;font-size: 24px;line-height: 30px;color: #333;float: left;padding-top: 4px;} .abt_z li i{display: block;font-size: 16px;line-height: 22px;color: #333;font-family:Arial;opacity: 0.5;font-weight: bold; } .abt_z li.cur:after{width: 100%;} .abt_z li.cur span{ font-weight: bold;color: #2b378b; } .abt_z li:hover img {animation-duration: 2s;animation-name: flipInY;} html {font-size: 10px;} @media screen and (min-width:800px) { html { font-size:11px; } } @media screen and (min-width:1024px) { html { font-size:13px; } } @media screen and (min-width:1280px) { html { font-size:14px; } } @media screen and (min-width:1440px) { html { font-size:16px; } } @media screen and (min-width:1600px) { html { font-size:18px; } } @media screen and (min-width:1920px) { html { font-size:20px; } } @-webkit-keyframes fadeInDown1 { from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown1 { from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown1 { -webkit-animation-name: fadeInDown1; animation-name: fadeInDown1 } @-webkit-keyframes fadeInDown2 { from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeInDown2 { from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .fadeInDown2 { -webkit-animation-name: fadeInDown2; animation-name: fadeInDown2 } @-webkit-keyframes fadeInLeft1 { from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes fadeInLeft1 { from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } .fadeInLeft1 { -webkit-animation-name: fadeInLeft1; animation-name: fadeInLeft1 } @-webkit-keyframes fadeInLeft2 { from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes fadeInLeft2 { from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } .fadeInLeft2 { -webkit-animation-name: fadeInLeft2; animation-name: fadeInLeft2 } @-webkit-keyframes fadeInRight1 { from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes fadeInRight1 { from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } .fadeInRight1 { -webkit-animation-name: fadeInRight1; animation-name: fadeInRight1 } @-webkit-keyframes zoomLeft { from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 } 50% { opacity: 1 } } @keyframes zoomLeft { from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 } 50% { opacity: 1 } } .zoomLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft } .zoomRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft } @-webkit-keyframes fadeInUp1 { from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes fadeInUp1 { from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } .fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1 } @-webkit-keyframes fadeInUp2 { from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes fadeInUp2 { from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 } } .fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2 } @keyframes myfirst { 0% { top: 0; left: 0 } 25% { top: 10px; left: 0 } 50% { top: 0; left: 0 } 100% { top: 0; left: 0 } } @-moz-keyframes myfirst { 0% { top: 0; left: 0 } 25% { top: 10px; left: 0 } 50% { top: 0; left: 0 } 100% { top: 0; left: 0 } } @-webkit-keyframes myfirst { 0% { top: 0; left: 0 } 25% { top: 10px; left: 0 } 50% { top: 0; left: 0 } 100% { top: 0; left: 0 } } @-o-keyframes myfirst { 0% { top: 0; left: 0 } 25% { top: 10px; left: 0 } 50% { top: 0; left: 0 } 100% { top: 0; left: 0 } }