/* * @主色: #0164bb * @Author: jinbo * @Date: 2017-12-15 09:48:21 * @Last Modified by: jinbo * @Last Modified time: 2020-09-16 15:08:16 */ @charset "utf-8"; /* * reset */ body{width: 100%;height: 100%;overflow-x: hidden;overflow-y: scroll;color:#000;font:14px/1.8 'Microsoft Yahei',Arial,sans-serif} input,textarea{margin:0;padding:0;outline:0;border:0;background:0 0;vertical-align:middle} body,button,dd,dl,form,h2,h2,h3,h4,h5,ol,p,ul,menu{margin:0} ol,ul,menu{padding-left:0;list-style-type:none} img{max-width:100%;border:0;vertical-align:top} a, input, select, textarea { outline: none; star: expression(this.onFocus=this.blur()); } a{outline:0;color:#000;text-decoration:none;font-family:"微软雅黑"} a:hover{color:#000;} b,i{font-style:normal} input, b, h2, h2, h3, strong, big, small, span, *:before, *:after, a, p, .tep, .mask{ -moz-transition: all ease-in-out 0.35s; -webkit-transition: all ease-in-out 0.35s; -o-transition: all ease-in-out 0.35s; -ms-transition: all ease-in-out 0.35s; transition: all ease-in-out 0.35s; } /* * common */ .opc0{opacity:0;} .lt-ie9 .wow{visibility: visible!important} /* * header */ .header {position: relative;background: #f7f7f7;height: 100px;} .bar{background: #333;color:#fff;position: relative;line-height:36px; overflow: hidden;font-size: 12px;font-weight: lighter;} .bar a{color: #fff;} .bar .widget-tel a,.bar .widget-tel i{font-size: 16px;} .bar ul li{ float:left;} .bar ul li i.split{ display:inline-block;vertical-align:middle;width: 1px;height: 9px;background: #8d8d8d;margin:0 4px} .headtop .lang {padding: 0;overflow: hidden;text-align: right;} .headtop .lang div {float: right;margin-right: 20px;} .headtop .lang div a {display: block;color: #fff;font-size: 14px;font-weight: bold;} .headtop .lang div a i {display: inline-block;width: 30px;height: 30px;vertical-align: middle;margin-right: 5px;} .headtop .lang div a i.dg {background: url(?/Theme/Home/web/css/../img/dg.png) no-repeat;background-size: contain;} .headtop .lang div a i.en {background: url(?/Theme/Home/web/css/../img/en.png) no-repeat;background-size: contain;} /* LOGO */ .logo { float: left; width: 7%;height: 100px; position: relative; text-align: center;margin-right: 3%;} .logo a{display: block;position: absolute;top: 0;right: 0;width: 200px;height: 100px;z-index: 999} .logo span{display: inline-block; height: 100%; width: 0; text-align: center; vertical-align: middle;} .logo img{vertical-align: middle;max-height: 100%;} /*导航*/ .navBox { position: relative;} .nav_transform1 {float: left;width: 60%;} .nav_transform1 ul.navCont { } .nav_transform1 ul.navCont li.child { position: relative; float: left; width: 14.28%; text-align: center; padding: 30px 0;} .nav_transform1 ul.navCont li.child a { display: block} .nav_transform1 ul.navCont li.child a p.title { font-size: 16px; line-height: 40px; color: #333;} .nav_transform1 ul.navCont li.child a:hover p, .nav_transform1 ul.navCont li.child.on a p{} /*二级*/ .wapNavPointer{display:none;position:absolute;top:3px;right:3px;cursor:pointer;} .nav_transform1 ul.navCont li.child .childContent{display: none;position: absolute;top: 100px;width: 100%;z-index: 999;} .nav_transform1 ul.navCont li.child .childContent li a{font-size: 16px;background-color: #0164bb;color:#fff;line-height:48px;border:#fff 1px solid;height: 48px;overflow: hidden;} .nav_transform1 ul.navCont li.child .childContent li a:hover{background: #fff;color: #0164bb;} /* 导航按钮*/ button.nav-trigger{display:none;position:absolute;top:50%;right:0;z-index:20;height:60px;width:50px;margin-top:-30px;padding:0 12px;background:0 0;border:0;outline:0} .nav-trigger{transition:-webkit-transform .3s cubic-bezier(.86,0,.07,1);transition:transform .3s cubic-bezier(.86,0,.07,1)} .nav-icon{position:relative;top:2px;right:inherit;display:block;width:26px;height:2px;background-color:#000;border-radius:2.5rem;transition:all .3s} .nav-icon:after,.nav-icon:before{content:"";position:absolute;z-index:-1;display:block;height:2px;width:100%;border-radius:2.5rem;background-color:#000;transition:all .3s} .nav-icon:before{top:7px} .nav-icon:after{top:-7px} /*.navigation-is-visible .nav-trigger{-webkit-transform:translate3d(84vw,0,0);transform:translate3d(84vw,0,0)}*/ .navigation-is-visible .nav-icon{background-color:transparent!important} .navigation-is-visible .nav-icon:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);top:0;background-color:#000} .navigation-is-visible .nav-icon:after{-webkit-transform:rotate(45deg);transform:rotate(45deg);top:0;background-color:#000} /*导航电话*/ .nav-tel{float: left;width: 20%;padding: 30px 0;} .nav-tel p{font-size: 14px;line-height: 40px;color: #333;height: 40px;text-align: center;} .nav-tel i{padding-right: 2%;} .nav-tel strong{font-size: 18px;color: red;} /*导航icon*/ .nav-iconfont{float: left;width: 10%;padding: 30px 0;} .nav-iconfont p{line-height: 40px;color: #666;height: 40px;text-align: center;} .nav-iconfont i{font-size: 40px;margin: 0 4%;cursor: pointer;} .nav-iconfont i:hover{color: #0164bb} /* * footer */ .footer{color:#333;font-size:14px;line-height: 30px} /*友链*/ .footer_link{ padding: 14px 0;background-color: #fff;text-align: left} .footer_link span{font-size: 16px;color: #333;font-weight: bold;} .footer_link a{padding: 0 4px;color: #333} .footer_link a:hover{color: #0164bb;} /*导航*/ .footer_info{background: #333333;color: #999;padding: 12px 0;} .footer_info p span{padding-right: 1rem;} .footer_info p a{color: #bbb} .footer_info a:hover{color: #0164bb} .footer_nav{padding: 15px 0;text-align: center;} .footer_nav a{padding: 0 15px;position: relative;color: #999} .footer_nav a:after{display: block;content: '';width: 8px;height: 1px;background-color: #999;position: absolute;right: 0;top: 50%;} .footer_nav a:last-child:after{display: none;} .footer_code img{max-width: 140px;} .footer_tel{text-align: right;font-size: 24px;} .footer_tel a{display: inline-block;line-height: 60px;vertical-align: middle;} .footer_tel i{font-size: 48px;vertical-align: middle;} /* * top */ .top{display:none;position:fixed;right:10px;bottom:80px;z-index:999;width:40px;height:40px;font-size:24px;background:#ccc;color:#fff;line-height:40px;text-align:center;cursor:pointer;} .top{transition-duration: .5s;-ms-transition-duration: .5s;-moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .top:hover{opacity: 0.8} .top img{vertical-align:middle;} /*中号屏幕断点*/ @media screen and (max-width:1400px){ .nav-tel{width: 30%;} .nav-iconfont{display: none;} } @media screen and (max-width:1200px){ .logo { width: 20%;margin-right: 0;} .logo a{display: block;position: relative;width: 100%;height: 100%;background: transparent;z-index: 1} .logo span{display: inline-block; height: 100%; width: 0; text-align: center; vertical-align: middle;} .logo img{vertical-align: middle;max-height: 100%;} .nav-tel{width: 20%; padding: 10px 0;} .nav-tel strong{display: block;} } /*鼠标滑过微信*/ .p-code{position: absolute;right: 0;top: 60px;width: 120px;height: 120px;display: none;padding-top: 10px;z-index: 99} /* ========================================================================== Common module ========================================================================== */ /*crumb面包屑*/ .po-title{position: absolute;top: -30px;left: 0;width: 60%;z-index: 99} .po-title a{color: #fff;font-size: 24px;} .po-title a:hover{color: #ff9000} .po-title a.iconfont:hover:before{content: "\e61b";} .po-title p{font-size: 24px;line-height: 60px;color: #fff;background: #0164bb;padding: 0 20px;position: relative;} .po-title p:after{content: "";display: block;position: absolute;width: 100%;height: 100%;right: 100%;top: 0;background: #0164bb} .po-title p.c,.po-title p.c a{font-size: 18px;} /* more: text or block */ a.more{} a.more{ transition-duration: .5s;-ms-transition-duration: .5s;-moz-transition-duration: .5s;-webkit-transition-duration: .5s;} a.more:hover{} a.more.block{padding: 6px 30px;border: 1px solid #d2d2d2;display: inline-block;margin-top: 20px} a.more.block:hover{border-color: #ad2226;color: inherit;} a.button{width: 220px;height: 45px;border: 1px #eee solid;border-radius: 40px;background-color: #fff;display: block;margin: 0 auto;text-align: center;line-height: 45px;position: relative;overflow: hidden;} a.button.anim span{position: absolute;left: 50%;top: 0;white-space: nowrap;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition-delay: 250ms;-moz-transition-delay: 250ms;-ms-transition-delay: 250ms;-o-transition-delay: 250ms;transition-delay: 250ms;} a.button.anim i:before{font-size: 22px;color: #ec408c;position: absolute;top: 9px;left: 0;-webkit-transform: translateX(-200%);-ms-transform: translateX(-200%);-o-transform: translateX(-200%);transform: translateX(-200%);} a.button.anim:hover i:before{left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);transform: translateX(-50%);} a.button.anim:hover span{left: 120%;} /*字体盒子模型*/ .services-box{text-align: center;padding: 30px 0;display: block;} .services-box .icon{display: inline-block; background: #fff; width: 100px; height: 100px; position: relative; margin-bottom: 0px;} .services-box .icon a{display: block;width: 67px;height: 67px;margin: 0 auto;padding-top: 12px;} .services-box .icon img{transition-duration: .5s;-ms-transition-duration: .5s;-moz-transition-duration: .5s;-webkit-transition-duration: .5s;} .services-box .icon a:hover img{transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);} .services-box h3{font-size: 18px;padding:5px 5px} .services-box p{font-size: 14px;padding:3px 5px;} .services-box i{display:inline-block;width:100px;height:100px;border-radius:100%;font-size:44px;line-height:90px;background-color: #0164bb; color: #fff} .services-box.horizontal{text-align: left;padding-bottom: 0} .services-box.horizontal .icon{display: block;float: left;width:24px;height: 24px;border:3px solid #ccc;border-radius: 5px;font-size: 16px;font-weight: bold;color: #ccc;text-align: center;line-height: 24px;margin-top: 8px;} .services-box.horizontal .icon a{padding-top: 0;line-height: 67px;text-align: center;font-size: 40px;} .services-box.horizontal h3{margin-left: 180px;padding: 0;margin-bottom: 20px;} .services-box.horizontal p{margin-left: 40px;height: 40px;font-size: 12px} /* * responsive menu avialiable for pc and mobile */ .m-ins-navbox { position: absolute; text-align: center; bottom: 100%; width: 100%; } .m-ins-navbox .right .tit { display: none; } .m-ins-navbox .ret-subbox { display: none; } .m-ins-navbox .right .subbox { text-align: center } .m-ins-navbox .right .subbox a { position: relative; display: inline-block; margin:10px 10px 0 0; padding: 12px 40px; background-color: #fff; text-align: center; font-size: 1rem; } .m-ins-navbox .right .subbox a:hover { } .m-ins-navbox .right .subbox a.cur { background-color: #0164bb; color: #fff; } @media screen and (max-width:40em){ .m-ins-navbox{width:100%;height:38px;background: #fff;position:relative;top: 0;z-index: 5;padding: 0!important} .m-ins-navbox .left{width:15%;cursor:pointer;float:left;} .m-ins-navbox .left .ico{display:block;width:100%;height:38px;background:url("?/Theme/Home/web/css/../img/base/ico_2.png") no-repeat center #167ed2;background-size:auto 50%;} .m-ins-navbox .right{width:85%;position:relative;float:right;border-bottom: 1px solid #e5e5e5;} .m-ins-navbox .right .tit{display:block;width:95%;padding-left:5%;font-size:14px;color:#035cac;line-height:37px;background:url("?/Theme/Home/web/css/../img/base/ico_1.png") no-repeat 93% center;background-size:auto 50%;cursor:pointer;} .m-ins-navbox .right .subbox{width:100%;position:absolute;top:37px;background-color:#fff;z-index:2;display:none;left:0;text-align:left;} .m-ins-navbox .right .subbox a{display:block;width:95%;padding:0 0 0 5%;border-radius:0!important;line-height:38px;height:38px;border-top:1px solid #e5e5e5;background:url("?/Theme/Home/web/css/../img/base/ico_3.png") no-repeat 92% center #167ed2!important;background-size:auto 35%;font-size:inherit;border-radius:0;margin:0;} .m-ins-navbox .right .subbox a.cur{} .m-ins-navbox .ret-subbox{position:absolute;top:38px;width:100%;background-color:#167ed2; /*#035cac;*/left:0;z-index:2;display:none;} .m-ins-navbox .ret-subbox a{display:block;width:95%;padding-left:5%;height:38px;line-height:38px;border-bottom:1px solid #4882b6; /*#4882b6;*/color:#fff;font-size:14px;background:url("?/Theme/Home/web/css/../img/base/ico_3.png") no-repeat 92% center;background-size:auto 35%;} .m-ins-blackbg{position:absolute;left:0;top:38px;width:100%;height:100%;background-color:#000;opacity:0.5;display:none;z-index:4;} } /* swiper banner */ #swiperBan { background: #000; height: 600px; color: #fff; text-align: center; } #swiperBan .swiper-slide { width: 1400px; height: 100%; opacity: 0.4; -webkit-transition: 300ms; -moz-transition: 300ms; -ms-transition: 300ms; -o-transition: 300ms; transition: 300ms; } #swiperBan .swiper-slide-active { opacity: 1; } #swiperBan .pagination { position: absolute; left: 0; text-align: center; bottom: 5px; width: 100%; } @media screen and (max-width:40em) { #swiperBan { height: 140px; } } /*animate */ @keyframes rightOpacityShow{ 0%{ transform: translateX(-80px);opacity:0;} 80%{ transform: translateX(20px);} 100%{ transform:translateX(0); opacity:1;} } @keyframes rotate{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} }