img{ max-width: 100%; } .header { width: 100%; height: 90px; position: fixed; z-index: 10000; top: 0; left: 0; background: #fff; } .header .logo { margin-top: 12px; } .header .content { height: 90px; } .header .nav { height: 90px; } .header .nav li { float: left; font-size: 16px; line-height: 90px; width: 100px; text-align: center; position: relative; margin-right: 5px; } .header .nav li:last-child { margin-right: 0; } .header .nav li.active, .header .nav li:hover { background: #213B85; } .header .nav li.active a, .header .nav li:hover a { color: #fff; } .header .nav li a { color: #222333; } .header .nav li:nth-child(6) { margin-right: 0; } .header .nav li dl { background-color: #0e1c5d; line-height: normal; position: absolute; left: 0; top: 90px; width: 150px; z-index: 10; text-align: center; visibility: hidden; } .header .nav li:hover dl{ visibility: visible; opacity: 1; } .header .nav li dl dd { width: 150px; height: 45px; line-height: 45px; font-size: 14px; padding: 0 10px; border-bottom: 1px solid rgba(255,255,255,.3); } .header .nav li dl dd a { color: #f6f7f7; display: inline-block; width: 100%; position: relative; } .header .nav li dl dd a:hover { color: #F70000; } .header .hr { display: flex; align-items: center; } .header .h-right a { display: inline-block; margin-right: 15px; cursor: pointer; } .header .h-right a img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .header .h-right a:hover img { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); } .header .h-right a:nth-child(3) { margin-right: 0; } .header .h-right .wxc { width: 100px; height: 100px; position: absolute; top: 90px; right: 15px; display: none; } .header .h-right .wxc img { display: block; width: 100px; height: 100px; } /*banner*/ .banner { position: relative; } .banner .swiper-container{ height: 100%; } .banner .swiper-slide{ position: relative; } .banner .swiper-slide .bannerImg{ position: absolute; width: 100%; height: 100%; } .banner .swiper-slide .bannerImg img{ display: block; width: 100%; height: 100%; } /*鎵嬫満鏍峰紡*/ .search-bg1 { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background-color: #f5f5f5; display: none; z-index: 2000; } .lang{ position: absolute; right: 80px; top: 15px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .header2 { height: 55px; position: fixed; background: #fff; z-index: 20000; width: 100%; display: none; } .header2 .main-wrap { height: 55px; padding: 0 3%; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); box-sizing: border-box; width: 100%; } .header2 .logo { height: 55px; overflow: hidden; } .header2 .logo a { display: block; } .header2 .logo img { display: block; height:45px; margin-top: 5px; } .header2 .nav-btn { width: 24px; height: 18px; position: relative; cursor: pointer; margin-top: 18px; } .header2 .nav-btn .line { display: block; width: 100%; height: 2px; border-radius: 2px; background-color: #ababab; position: absolute; } .header2 .nav-btn .line1 { -webkit-transform-origin: left 0px 0; -ms-transform-origin: left 0px 0; transform-origin: left 0px 0; } .header2 .nav-btn .line2 { top: 8px; } .header2 .nav-btn .line3 { bottom: 0; -webkit-transform-origin: left 2px 0; -ms-transform-origin: left 2px 0; transform-origin: left 2px 0; } .header2 .sub-menu { width: 100%; padding: 0 2%; display: none; position: absolute; left: 0; top: 60px; z-index: 2; overflow-y: auto; box-sizing: border-box; } .header2 .sub-menu ul { width: 100%; overflow-y: scroll; height: calc(100vh - 55px - 1.5rem); } .header2 .sub-menu li { border-bottom: 1px solid #dcdcdc; font-size: 16px; } .header2 .sub-menu .tit { display: block; width: 100%; padding: 0 3%; line-height: 60px; color: #000; position: relative; box-sizing: border-box; } .header2 .sub-menu .tit i{ float: right; margin: 22px 15px 0 0; } .header2 .sub-menu .sec-list { line-height: 40px; padding: 10px 4%; display: none; } .header2 .sub-menu .sec-list p { /*background: url(../images/ico_04.png) no-repeat left center;*/ background-size: 3px auto; font-size: 14px; } .header2 .sub-menu .sec-list a { padding-left: 3%; color: #666; display: block; } .header2 .nav-btn.active { -webkit-animation: rotate 0.5s linear 0s; animation: rotate 0.5s linear 0s; } .header2 .nav-btn.hover .line { background: #092f6a; } .mainc { padding-top: 80px; margin-top: -80px; } /*home banner*/ .section-home .warpper{ height: 100%; } .section-home .swiper-container{ width: 100%; height: 100%; } .section-home .swiper-container .swiper-wrapper{ width: 100%; height: 100%; } .section-home .swiper-container .swiper-slide{ width: 100% !important; height: 100%; position: relative; display: flex; align-items: center; } /*.section-home .bannerImg{ position: relative; overflow: hidden; width: 100%; height: 100%; }*/ .section-home .bannerImg .imgBg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .section-home .bannerText{ width: 100%; margin-top: -90px; color:#fff; z-index: 3; padding: 0 3%; } .section-home .warpper{ display: flex; align-items: center; } @media (max-width: 1500px){ .section-home .fir img, .section-home .sec img{ max-width: 85%; } } .section-home .slide1 .bannerText .fir{ font-size: 20px; } .section-home .slide1 .bannerText .sec{ font-size: 40px; margin-top: 1%; font-weight: bold; } .section-home .slide1 .bannerText .thr{ margin-top: 3px; text-transform: uppercase; } .section-home .slide1 .bannerText .for{ margin-top: 12%; } .section-home .slide1 a.btn{ display: inline-block; width: 180px; height: 45px; line-height: 45px; color: #fff; padding: 0 4% 0 4%; border-radius: 10px; font-size: 14px; margin-right: 20px; transition: all .5s ease; background: #F70000; } .section-home .slide1 a.btn img{ float: right; margin-top: 13px; } .section-home .slide1 a.btn:hover{ background: #203A84; } /*.section-home .slide2 .imgBg{ background: url("../img/banner2-bg.jpg") no-repeat center / cover; }*/ @keyframes bannerimgAnimate { 0% { transform: scale(1.1); animation-timing-function: ease-in; } 100% { transform: scale(1); animation-timing-function: ease-out; } } .bannerimgAnimate { -webkit-animation-name: bannerimgAnimate; animation-name:bannerimgAnimate; } .section-home .swiper-slide-active .imgBg { animation: bannerimgAnimate 8s linear 0s; } .section-home .swiper-pagination{ bottom: 5%; margin: 0; width: 100%; } .section-home .swiper-pagination-bullet{ width: 50px; height: 4px; background: #fff; opacity: 1; border-radius: 0; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; position: relative; margin-right: 10px; } /*.section-home .swiper-pagination-bullet-active{ width: 36px; background: #009F34; border-radius: 6px; }*/ .section-home .swiper-pagination-bullet:before { position: absolute; display: block; left: 0; top: 0; content: ""; width: 0; height: 4px; background: #F70000; transition: all 0s linear; opacity: 1; } .section-home .swiper-pagination-bullet-active:before { width: 100%; transition: all 5s linear; } .fp-tableCell{ padding-top: 90px; } .footer_index .fp-tableCell{ padding-top: 0px; } /*page2*/ .page2{ background: url(../images/page2.jpg) no-repeat center; background-size: cover; color: #fff; position: relative; } .page2 .box{ color: #fff !important; margin-top: -100px; } .page2 .box .sp{ font-size: 20px;t } .page2 .box h3{ font-size: 34px; line-height: 34px; margin:1% 0 2% 0; } .page2 .box .content{ font-size: 16px; line-height: 32px; max-width: 610px; margin-bottom: 3%; } .page2 .box .button a{ display: inline-block; width: 165px; height: 45px; line-height: 45px; color: #fff; border:1px solid rgba(255,255,255,.3); padding: 0 1.5% 0 2%; border-radius: 30px; font-size: 14px; margin-right: 10px; transition: all .5s ease; } .page2 .box .button a:hover{ background: #F70000; } .page2 .box .button a img{ float: right; margin-top: 14px; } .page2 .list{ position: absolute; left: 0px; bottom: 0px; background: rgba(0,0,0,.5); width: 100%; } .page2 .list ul li{ width: 25%; text-align: center; display: flex; align-items: center; padding: 1% 2% 1%; height: 165px; overflow: hidden; } .page2 .list ul li .inner{ width: 100%; } .page2 .list ul li a h3, .page2 .list ul li a h4{ color: #fff; } .page2 .list ul li img{ margin:0 auto; transition: all 1s ease; height: 50px; } .page2 .list ul li .content{ font-size: 14px; color: #fff; line-height: 26px; height: 0px; transition: all .5s ease; opacity: 0; } .page2 .list ul li h3{ font-size: 18px; margin:10px 0 2px; } .page2 .list ul li h4{ font-size: 14px; text-transform: uppercase; } .page2 .list ul li span{ display: inline-block; width: 20px; border:1px solid #F80000; } .page2 .list ul li.active{ background: #213A84; padding-top: .5%; } .page2 .list ul li.active img{ transform: scale(.8); } .page2 .list ul li.active h3{ font-size: 24px; margin-top: 0px; } .page2 .list ul li.active h4{ display: none; } .page2 .list ul li.active span{ display: none; } .page2 .list ul li.active .content{ opacity: 1; height: auto; } /*paeg3*/ .page3{ background: url(../images/page3.jpg) no-repeat center; background-size: cover; color: #fff; position: relative; } .page3 .container>.rob{ position: relative; height: 100%; } .page3 .box{ width: 75%; display: flex; align-items: center; height: calc(100% - 90px); margin-top: 90px; max-width: 1250px; } .page3 .box .inner{ width: 100%; } .page3 .box .rob{ width: 100%; } .page3 .light{ width: 24%; position: absolute; right: 0px; bottom: 0px; height: calc(100% - 100px); background: url(../images/light.png) no-repeat center top; background-size: contain; } .page3 .box .glo_title{ width: 30%; color: #213B85; } .page3 .glo_title .square{ margin:5% 0; } .glo_title .sp{ font-size: 20px; text-transform: uppercase; } .glo_title h3{ font-size: 32px; line-height: 32px; margin:1% 0 0% 0; font-weight: bold; } .glo_title .square{ width: 23px; height: 14px; background: url(../images/square1.png) no-repeat center; margin:1.5% 0; } .glo_title h4{ font-size: 22px; } .glo_title.w .sp{ color: #fff; } .glo_title.w h3{ color: #fff } .glo_title.b .sp{ color: #213A84; } .glo_title.b h3{ color: #213A84 } .glo_title.w .square{ background: url(../images/square.png) no-repeat center; } .glo_title.w h4{ color: #fff; } .page3 .box .list{ width: 65%; } .page3 .box .list ul li{ width: 22%; margin-right: 3%; height: 40px; line-height: 40px; margin-bottom: 1.5%; color: #555555; border-radius: 10px; padding: 0 10px; } .page3 .box .list ul li:nth-child(4n){ margin-right: 0px; } .page3 .box .list ul li a{ color: #555555; font-size: 15px; transition: all .5s ease; } .page3 .box .list ul li:hover{ background: #213A84; color: #fff; } .page3 .box .list ul li:hover a{ color: #fff; } .product_list{ margin-top: 2%; width: 100%; position: relative; overflow: hidden; padding-bottom: 5%; font-size: 14px; } .product_list .title{ height: 40px; line-height: 40px; border-bottom: 1px solid #555555; transition: all .5s ease; } .product_list .title h3{ transition: all .5s ease; } .product_list .title i{ margin:12px 5px 0 0; } .product_list ul li:hover h3, .product_list .swiper-slide:hover p{ font-weight: bold; color: #0E2C7B; } .page3 .swiper-button-next, .page3 .swiper-button-prev{ width: 50px; height: 50px; background: #00428D; border-radius: 50%; } .page3 .swiper-button-next:hover, .page3 .swiper-button-prev:hover{ background: #da0000; } .page3 .swiper-button-next::after, .page3 .swiper-button-prev::after{ font-size: 14px; color: #fff; } /*page4*/ .page4 .bg{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #ccc; } .page4 .bg .list{ width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; position: absolute; left: 0px; top: 0px; } .page4 .bg .list.active{ opacity: 1; } .page4 .glo_title{ margin-top: -7%; position: relative; } .page4 .box{ position: absolute; width: 96%; color: #fff; left: 2%; bottom: 10%; } .page4 .box ul li{ width: 25%; text-align: center; cursor: pointer; padding: 2%; position: relative; z-index: 0; background: none; } .page4 .box ul li a{ color: #fff; } .page4 .box ul li img{ margin:0 auto; height: 40px; } .page4 .box ul li h3{ font-size: 20px; margin:4% 0 1% 0; } .page4 .box ul li h4{ font-size: 13px; text-transform: uppercase; } .page4 .box ul li:before{ content: ''; display: block; width: 0%; height: 100%; position: absolute; left: 0; top: 0; background: #F80000; transition: all .2s linear; -webkit-transition: all .2s linear; z-index: -1; } .page4 .box ul li.active:before{ width: 100%; } /*page5*/ .page5{ background: url(../images/page5.jpg) no-repeat center; background-size: cover; position: relative; } .page5 .box{ width: 20%; } .page5 .glo_title .sp, .page5 .glo_title h3, .page5 .glo_title h4{ color: #213B85; } .page5 .glo_title .square{ margin:5% 0; } .page5 .box .text{ margin:20% 0; line-height: 26px; color: #213B85; } .page5 .box .tel .t1{ width: 230px; height: 45px; line-height: 45px; color: #fff; background: #213B85; text-align: center; font-size: 14px; } .page5 .box .tel .t1 b{ font-size: 18px; } .page5 .box .tel .t2{ margin-top: 10px; width: 230px; height: 45px; line-height: 45px; color: #fff; background: #F80000; font-size: 14px; transition: all .5s ease; } .page5 .box .tel .t2:hover{ background: #213B85; } .page5 .box .tel .t2 a{ color: #fff; } .page5 .box .tel .t2 img{ float: left; margin:10px 10px 0 60px; } .page5 .list{ width: 75%; } .page5 .list .ss{ width: 32%; background: #fff; padding: 3% 2% 0 2%; border-radius: 10px; } .page5 .list .ss .title{ padding-bottom: 6%; border-bottom: 1px solid #E5E5E5; } .page5 .list .ss .title img{ height: 45px; } .page5 .list .ss .title h3{ font-size: 22px; font-weight: bold; color: #0D2F7C; } .page5 .list .ss .title p{ text-transform: uppercase; font-size: 12px; color: #9E9E9E; } .page5 .list .ss .image{ margin:25px 0 20px; } .page5 .list .ss .image img{ transition: all .5s ease; } .page5 .list .ss .image:hover img{ transform: scale(1.05); } .page5 .list .ss .content{ line-height: 26px; font-size: 15px; color: #626262; } .page5 .list .ss .more{ margin-top: 20px; border-top: 1px solid #E5E5E5; height: 50px; line-height: 50px; font-size: 14px; } .page5 .list .ss .more:hover a{ color: #0E2A79; } .page5 .list .ss .more i{ margin:18px 0 0 0; } /*page6*/ .page6{ background: url(../images/page6.jpg) no-repeat center; background-size: cover; position: relative; } .page6 .newstype{ float: right; margin-top: -96px; } .page6 .newstype ul li{ width: 170px; height: 50px; line-height: 50px; text-align: center; background: #1A1B5C; margin-left: 10px; font-size: 15px; transition: all .5s ease; } .page6 .newstype ul li a{ color: #fff; } .page6 .newstype ul li:hover, .page6 .newstype ul li.active{ background: #F70000; } .page6 .news_index .news_pane{ display: none; } .page6 .news_index .news_pane.active{ display: block; } .page6 .news_pane .toplist .inner{ width: 49%; background: #fff; } .page6 .news_index .swiper-pagination{ bottom: -1%; } .page6 .news_pane .toplist .inner .img{ width: 30%; } .page6 .news_pane .toplist .inner .text{ width: 65%; padding: 3% 4% 3% 0; } .page6 .news_pane h3{ font-size: 19px; } .page6 .news_pane .content{ font-size: 15px; color: #808080; line-height: 26px; margin:2% 0 3%; } .page6 .news_pane .time{ font-size: 14px; color: #555555; } .page6 .news_pane .time i{ color: #F70000; margin-right: 5px; } .page6 .news_pane h3:hover a{ color: #F70000 } .page6 .news_pane .box{ margin-top: 2%; overflow: hidden; position: relative; padding-bottom: 3%; } .page6 .news_pane .box .swiper-slide{ background: #fff; padding: 3% 2%; } .page6 .swiper-pagination{ bottom: 5%; margin: 0; width: 100%; } .page6 .swiper-pagination-bullet{ width: 50px; height: 4px; background: #fff; opacity: 1; border-radius: 0; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; position: relative; margin-right: 10px; } /*.page6 .swiper-pagination-bullet-active{ width: 36px; background: #009F34; border-radius: 6px; }*/ .page6 .swiper-pagination-bullet:before { position: absolute; display: block; left: 0; top: 0; content: ""; width: 0; height: 4px; background: #F70000; transition: all 0s linear; opacity: 1; } .page6 .swiper-pagination-bullet-active:before { width: 100%; transition: all 5s linear; } /*搴曢儴*/ .footer{ width: 100%; background: #212128; padding: 40px 0 0 0; } .footer .tp ul li{ padding: 15px 15px; } .footer .tp ul li a{ color: #fff; transition: all .5s ease; font-size: 16px; } .footer .link h3{ font-size: 24px; } .footer .link p{ font-size: 12px; } .footer .tp{ border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 15px; color: #fff; } .footer .pd{ width: 50%; } .footer .pd h3{ font-size: 16px; margin-bottom: 15px; } .footer .pd ul{ width: 33%; } .footer .pd ul li{ font-size: 14px; margin-bottom: 10px; width: 100%; } .footer .detail{ padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 15px; } .footer .detail, .footer .detail a{ color: #fff; } .footer .detail .add{ line-height: 30px; } .footer .detail .add h3{ font-size: 30px; font-weight: bold; color: #fff; } .footer .detail .add h5{ text-transform: uppercase; margin-bottom: 15px; } .footer .tp ul li a:hover, .footer a:hover{ color: #F70000; } .footer .er{ width: 100px; font-size: 12px; text-align: center; line-height: 20px; } .footer .er img{ width: 100px; height: 100px; margin-bottom: 10px; } .footer .bottom{ color: #A9AAAA; padding: 15px 0; font-size: 14px; } .footer .bottom a{ color: #A9AAAA; } .footer .bottom a:hover{ color: #FF6800; } .footer .bottom .foot-l div{ margin-right: 20px; } /*鍐呴〉寮€濮?/ .ny-banner { width: 100%; height: calc(100vh - 25px); overflow: hidden; position: relative; display: flex; align-items: center; padding-top: 90px; } .ny-banner .img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ny-banner .img img { width: 100%; height: 100%; } .ny-banner .title { position: relative; width: 100%; } .ny-banner .title h3 { font-size: 36px; height: 36px; position: relative; color: #0e1c5d; } .ny-banner .title h4 { color: #0e1c5d; font-size: 44px; line-height: 44px; text-transform: uppercase; opacity: 1; transition: all .4s linear 1s; animation-delay: 1s; -webkit-transition: all .4s linear 1s; } .ny-banner .title .ico { display: block; margin-top: 50px; box-sizing: border-box; width: 45px; height: 45px; border-radius: 50%; border: 1px solid #fff; position: relative; opacity: 1; transition: all .4s linear 1.4s; -webkit-transition: all .4s linear 1.4s; } .ny-banner .title .ico i { display: block; width: 100%; height: 100%; background: url(../images/ico_16.png) no-repeat center; position: absolute; left: 0; top: 0; animation: downico 1.5s ease-out infinite; } @keyframes downico { 0% { top: 0; opacity: 1; } 35% { top: 50%; opacity: 0; } 65% { top: -50%; opacity: 0; } 100% { top: 0; opacity: 1; } } .ny-banner .title .color-f { color: #fff; } /*鍐呴〉瀵艰埅*/ .ny-nav { width: 100%; height: 80px; box-sizing: border-box; border-bottom: 1px solid #efefef; position: relative; z-index: 999; background: #fff; transition: all .4s linear .2s; -webkit-transition: all .4s linear .2s; } .ny-nav .rob{ width: 1600px; margin:0 auto; } .ny-nav { max-width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .ny-nav li { float: left; height: 80px; font-size: 16px; line-height: 80px; position: relative; padding: 0 20px } .ny-nav li:before { content: ''; width: 0; height: 3px; background: #012a6c; position: absolute; left: 0; bottom: 0; transition: all 0.8s; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; } .ny-nav li.active:before, .ny-nav li:hover:before { width: 100%; } .ny-nav li a { color: #666; } .ny-nav li.active a, .ny-nav li:hover a { color: #012a6c; } .ny-nav .fl { float: right; padding-left: 20px; position: relative; font-size: 14px; color: #999; line-height: 80px; } .ny-nav .fl a { font-size: 14px; color: #999; } .com_inner .container{ width: 1600px; margin: 0 auto; } /*鍏徃绠€浠?/ .com_inner{ max-width: 1920px; margin:0 auto; } .com_inner .company_inner{ padding: 50px 0; } .com_inner .company_inner .text{ width: 65%; } .com_inner .company_inner h4{ font-size: 32px; text-transform: uppercase; } .com_inner .company_inner h3{ font-size: 32px; color: #213A84; margin-bottom: 25px; } .com_inner .count{ width: 32%; display: flex; align-items: center; } .com_inner .count .num{ width: 50%; padding: 7% 0; text-align: center; border-bottom: 1px solid #DCDCDC; } .com_inner .count .num img{ margin:0 auto 20px; height: 63px; } .com_inner .count .num .n1{ font-size: 48px; color: #213A84; font-weight: bold; font-family: 'Impact'; } .com_inner .count .num .n1 i{ font-family: 'Impact'; } .com_inner .count .num sub{ background: #213A84; border-radius: 50%; color: #fff; font-size: 14px; height: 23px; width: 23px; text-align: center; line-height: 23px; display: inline-block; } .glo_title.tc{ padding: 70px 0 30px; } .glo_title.tc h3{ margin-top: 0px; font-size: 32px; } .glo_title.tc .square{ margin:20px auto; } .glo_title.w p{ color: #fff; } /*浼佷笟鏂囧寲*/ .com_inner .cul{ background: url(../images/cul.jpg) no-repeat center; padding-bottom: 60px; } .com_inner .cul .inner{ width: 24%; padding: 3% 2% 2%; background: rgba(12,81,156,.4); color: #fff; position: relative; } .com_inner .cul .inner h3{ font-size: 24px; font-weight: bold; } .com_inner .cul .inner h5{ font-size: 14px; text-transform: uppercase; } .com_inner .cul .inner .content{ font-size: 16px; line-height: 28px; margin-top: 25px; } .com_inner .cul .inner .img{ position: absolute; right: 6%; top: 16%; } .com_inner .cul .inner .img img{ height: 53px; } /*鑽h獕璧勮川*/ .com_inner .honor{ background: url(../images/honor.jpg) no-repeat center bottom; padding-bottom: 60px; } .com_inner .honor .box .text{ width: 55%; } .com_inner .honor .box .text h4{ font-size: 26px; line-height: 26px; } .com_inner .honor .box .text h3{ font-size: 30px; font-weight: bold; color: #213A84; } .com_inner .honor .box .text .content{ font-size: 16px; line-height: 30px; margin:30px 0; } .com_inner .honor .img{ width: 40%; display: flex; align-items: center; } .com_inner .honor .img img{ max-width: 75%; } .com_inner .honor a.btn{ display: inline-block; width: 180px; height: 45px; line-height: 45px; color: #fff; padding: 0 4% 0 4%; border-radius: 10px; font-size: 14px; margin-right: 20px; transition: all .5s ease; background: #F70000; } .com_inner .honor a.btn img{ float: right; margin-top: 13px; } .com_inner .honor a.btn:hover{ background: #203A84; } /*浼佷笟灞曠ず*/ .com_inner .show .glo_title{ padding-bottom: 0px; } .com_inner .show{ margin-bottom: 50px; } .com_inner .show .video{ width: 60%; background: #213A85; position: relative; } .com_inner .show .text{ width: 40%; background: #213A85; color: #fff; display: flex; align-items: center; } .com_inner .show .text h3{ font-size: 24px;font-weight: bold; margin-bottom: 20px; } .com_inner .show .text{ padding: 0 3%; } .com_inner .show .text .content{ line-height: 28px; } .com_inner .show a.btn{ display: inline-block; width: 180px; height: 45px; line-height: 45px; color: #fff; padding: 0 4% 0 4%; border-radius: 10px; font-size: 14px; margin-right: 20px; transition: all .5s ease; border:1px solid #fff; margin-top: 20px; } .com_inner .show a.btn img{ float: right; margin-top: 13px; } .com_inner .show a.btn:hover{ background: #F70000; border:1px solid #F70000; } /*浜у搧鍒嗙被*/ .sider{ margin:50px 0 30px; } .sider ul li{ width: 16%; margin-right: .6%; height: 50px; line-height: 50px; background: #213A85; margin-bottom: 10px; text-align: center; font-size: 15px; color: #fff; padding: 0 10px; } .sider ul li:nth-child(6n){ margin-right: 0px; } .sider ul li a{ color: #fff; display: block; width: 100%; height: 100%; } .sider ul li:hover{ background: #F70000; border-radius: 40px; } .sider ul li.active{ background: #F70000; border-radius: 40px; } .com_inner .product_list{ padding-bottom: 30px } .com_inner .product_list ul li{ width: 19%; margin-right: 1%; margin-bottom: 1%; } .com_inner .product_list ul li .title{ height: 50px; line-height: 50px; } .com_inner .product_list ul li h3{ float: left; width: 85%; } .com_inner .product_list ul li i{ margin:17px 10px 0 0; } .com_inner .product_list ul li:hover img{ transform: scale(1.05); } .com_inner .product_list ul li:hover .title{ color: #213A84; font-weight: bold; } .com_inner .pro_info{ background: url(../images/pro.jpg) no-repeat center; padding: 90px 0 50px; background-size: cover; } .com_inner .pro_info .sider li{ background: #f5f5f5; } .com_inner .pro_info .sider li.active{ background: #f70000; } .com_inner .pro_info .sider li.active a{ color: #fff; } .com_inner .pro_info .sider a{ color: #000; transition: all .5s ease; } .com_inner .pro_info .sider li:hover{ background: #F70000; } .com_inner .pro_info .sider li:hover a{ color: #fff; } /*.com_inner .pro_info_box{ background: #f5f5f5; padding: 2%; }*/ .com_inner .pro_info_box .img{ max-height: 500px; width: 40%; background: #fff; } .com_inner .pro_info_box .text{ width: 57%; color: #fff; display: flex; align-items: center; } .com_inner .pro_info_box .text h3{ font-size: 30px; font-weight: bold; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 10px; } .com_inner .pro_info_box .text .tags{ line-height: 28px; margin:24px 0; } .com_inner .pro_info_box .text ul li{ width: 24%; background: #fff; padding: 2%; text-align: center; } .com_inner .pro_info_box .text ul li img{ margin:0 auto; } .com_inner .pro_info_box .text ul li h4{ font-size: 20px; font-weight: bold; color: #000; margin:10px 0 5px; } .com_inner .pro_info_box .text ul li p{ font-size: 14px; color: #B4B4B4; } .com_inner .pro_info_box .text .zx{ font-size: 16px; color: #fff; margin-top: 30px; } .com_inner .pro_info_box .text .zx .tel{ background: #213A84; padding: 10px 30px; } .com_inner .pro_info_box .text .zx .tel b{ font-size: 20px; } .com_inner .pro_info_box .text .zx .xj{ background: #F70000; padding: 10px 30px; } .com_inner .pro_info_box .text .zx .xj a{ color: #fff; } .com_inner .other .glo_title{ padding-bottom: 0px; } .com_inner .other .product_list{ margin-top: 0px; } /*宸ョ▼妗堜緥*/ .com_inner .casetype{ margin:50px 0; } .com_inner .casetype ul li{ width: 49%; margin-bottom: 2%; } .com_inner .casetype ul li .cici{ position: relative; } .com_inner .casetype ul li .cici .cover{ position: absolute; width: 90%; left: 5%; bottom: 5%; color: #fff; } .com_inner .casetype ul li .cici .cover h3{ font-size: 24px; font-weight: bold; } .com_inner .casetype ul li .cici .cover .more{ display: inline-block; padding: 8px 35px; background: #F70000; color: #fff; border-radius: 10px; margin-top: 10px; opacity: 0; font-size: 14px; } .com_inner .casetype ul li .cici:hover .cover{ bottom: 12%; } .com_inner .casetype ul li .cici:hover .more{ opacity: 1; } .com_inner .caselist{ margin:50px 0; } .com_inner .caselist ul li{ width: 32%; margin-right: 1%; margin-bottom: 1%; position: relative; } .com_inner .caselist ul li .cici .cover{ position: absolute; width: 100%; left: 0%; bottom: 0%; color: #fff; } .com_inner .caselist ul li .cici .cover h3{ font-size: 16px; font-weight: bold; padding: 0 10px; height: 50px; line-height: 50px; background: rgba(34,65,128,.4); } .com_inner .caselist ul li:hover img{ transform: scale(1.05); } .com_inner .caselist ul li .cici:hover h3{ background: #F70000; } /*鏈嶅姟*/ .com_inner .service .glo_title{ padding-bottom: 0px; } .com_inner .service h4{ font-size: 18px; font-weight: bold; } .com_inner .service .content{ line-height: 28px; margin-top: 10px; } .com_inner .service{ margin-bottom: 50px; } .com_inner .service ul{ margin: 40px auto; } .com_inner .service ul li{ width: calc(100% /7); text-align: center; cursor: pointer; } .com_inner .service ul li .img{ width: 110px; height: 110px; border-radius: 50%; border:2px solid #213A84; display: flex; align-items: center; margin:0 auto; } .com_inner .service ul li .img img{ margin:0 auto; height: 45px; transition: all .5s ease; } .com_inner .service ul li p{ font-size: 16px; font-weight: bold; margin-top: 15px; } .com_inner .service ul li:hover img{ transform: rotateY(180deg); } .com_inner .service .fuwu{ text-align: left; } .com_inner .service .fuwu img{ margin:20px auto; } /*鏂伴椈*/ .news-list{ padding: 50px 0; } .news-list .list2 li { width: 32%; float: left; margin-right: 2%; box-sizing: border-box; background: #fff; border: 1px solid #f4f4f4; margin-bottom: 50px; } .news-list .list2 li:nth-child(3n) { margin-right: 0; } .news-list .list2 li .img { width: 100%; overflow: hidden; max-height: 240px; cursor: pointer; } .news-list .list2 li .img img { display: block; width: 100%; transition: all 0.6s; } .news-list .list2 li .img:hover img { transform: scale(1.05); } .news-list .list2 li .word { padding: 6% 4%; cursor: pointer; } .news-list .list2 li .word h3 { font-size: 18px; line-height: 24px; margin-bottom: 20px; font-weight: bold; color: #333; } .news-list .list2 li .word .content { font-size: 14px; line-height: 24px; color: #666; } .news-list .list2 li .time { width: calc(100% - 20px); margin: 0 auto; height: 50px; position: relative; border-top: 1px solid #ebebeb; line-height: 50px; font-size: 14px; } .news-list .list2 li:hover h3{ color: #213A84; } .news-list .list2 li .time span.fx { float: right; } /*鑱旂郴鎴戜滑*/ .contact_us_box{ margin-top: 50px; } .contact_us_box .map #dituContent{ width: 100%; height: 650px; } .contact_us_box .map #dituContent img{ max-width: inherit; display: initial; } .contact_us_box .map .contact-map{ position: relative; } .contact_us_box .map .contact-map .add_box{ position: absolute; width: 90%; left: 5%; bottom: 5%; } .contact_us_box .map .contact-map .add_box li{ width: 30%; padding: 2% 2%; box-sizing: border-box; background: #fff; font-size: 16px; color: #213A84; font-weight: bold; } .contact_us_box .map .contact-map .add_box li img{ float: left; margin-right: 15px; } .contact_us_box .map .contact-map .add_box li:last-child{ border:none; } .contact_us_box .map .contact-map .add_box li p.m{ margin:3px 0 5px; color: #505050; font-size: 16px; font-weight: normal; } .contact_us_box .map .contact-map .add_box li p b{ font-size: 20px; } .contact_us_box .map .contact-map .add_box li p a{ color: #fff; transition: all 0.5s; } .contact_us_box .map .contact-map .add_box li p a:hover{ color: #cccccc; } .contact_us_box .map .contact-map .add_box li p.t span{ font-size: 20px; } /*鍦ㄧ嚎鐣欒█*/ .message_box{ padding-bottom: 50px; } .contact-liuyan .form-right{ display: flex; flex-direction: row; flex-wrap: wrap; width: 50%; } .contact-liuyan .inputbox{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; position: relative; } .contact-liuyan input[type=text]{ width: 48.5%; line-height: 45px; border:1px solid #eee; padding-left: 15px; outline: none; background: #fff; font-size:14px; color:#333; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; margin-bottom: 8px; } .contact-liuyan input:focus{ border:1px solid #f70000; } .contact-liuyan input[type=text]::placeholder{ font-size:14px; color:#999; } .contact-liuyan input[name=captcha]{ width: 40%; margin-right: 15px; } .contact-liuyan .verify{ height: 45px; width: 20%; } .contact-liuyan .verify img{ height: 100%; } .contact-liuyan textarea{ width:100%; height: 155px; border:1px solid #eee; padding:15px; outline: none; resize: none; font-size:14px; color:#333; margin-bottom: 8px; font-family: "Microsoft Yahei"; } .contact-liuyan textarea::placeholder{ font-size:14px; color:#999; } .contact-liuyan textarea:focus{ border:1px solid #f70000; } .contact-liuyan .submit{ display: block; width: 30%; line-height: 47px; text-align:center; color:#fff; height: 47px; font-size:16px; background: #213A84; cursor: pointer; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .contact-liuyan .submit:hover{ background: #F70000; } /*灞曚細*/ .com_inner .zhfc{ padding: 50px 0; } .com_inner .zhfc ul li{ width: 24%; margin-right: 1%; margin-bottom: 1%; background: #F0F0F0; } .com_inner .zhfc ul li:nth-child(4n){ margin-right: 0px; } .com_inner .zhfc ul li h4{ display: block; height: 50px; line-height: 50px; } .com_inner .zhfc ul li:hover img{ transform: scale(1.05); } .com_inner .zhfc ul li .text{ padding: 3% 6%; } .com_inner .zhfc ul li h4{ font-size: 16px; text-align: center; } .com_inner .zhfc ul li .c{ font-size: 14px; color: #7F7F7F; line-height: 26px; } .com_inner .zhfc ul li a.more{ font-size: 14px; margin-top: 20px; display: inline-block; } .com_inner .zhfc ul li a.more:hover{ color: #21389C; } .com_inner .zhfc ul li a:hover h4{ color: #21389C; } /*鍒嗛〉*/ .de-page-mian { overflow: hidden; text-align: center; font-size: 0; margin: 10px 0 35px; } .de-page-mian .page-inner { display: inline-block; overflow: hidden; } .de-page-mian .page-inner a { display: block; float: left; min-width: 26px; padding: 0 14px; height: 36px; border: 1px solid #dddddd; background: #fff; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin-right: -1px; overflow: hidden; } .de-page-mian .page-inner a.active, .de-page-mian .page-inner a:hover { color: #fff; border-color: #1550A9; background: #1550A9; } .de-page-mian .page-inner a.prev { margin-right: 10px; background: #fff url(../images/prev.jpg) no-repeat center; } .de-page-mian .page-inner a.prev.on { background: #fff url(../images/prev-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.prev:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.next { margin-left: 10px; margin-right: 15px; background: #fff url(../images/next.jpg) no-repeat center; } .de-page-mian .page-inner a.next.on { background: #fff url(../images/next-hover.jpg) no-repeat center; } .de-page-mian .page-inner a.next:hover { background-color: #fff; border-color: #dddddd; } .de-page-mian .page-inner a.page-btn { font-size: 12px; margin-right: 0; width: 63px; margin-left: 10px; } .de-page-mian .page-inner span { display: block; font-size: 12px; color: #333; float: left; line-height: 38px; } .de-page-mian .page-inner input { display: block; float: left; height: 36px; width: 36px; border: 1px solid #dddddd; text-align: center; line-height: 36px; font-size: 14px; color: #333; margin: 0 5px; } .tabbar { display: none; position: fixed; height: 56px; z-index: 99;left: 0px;bottom: 0px;} @media (max-width: 767.98px) { .tabbar { display: block; } } .tabbar .tabbar-wrap { position: fixed; z-index: 99; bottom: 0; width: 100%; height: 56px; display: flex; justify-content: space-between; background-color: #1a4893; color: #ffffff; } .tabbar .tabbar-wrap .tabbar-item { flex: 1; max-width: 25%; } .tabbar .tabbar-wrap .tabbar-item .item-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } .tabbar .tabbar-wrap .tabbar-item .item-icon { font-size: 30px;color: #fff; text-align: center; } .tabbar .tabbar-wrap .tabbar-item .item-icon svg { width: 100%; height: 100%; } .tabbar .tabbar-wrap .tabbar-item .item-icon svg path { fill: #ffffff; } .tabbar .tabbar-wrap .tabbar-item .item-name { color: #ffffff; text-align: center; font-size: 12px; line-height: 1; } .tabbar .tabbar-wrap .tabbar-item.backTop { background-color: var(--theme-color); } /*瑙嗛*/ .page2 .box .company_box_video { display: inline-block; width: 165px; height: 45px; line-height: 45px; color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 0 1.5% 0 2%; border-radius: 30px; font-size: 14px; transition: all .5s ease; position: relative; } .page2 .box .company_box_video:hover{ background: #F70000; } .page2 .box .company_box_video img{ float: right; margin-top: 13px; } .page2 .box .company_box_video .marketing-about-thumb .about-video-btn{ width: 100%; opacity: 0; } .marketing-about-thumb { margin: 0 } @media(max-width:991px) { .marketing-about-thumb { margin-bottom: 50px } } .marketing-about-thumb:before { /*background-color: rgba(0,0,0,0.6);*/ content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100% } .marketing-about-thumb .about-video-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%) } .marketing-about-thumb .btn-video-popup { border-radius: 50%; border: 5px solid #FFF; color: #FFF; display: block; text-align: center; height: 80px; width: 80px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 2; -webkit-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s } .marketing-about-thumb .btn-video-popup:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05) } .marketing-about-thumb .btn-video-popup i { font-size: 24px } @media(max-width:575px) { .marketing-about-thumb .btn-video-popup { width: 70px; height: 70px } .marketing-about-thumb .btn-video-popup i { font-size: 20px } } .ui-widget-overlay { background: #aaa; opacity: .3; filter: Alpha(Opacity=30) } .ui-widget-shadow { -webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666 } .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: .8 } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: 0!important; backface-visibility: hidden } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle } .mfp-align-top .mfp-container:before { display: none } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045 } .mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content { width: 100%; cursor: auto } .mfp-ajax-cur { cursor: progress } .mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in } .mfp-auto-cursor .mfp-content { cursor: auto } .mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader { -webkit-user-select: none; -moz-user-select: none; user-select: none } .mfp-loading.mfp-figure { display: none } .mfp-hide { display: none!important } .mfp-preloader { color: #ccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -.8em; left: 8px; right: 8px; z-index: 1044 } .mfp-preloader a { color: #ccc } .mfp-preloader a:hover { color: #fff } .mfp-s-ready .mfp-preloader { display: none } .mfp-s-error .mfp-content { display: none } button.mfp-arrow,button.mfp-close { overflow: visible; cursor: pointer; background: 0; border: 0; -webkit-appearance: none; display: block; outline: 0; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation } button::-moz-focus-inner { padding: 0; border: 0 } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: .65; padding: 0 0 18px 10px; color: #fff; font-style: normal; font-size: 28px; font-family: Arial,Baskerville,monospace } .mfp-close:focus,.mfp-close:hover { opacity: 1 } .mfp-close:active { top: 1px } .mfp-close-btn-in .mfp-close { color: #333 } .mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close { color: #fff; right: -6px; text-align: right; padding-right: 6px; width: 100% } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; margin-top: 90px; } .mfp-iframe-holder .mfp-close { top: -40px } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25% } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0,0,0,.6); background: #000 } /*瑙嗛缁撴潫*/ /*鏂伴椈璇︽儏*/ .com_inner.newsinfo{ background: #F5F5F5; padding: 40px 0; } .com_inner .news_info_box .news_info_text{ width: 75%; background: #fff; box-sizing: border-box; } .com_inner .news_info_box .onews{ border-left: 1px solid #eeeeee; box-sizing: border-box; width: 25%; background: #fff; } .com_inner .news_info_box .news_info_text .news_detail_title{ border-bottom: 1px solid #eeeeee; padding: 3% 2% 2%; box-sizing: border-box; } .com_inner .news_info_box .news_info_text .news_detail_title h3{ font-size: 22px; margin-bottom: 5px; } .com_inner .news_info_box .news_info_text .news_detail_title .b{ font-size: 15px; color: #555555; margin-top: 12px; } .com_inner .news_info_box .news_info_text .news_detail_title .b i{ margin-right: 10px; color: #213A84; } .com_inner .news_info_box .news_info_text .news_detail_title .b a{ color: #555555; font-size: 18px; margin-right: 10px; } .com_inner .news_info_box .news_info_text .news_detail_title .b a.f-add{ font-size: 22px; } .com_inner .news_info_box .news_info_text .news_detail_title .b a.f-dec{ font-size: 14px; margin-right: 0px; } .com_inner .news_info_box .news_info_text .news_detail_title .b a:hover{ color: #213A84; } .com_inner .news_info_box .news_info_text .content{ padding: 4%; box-sizing: border-box; } .com_inner .news_info_box .news_info_text .content img{ margin: 0 auto; } .com_inner .news_info_box .onews_title{ font-size: 20px; color: #555555; font-weight: 400; padding: 5% 5%; border-bottom: 1px solid #eeeeee; } .com_inner .news_info_box .other_list{ padding: 2.5% 5%; box-sizing: border-box; margin-bottom: 0px; } .com_inner .news_info_box .other_list li{ margin-bottom: 6%; } .com_inner .news_info_box .other_list .cici{ width: 40%; position: relative; padding-bottom: 32%; height: 0px; } .com_inner .news_info_box .other_list.cate_list li{ width: 50%; } .com_inner .news_info_box .other_list.cate_list li .imc{ overflow: hidden; margin-bottom: 5px; } .com_inner .news_info_box .other_list.cate_list li a{ color: #555555; } .com_inner .news_info_box .other_list .cici img{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } .com_inner .news_info_box .other_list .g{ width: 55%; padding-top: 3%; box-sizing: border-box; } .com_inner .news_info_box .other_list .g a{ color: #555555; } .com_inner .news_info_box .other_list .g h4{ margin-bottom: 10px; } .com_inner .news_info_box .other_list .g p{ font-size: 14px; color: #777777; } .com_inner .news_info_box .other_list .g p i{ margin-right: 5px; } .com_inner .news_info_box .other_list .g p a{ color: #555555; } .com_inner .news_info_box .other_list .g p.more{ margin-top: 10px; } .com_inner .news_info_box .other_list li:hover img{ transform: scale(1.1); } .com_inner .news_info_box .other_list.cate_list li:hover img{ transform: scale(1); -webkit-transform: rotate(360deg); animation: rotation 4s linear infinite; -moz-animation: rotation 4s linear infinite; -webkit-animation: rotation 4s linear infinite; -o-animation: rotation 4s linear infinite; } .com_inner .news_info_box .other_list.cate_list li:hover a{ color: #f70000; } .com_inner .news_info_box .other_list li:hover p.more a{ color: #f70000; } .com_inner .onews .newsPage .page-a{ padding: 0 5%; box-sizing: border-box; border-bottom: 1px solid #eeeeee; font-size: 14px; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .com_inner .onews .newsPage{ border-top:1px solid #eeeeee; } .com_inner .onews .newsPage .page-a a{ color: #555; line-height: 55px; display: inline; } .com_inner .onews .newsPage .cl1{ position: relative; overflow: hidden; } .com_inner .onews .newsPage .cl1:before{ content: ''; display: block; position: absolute; width: 0; height: 0px; border-bottom:2px solid #213A84; left: 0px; bottom: 0px; transition: all 0.5s; } .com_inner .onews .newsPage .cl1:hover:before{ width: 100%; } .com_inner .onews .newsPage .cl1:hover a{ color: #213A84; } .com_inner .news_info_box .news-img{ margin-bottom: 30px; } .com_inner .news_info_box .news-img img{ max-width: 100%; }