@charset "utf-8"; /* css document */ .index_body{ color: #333333} .header, .head_h{ display: none} .fp-viewing-section1 .header{ display:block; background: #fff;} .ind_title{ padding: 20px 0} @media(max-width:768px){ .header, .head_h{ display:block;} } .section:nth-child(odd) .ind_title{ color: #fff} .section:nth-child(even) .ind_title{ color: #000} .fp-viewing-section1 #fp-nav ul li a span, .fp-viewing-section1 .fp-slidesnav ul li a span, .fp-viewing-section3 #fp-nav ul li a span, .fp-viewing-section3 .fp-slidesnav ul li a span, .fp-viewing-section5 #fp-nav ul li a span, .fp-viewing-section5 .fp-slidesnav ul li a span{ background: #fff} .video_files{position:absolute; left:0; top:0; width:100%; height:100%; z-index:10;} .video_files video{width:100%; height:100%; background-color:#000; position:absolute; left:0; top:0;} .video_files .close{position: absolute;right: 3%;top: 3%;z-index: 10;width: 30px;height: 30px;border-radius: 50%;background-color: #761b1b;cursor: pointer;} .video_files .close::before, .video_files .close::after{ position:absolute; content:''; width:3px; height:70%; border-radius:3px; background-color:#fff; left:13px; top:5px;} .video_files .close::before{ transform:rotate(45deg);} .video_files .close::after{ transform:rotate(-45deg);} .a_play{ cursor: pointer;position:absolute; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; padding: 4%; width: 10px; height: 10px; border-radius: 100px; background: #fff no-repeat center center; box-shadow: 0 0 0 10px rgb(255,255,255,0.1);animation: quan 1s linear infinite;} @keyframes quan{ 0%{box-shadow: 0 0 0 10px rgb(255,255,255,0);} 50%{box-shadow: 0 0 0 15px rgb(255,255,255,0.1);} 100%{box-shadow: 0 0 0 30px rgb(255,255,255,0);} } .index_banner{ position: relative} .index_banner .item{ background: no-repeat center bottom; background-size: cover} .index_banner .pic{ display: none} .index_banner:before{ content: ''; position: absolute; left: 5%; bottom: 8%; z-index: 5; border-radius: 100px; width: 26px; height: 46px; background: no-repeat center center;animation: tiao 1s linear infinite;} @keyframes tiao{ 0%{ bottom: 8%} 50%{bottom: 10%} 100%{bottom: 8%} } .index_banner .slick-current{ visibility: visible; -webkit-animation:scale-bg 6s linear forwards; animation:scale-bg 6s linear forwards; } @-webkit-keyframes scale-bg{ from{ -webkit-transform:scale(1.1); transform:scale(1.1); } to{ -webkit-transform:scale(1); transform:scale(1); } } @keyframes scale-bg{ from{ -webkit-transform:scale(1.1); transform:scale(1.1); } to{ -webkit-transform:scale(1); transform:scale(1); } } .index_banner .slick-dots li{ height: auto} .index_banner .slick-dots li button{ font-size: 16px; line-height: 20px; width: auto; height: auto; border-radius:0; background: none!important; color: #fff; opacity: 0.6} .index_banner .slick-dots li.slick-active button{ font-weight: bold; border-bottom: solid 2px #fff; opacity: 1} @media(min-width:1024px){ .index_banner .photo, .index_banner .slick-list, .index_banner .slick-track, .index_banner .item{ height: 100%;} } @media(max-width:1024px){ .index_banner .pic{ display:block} } .about_main{ background:#f5f8fc no-repeat center bottom; background-size: 100%;} .about_main .main{ display: table; width: 100%} .about_main .box{ display: table-cell; vertical-align: middle} .about_main .left_info{ width: 52%; padding: 0 8.333%} .about_main .left_info .tips{ color: #000; line-height: 150%} .about_main .left_info .txt{ padding-top: 5%; padding-bottom: 10%; color: #666666; max-width: 620px} .about_main .left_info .more { padding: 2% 0} .about_main .left_info .more a{ position: relative; color: #fff; display: inline-block; padding: 2% 12% 2% 6%; background: #004ea2; transition: 0.4s} .about_main .left_info .more a:before{ top: 50%; transition: 0.4s; margin-top: -5px; right: 18%; content: ''; position: absolute; width: 22px; height: 10px; background: no-repeat left} .about_main .left_info .more a:hover{ background: #e60012} .about_main .left_info .more a:hover:before{right: 12%; } .about_main .right_pic{ width: 48%} .about_main .pic_box{ display: table; position: relative;width: 100%} .about_main .pic_box .pic{ width: 50%; display: table-cell} .about_main .pic_box .pic:nth-child(1){ padding-top: 10%; vertical-align: bottom} .about_main .pic_box .pic:nth-child(2){ padding-bottom: 10%; vertical-align: top;text-align: right} .about_main .pic_box .video{ position:absolute; width: 100%; height: 100%; left: 0; bottom: 0;} @media(max-width:1200px){ .about_main .left_info{ padding: 0 5%} } @media(max-width:1024px){ .about_main{ padding: 4% 0} .about_main .box{ display: block; width: 100%} .about_main .pic_box{ max-width: 920px; margin: auto} .about_main .left_info .txt{ max-width: none; padding-bottom: 5%} } .network_main{ background:#002f71 no-repeat center bottom; background-size: 100%;} .network_main .main{ display: table} .network_main .box{ display: table-cell; vertical-align: middle} .network_main .left_info{ width: 52%; padding: 0 8.333%} .network_main .left_info .txt{ padding: 2% 0; color: #fff; opacity: 0.6} .network_main .left_info .roll_num li{ margin-top:10%; border-left: solid 2px #e60012;color: #fff; float: left; width: 50%; padding-left: 23px;} .network_main .left_info .roll_num li b{ font-size: 56px; font-weight: normal;} .network_main .left_info .roll_num li span{ padding-top: 12px; display:block;opacity: 0.6} .network_main .right_map{ width: 48%} .network_main .map{ position: relative} .network_main .map a{ position: absolute; width: 6px; height: 6px;} .network_main .map a:before{ content: ''; position: relative; z-index: 5; display: block; width: 100%; height: 100%;background: #e60012;border-radius: 100px;} .network_main .map b{ position: absolute; color: #fff; white-space: nowrap; bottom: -40px; right:-12px; font-weight: normal} .network_main .map i:before, .network_main .map i:after{ content: ''; position: absolute; left:50%; top:50%; border-radius: 100px; background:#97a1ad; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .network_main .map i:before{ opacity: 0.5;width: 360%; height: 360%; } .network_main .map i:after{ opacity: 0.3;width: 680%; height: 680%; } .network_main .map .shandong{ left: 63.541%; top: 43.432%} .network_main .map .jiangsu{ left: 67.708%; top: 48.728%} .network_main .map .hubei{ left: 59.166%; top: 52.966%} .network_main .map .zhejiang{ left: 68.041%; top: 55.449%} .network_main .map .sichuan{ left: 44.386%; top: 54.237%} .network_main .map .jiangxi{ left: 64.0625%; top: 56.991%} .network_main .map .hunan{ left: 57.812%; top: 58.686%} .network_main .map .fujian{ left: 67.916%; top: 59.851%} .network_main .map .guangxi{ left: 52.291%; top: 65.677%} .network_main .map .guangdong{ left: 60.416%; top: 68.220%} .network_main .map .hainan{ left: 55%; top: 75.423%} .network_main .map .yuenan{ left: 52.291%; top: 83.262%} .network_main .map .guangdong{ width: 10px; height: 10px;} .network_main .map .anhui{left: 61%; top: 48%;} .network_main .map .xianggang{left: 59%; top: 71%;} /* .network_main .map .guangdong b{ opacity: 0} */ .network_main .map .guangdong i:after{ animation: test 1s linear infinite;} @keyframes test{ 0%{opacity:0;width: 360%; height: 360%; } 40%{opacity:0.5;width:500%; height: 500%; } 60%{opacity:1;width: 680%; height: 680%; } 100%{opacity:0;width: 1000%; height: 1000%; } } @media(max-width:1200px){ .network_main .left_info{ padding: 0 5%} .network_main .left_info .roll_num li b{ font-size: 40px;} } @media(max-width:1024px){ .network_main .box{ display: block; width: 100%} } @media(max-width:768px){ .network_main .left_info .roll_num li b{ font-size: 30px;} .network_main .map b{ font-size: 12px} .network_main .map i:before{width: 160%; height: 160%;} .network_main .map i:after{ width: 360%; height: 360%;} .network_main .map .guangdong{width: 7px; height: 7px;} @keyframes test{ 0%{opacity:0;width: 160%; height: 160%; } 40%{opacity:0.5;width:260%; height: 260%; } 60%{opacity:1;width: 360%; height: 360%; } 100%{opacity:0;width: 500%; height: 500%; } } } .product_main .pro_tag{padding: 0 10%} .product_main .info{ float: left} .product_main .tag{ float: right;} .product_main .tag a{ display: inline-block; cursor: pointer;padding: 2.2% 20px;} .product_main .tag a.show{ color: #fff; background: #004ea2; padding-left: 40px; padding-right: 40px;} .product_main .hide{ height: 0; overflow: hidden} .product_main .pro_list{ padding-top: 4%} .product_main .pro_list .item{ padding-left: 20px; padding-right: 20px; text-align: center;} .product_main .pro_list .item:nth-child(odd){ padding-bottom: 20px;} .product_main .pro_list .item:nth-child(even){ padding-top: 20px;} .product_main .pro_list .item a{ padding: 10% 5% 36.646% 5%; display: block; position: relative; background: #f2f6fa} .product_main .pro_list .item .pic{ padding: 53.224% 0; position: relative} .product_main .pro_list .item img{ position: absolute; max-height: 100%; margin: auto; left: 0; right: 0; bottom: 0;-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent) , to(rgba(250, 250, 250, 0.1)));} .product_main .pro_list .item .txt{ position: absolute; width: 100%; bottom: 10%; text-align: center;} @media(max-width:1200px){ .product_main .pro_tag{ padding: 0 5%} } @media(max-width:1024px){ .product_main .info, .product_main .tag{ float: none} .product_main .tag{ padding-top: 4%} .product_main .tag a.show{ padding-left: 20px; padding-right: 20px;} .product_main .pro_list{ padding-bottom: 10%} .product_main .pro_list .item{ padding-left: 10px; padding-right: 10px; } } .honor_main{ background:#104382 no-repeat center bottom; background-size: 100%;} .honor_main .info{ text-align: center; color: #fff} .honor_main .tips{ opacity: 0.7} .honor_main .list{ max-width: 1440px; margin: auto} .honor_main ul{ padding: 0 6%;} .honor_main li{float: left; text-align: center;position: relative; padding-bottom: 4%;} .honor_main li .pic{ position: relative; padding-bottom: 50%;} .honor_main li .pic a{ display: inline-block} .honor_main li .pic img{ position: absolute; max-height: 90%; margin: auto; left: 0; right: 0; bottom: 0; padding: 0px 20px; background: no-repeat right bottom} .honor_main li .txt{ margin-top: -13px; position: relative; padding: 38px 5%; background: repeat-x left top;} .honor_main li .txt:before{position: absolute; top:0; width:20%; height: 100%;background: no-repeat;} .honor_main li h3{ position: relative; z-index: 5; display: none} @media(min-width:769px){ .honor_main li{width:25%;} .honor_main li:nth-child(1), .honor_main li:nth-child(2), .honor_main li:nth-child(3){ width: 33.333%} .honor_main li:nth-child(1) .txt:before, .honor_main li:nth-child(3) .txt:before, .honor_main li:nth-child(4) .txt:before, .honor_main li:nth-child(7) .txt:before{ content: ''; } .honor_main li:nth-child(1) .txt:before, .honor_main li:nth-child(4) .txt:before{ left:-20%;; background-position: left top} .honor_main li:nth-child(3) .txt:before, .honor_main li:nth-child(7) .txt:before{ right:-20%;; background-position: right top} .honor_main li:nth-child(4){ clear: both} } @media(max-width:768px){ .honor_main li{width:50%;} .honor_main li:first-child .txt:before, .honor_main li:nth-child(2n 1) .txt:before, .honor_main li:last-child .txt:before, .honor_main li:nth-child(2n) .txt:before{content: ''; } .honor_main li:first-child:before, .honor_main li:nth-child(2n 1) .txt:before{ left:-4%;; background-position: left top} .honor_main li:last-child .txt:before, .honor_main li:nth-child(2n) .txt:before{ right:-4%;; background-position: right top} .honor_main li:nth-child(2n 1){ clear: both} } .news_main .info{ text-align: center; } .news_main .tips{ padding-bottom: 3%;} .news_main .list{ max-width: 1600px; margin: auto; height: 540px; position: relative} .news_main .list time{ position: absolute; padding: 10px 20px; font-size: 14px;} .news_main .list time b{ display: block; font-size: 32px; padding: 5px 0} .news_main .list li a{ display: block; position: relative} .news_main .list li .jt{margin-top: 20px; width: 22px; height: 10px; transition: 0.3s; background: no-repeat} .news_main .pic_list{ width: 52.5%; height: 100%; position: absolute;} .news_main .pic_list li{ position: absolute; width: 48%; height: 100%} .news_main .pic_list li:nth-child(1){ left: 0} .news_main .pic_list li:nth-child(2){ right: 0} .news_main .pic_list li a{ height: 100%} .news_main .pic_list li .pic{ height: 100%; } .news_main .pic_list li .pic span{ display: block; height: 100%; background: no-repeat center center; background-size: cover} .news_main .pic_list li .pic span:after{ content: ''; width: 100%; height: 40%; bottom: 0; position: absolute; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* ff3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* chrome10-25,safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* w3c, ie10 , ff16 , chrome26 , opera12 , safari7 */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#00000000', endcolorstr='#a6000000',gradienttype=0 ); /* ie6-9 */ } .news_main .pic_list li .txt{ color: #fff; padding:8%; position: absolute; width: 100%; bottom: 0;} .news_main .pic_list li time{ position: absolute; top: 0; background: #145fab; color: #fff; color: #bac9e0} .news_main .pic_list li time b{ color: #fff} .news_main .pic_list li .jt{ height: 0;background-position: left;} .news_main .pic_list li:hover .jt{ height: 10px;} .news_main .font_list{ padding-left: 53.75%} .news_main .font_list ul li{ padding-bottom: 21px;} .news_main .font_list ul li:last-child{ padding-bottom: 0} .news_main .font_list ul li a{ padding: 38px 38px 38px 170px; background: #f5f8fa} .news_main .font_list ul li a:before{ content: ''; position: absolute; left: 130px; width: 1px; top: 25%; height: 50%; background: #f0f0f0} .news_main .font_list ul li time{ left: 20px; top: 50%; color: #004ea2; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%);} .news_main .font_list ul li time b:after{ content: ''; display: block; margin-top: 10px; width: 16px; height: 2px; background: #dce7f1} .news_main .font_list ul li .jt{ background-position: -68px;} .news_main .font_list ul li:hover a{ background: #fff} .news_main .font_list ul li:hover .jt{background-position: -34px;} @media(max-width:1200px){ .news_main .list{height: 528px; } } @media(max-width:960px){ .news_main .list{ height: auto} .news_main .list time{padding: 5px 10px;} .news_main .list time b{ font-size: 20px} .news_main .pic_list{ position:relative; width: 100%; height: auto; padding-bottom: 60%;} .news_main .font_list{ padding: 2%} .news_main .font_list ul li{ padding-bottom: 2%} .news_main .font_list ul li a{padding: 18px 12px 18px 100px;} .news_main .font_list ul li a:before{ left: 80px} .news_main .font_list ul li time{ left: 0} }