@title-font-size:26px; @title-font-color:#2a2a2a; @title-txt-size:14px; @title-txt-color:#8b8b8b; body{ background-color: #f4f4f4; padding-top:98px; font-family:"Microsoft YaHei"; } .mainW{ width:1200px; margin: 0px auto; } .wrap{ width:100%; padding:0px;margin:0px; } /*头部*/ .m-header{ display: none; height:98px; position: fixed; top:0px;left:0px;right:0px; background-color: #FFFFFF; z-index: 99999; box-shadow: 0px 2px 3px #888888; background-image: url('../img/bg_top.png'); background-position: center top; background-repeat: repeat-x; .logo{ padding:0px;margin:0px; margin-top: 5px; vertical-align: middle; img{ /*display: none;*/ width: 100%; vertical-align: bottom; } } .navbtn{ padding:0px;margin:0px; margin-top: 5px; color: #164187; text-align: center; cursor: pointer; } } /*移动侧边菜单*/ .m-nav{ display: none; position: fixed; z-index: 9999; top:48px;left:0px;bottom:0px; width: 200px; left:-205px; background-color: rgba(255, 255, 255, 1); box-shadow: 0px 2px 3px #888888; transition: all 0.6s; overflow: hidden; div{ position: absolute; z-index: 1; -webkit-tap-highlight-color: rgba(0,0,0,0); width: 100%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; ul{ li{ min-height: 45px; padding-left:15px; position: relative; border-bottom:1px solid #dadada; .iconfont{ position: absolute; height: 45px; width: 45px; top:0px; right:10px; text-align: center; line-height: 45px; font-size: 12px; transition: all 0.6s; } .item{ display: block; width: 100%; height: 45px; line-height: 45px; font-size: 14px; color: #3b3b3b; } dl{ padding-left: 15px; overflow: hidden; transition: all 0.6s; max-height:0px; opacity:0; dd{ padding:0px; border-top:1px solid #e4e4e4; a{ display: block; height:35px; line-height: 35px; color: #505050; &:hover{ color: #00ff00; } } } } } } } } .m_mask{ z-index: 9998; position: fixed; top:0px;left:0px; right:0px;bottom:0px; background-color: rgba(0, 0, 0, 0.8); } .m-nav-open{ display: none; left:0px; } .header{ height:98px; position: fixed; top:0px;left:0px;right:0px; background-color: #FFFFFF; z-index: 99999; box-shadow: 0px 2px 3px #888888; background-image: url('../img/bg_top.png'); background-position: center top; background-repeat: repeat-x; .logo{ height:93px; width:200px; margin-top: 5px; vertical-align: middle; img{ /*display: none;*/ width: 100%; vertical-align: bottom; } } .nav{ padding:0px; ul{ padding:0px; li{ float:left; position: relative; text-align: center; i{ display: block; position: absolute; top:0px;left:50%; width:0%; height:5px; background-color: #00ff00; transition: all 0.6s; } .item{ display: block; width:120px;height:93px; line-height: 93px; text-align: center; font-size: 16px; } dl{ display: block; position: absolute; top:93px;left:0px;right:0px; background-color: #FFFFFF; padding:5px 5px; box-shadow: 0px 2px 3px #888888; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; overflow: hidden; transition: all 0.6s; max-height:0px; opacity:0; dd{ padding:0px; text-align: center; font-size: 14px; a{ display: block; line-height: 35px; &:hover{ color: #FF7F50; } } } } &:hover{ i{ left:0%; width:100%; } .item{ color: #189afa; } dl{ display: block; max-height: 300px; opacity:1; dd{ &:hover{ background-color: #f4f4f4; } } } } } .this{ i{ left:0%; width:100%; } .item{ color: #189afa; } dl{ display: block; dd{ &:hover{ background-color: #f4f4f4; } } } } } } } /*banner*/ .fullSlide { width:100%; position:relative; height:512px; background:#f4f4f4; } .fullSlide .bd { margin:0 auto; position:relative; z-index:0; overflow:hidden; } .fullSlide .bd ul { width:100% !important; } .fullSlide .bd li { width:100% !important; height:512px; overflow:hidden; text-align:center; background-position: center center; background-repeat: no-repeat; background-size: cover; } .fullSlide .bd li a { display:block; height:512px;} .fullSlide .hd { width:100%; position:absolute; z-index:1; bottom:50px; left:0; height:4px; line-height:4px; } .fullSlide .hd ul { text-align:center; } .fullSlide .hd ul li { cursor:pointer; display:inline-block; *display:inline; zoom:1; width:40px; height:4px; margin:0 5px; overflow:hidden; background:#000; filter:alpha(opacity=30); opacity:0.3; line-height:999px; } .fullSlide .hd ul .on { background:#000; filter:alpha(opacity=100); opacity:1; } /*sub-banner*/ .sub_fullSlide { width:100%; position:relative; height:312px; background:#f4f4f4; } .sub_fullSlide .bd { margin:0 auto; position:relative; z-index:0; overflow:hidden; } .sub_fullSlide .bd ul { width:100% !important; } .sub_fullSlide .bd li { width:100% !important; height:312px; overflow:hidden; text-align:center; background-position: center center; background-repeat: no-repeat; background-size: cover; } .sub_fullSlide .bd li a { display:block; height:312px;} .sub_fullSlide .hd { width:100%; position:absolute; z-index:1; bottom:30px; left:0; height:4px; line-height:4px; } .sub_fullSlide .hd ul { text-align:center; } .sub_fullSlide .hd ul li { cursor:pointer; display:inline-block; *display:inline; zoom:1; width:40px; height:4px; margin:0 5px; overflow:hidden; background:#000; filter:alpha(opacity=30); opacity:0.3; line-height:999px; } .sub_fullSlide .hd ul .on { background:#000; filter:alpha(opacity=100); opacity:1; } /*main*/ .main{ padding:0px; margin:0px; } /*核心业务*/ .service{ background-color:#FFFFFF; padding:30px 0px 45px; .title{ text-align: center; .name{ border-bottom:1px solid #ececec; h2{ display: inline-table; position: relative; font-size: @title-font-size; color: @title-font-color; padding:15px 5px 15px; font-weight: normal; letter-spacing: 3px; i{ display: block; position: absolute; height:2px; left:-5px;right:50%;bottom:-2px; background-color: #e77735; } em{ display: block; position: absolute; height:2px; left:50%;right:-5px;bottom:-2px; background-color:#189afa; } } } .text{ padding:15px; font-size: @title-txt-size; color: @title-txt-color; line-height: 25px; } .mobile-text{ display: none; } } .content{ padding: 10px 10px;margin: 0px; .item{ float:left; position: relative; margin: 10px 10px; width: 373px; height: 260px; text-align: center; border-radius: 5px; padding-top:15px; cursor: pointer; .icon_01{ background-image: url('../img/icon_01.png');} .icon_02{ background-image: url('../img/icon_02.png');} .icon_03{ background-image: url('../img/icon_03.png');} .icon_04{ background-image: url('../img/icon_04.png');} .icon_05{ background-image: url('../img/icon_05.png');} .icon_06{ background-image: url('../img/icon_06.png');} .ico{ display: inline-table; width: 120px; height:120px; border-radius: 50%; border:1px solid #c0c0c0; transition: all 0.6s; background-position: center center; background-repeat: no-repeat; background-size: 75%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter:gray; } .nam{ padding-bottom:5px; span{ display: inline-table; padding:15px 10px 10px; font-size: 16px; color:#373737; border-bottom:2px solid #a3a3a3; } } .txt{ font-size: 12px; padding:0px 30px; line-height: 25px; color:#9b9b9b; text-align:justify; text-justify:inter-ideograph; } &:hover{ .ico{ transform: scale(1.1); border:1px solid #1589c6; -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter:rgba(128, 128, 128, 0); } .nam{ color:#1589c6; span{ border-bottom:2px solid #1589c6; } } .txt{ color: #e77735; } } } } } /*宣传视频*/ .pubvideo{ background-image: url('../img/bg_pubvideo_01.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; padding:50px 0px; .pubvideo-div{ width:1000px; margin: 0px auto; background-color: #ffffff; padding:10px; .videocont{ width: 100%; height:405px; background-color: #373737; } } } /*公众案例*/ .pubcase{ background-color:#FFFFFF; padding:30px 0px 45px; .title{ text-align: center; .name{ border-bottom:1px solid #ececec; h2{ display: inline-table; position: relative; font-size: @title-font-size; color: @title-font-color; padding:15px 5px 15px; font-weight: normal; letter-spacing: 3px; i{ display: block; position: absolute; height:2px; left:-5px;right:50%;bottom:-2px; background-color: #e77735; } em{ display: block; position: absolute; height:2px; left:50%;right:-5px;bottom:-2px; background-color:#189afa; } } } .text{ padding:15px; font-size: @title-txt-size; color: @title-txt-color; line-height: 20px; } .mobile-text{ display: none; } } .content{ padding: 0px;margin: 0px; .item{ float: left; width: 376px; height: 280px; margin: 12px 12px; text-align: center; position: relative; overflow: hidden; cursor: pointer; .image{ height: 220px; width: 100%; overflow: hidden; transition: 0.4s; display: inline-block; float: none; vertical-align: middle; border-bottom: 5px solid #1fb554; img{ width: 100%; vertical-align: bottom; } } .info{ display: block; transition: 0.4s; h3 {font-size: 20px; font-weight: normal; margin: 10px 0 0; text-transform: uppercase;} h5 {font-size: 16px; font-weight: 300; margin: 0 0 10px; line-height: 22px;} p { font-size: 14px; font-weight: 300; line-height: 22px; padding: 0 0px; margin-bottom: 0px; text-align:justify; text-justify:inter-ideograph; } } &:hover{ .image{ height: 85px; transition: 0.4s; } } } } } /*标语*/ .pubslogan{ background-image: url('../img/bg_pubvideo_02.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; padding:30px 0px; .title{ text-align: center; .name{ border-bottom:1px solid #ececec; h2{ display: inline-table; position: relative; font-size: @title-font-size; color: #ffffff; padding:15px 5px 15px; font-weight: normal; letter-spacing: 3px; i{ display: block; position: absolute; height:2px; left:-5px;right:50%;bottom:-2px; background-color: #e77735; } em{ display: block; position: absolute; height:2px; left:50%;right:-5px;bottom:-2px; background-color:#189afa; } } } .text{ padding:15px; font-size: @title-txt-size; color: #e0e0e0; line-height: 20px; } .mobile-text{ display: none; } } .content{ text-align: center; padding: 0px;margin: 0px; width: 100%;height: 400px; overflow: hidden;position: relative; .divcon{ width: 1200px;height: 400px; .item{ float: left; width: 250px; height: 240px; margin: 80px 25px; background-color: rgba(255, 255, 255, 0.2); padding-top:20px; border-radius:10px; overflow: hidden; cursor: pointer; transition: all 0.5s; .icon{ display: inline-block; width: 130px; height: 150px; margin: 0 auto; background-image: url('../img/homeY_s.png'); background-position: top left; background-repeat: no-repeat; background-size: 100%; padding-top:30px; .iconfont{ font-size: 85px; font-weight: 500; color:#ffffff; } } h1{ padding:15px 0px; font-size: 20px; color: #ffffff; font-weight: normal; letter-spacing: 3px; } p{ padding:0px 20px; line-height: 22px; text-align: left; font-size: 12px; color: #e0e0e0; text-align:justify; text-justify:inter-ideograph; } &:hover{ padding-top:5px; .icon{ background-image: url('../img/homeY_x.png'); } h1{ color: #6cff00; } p{ color: #6cff00; } } } } } } /***新闻***/ .pubnews{ background-color:#FFFFFF; padding:30px 0px 45px; .title{ text-align: center; .name{ border-bottom:1px solid #ececec; h2{ display: inline-table; position: relative; font-size: @title-font-size; color: @title-font-color; padding:15px 5px 15px; font-weight: normal; letter-spacing: 3px; i{ display: block; position: absolute; height:2px; left:-5px;right:50%;bottom:-2px; background-color: #e77735; } em{ display: block; position: absolute; height:2px; left:50%;right:-5px;bottom:-2px; background-color:#189afa; } } } .text{ padding:25px; font-size: @title-txt-size; color: @title-txt-color; line-height: 26px; } .mobile-text{ display: none; } } .content{ padding:0px 0px;margin: 0px 0px; .newtop{ float: left; margin: 25px 25px 0px; width: 500px; .pic{ height:155px;width: 100%; overflow: hidden; display: inline-block; vertical-align: middle; background-color:#ececec; margin-bottom: 15px; img{ width: 100%; height:155px; vertical-align: bottom; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; } } h1{ height:30px; font-size: 18px; font-weight: normal; a{ color: #2d2d2d; &:hover{ color: #0be500; } } } p{ height:46px; line-height: 22px; font-size: 14px; color: #878787; } .mor{ display: block; border:1px solid #cacaca; width: 150px;line-height: 30px; font-size: 14px; color: #878787; text-align: center; margin-top: 10px; &:hover{ color: #ffffff; background-color: #0be500; border-color: #0be500; } } } .newlist{ float: left; margin: 25px 25px 0px; width: 600px; .item{ padding:0px 0px;margin: 0px 0px 30px; padding-left:91px; position: relative; .date{ width: 76px; height: 76px; position: absolute; border: 1px solid #cacaca; text-align: center; line-height: 30px; border-radius: 5px; left:0px; font-size: 14px; color: #878787; em { width: 44px; height: 17px; display: inline-block; background: url(../img/calendarBg.png) no-repeat; position: absolute; left: 50%; margin-left: -22px; top: -5px; } span { font-size: 30px; display: block; border-bottom: 1px solid #cacaca; padding-bottom: 2px; margin-top: 12px; font-family: Arial; } } h1{ height:30px; font-size: 18px; font-weight: normal; margin-top: 0px; a{ color: #2d2d2d; } } p{ height:46px; line-height: 22px; font-size: 14px; color: #878787; } &:hover{ .date{ color: #ffffff; background-color:#0be500; border-color: #ffffff; span { border-color: #ffffff; } } h1{ a{ color: #0be500; } } } } } } } /***合作单位***/ .cooperation{ background-color: #f5f5f5; padding:0px 0px; height:auto; text-align: center; .list{ padding:10px 0px; li{ display: block; float: left; width: 210px; height: 80px; line-height: 80px; margin:15px 15px; overflow: hidden; /*vertical-align: middle;*/ background-color: rgba(128, 128, 128, 0.1); img{ width: 100%; vertical-align: bottom; } } } } /***footer***/ .footer{ background-color: #1c1d21; padding:30px 0px; text-align: center; .fotmenu{ float:left; dl{ float:left; line-height: 25px; text-align: left; color: #f5f5f5; width: 200px; dt{ font-size: 16px; padding-bottom: 15px; } dd{ font-size: 14px; a{ color: #f5f5f5; &:hover{ color: #00ff00; } } } } } .fotliaxi{ float:right; } } .footerCopyright{ background-color: #111214; padding:15px 0px 5px; text-align: left; .txt{ display: inline-block; font-size: 12px; color:#949494; padding-right:15px; padding-bottom: 10px; } } /**************/ /***二级页面***/ /*************/ /*名称和二级菜单*/ .subtitle{ background-color: #ffffff; padding:30px 0px 15px; .title{ text-align: left; margin-bottom:15px; .name{ border-bottom:1px solid #ececec; h2{ display: inline-table; position: relative; font-size: @title-font-size; color: @title-font-color; padding:15px 5px 15px; font-weight: normal; letter-spacing: 3px; i{ display: block; position: absolute; height:2px; left:-5px;right:50%;bottom:-1px; background-color: #e77735; } em{ display: block; position: absolute; height:2px; left:50%;right:-5px;bottom:-1px; background-color:#189afa; } } span{ padding-top:35px; font-size:12px; float:right; color:#9b9b9b; } } } .submenu{ display: block; height: 46px; line-height: 46px; ul{ display:-webkit-box; display:-webkit-flex; display:flex; flex-direction:row; border-top:1px solid #ececec; border-left:1px solid #ececec; li{ -webkit-box-flex:1; -webkit-flex:1; flex:1; border-right:1px solid #ececec; border-bottom:1px solid #ececec; text-align: center; a{ display:block; width: 100%; height: 46px; position: relative; font-size: 14px; em{ position: absolute; display: block; bottom:-1px;left:50%; width:0%; height:3px; background-color: #00ff00; transition: all 0.6s; } &:hover{ em{ left:0%; width:100%; } } } } .this{ a{ color: #e77735; em{ position: absolute; display: block; bottom:-1px;left:0%; width:100%; height:3px; background-color: #e77735; } } } } } .submenu-m{ display: none; height: 46px; padding-right:50px; position: relative; .iconfont{ position: absolute; width: 45px; height: 45px; top:0px;right:0px; line-height: 45px; font-size: 18px; text-align: center; border:1px solid #ececec; background-color: rgba(0, 0, 0, 0.03); cursor: pointer; z-index: 99; } ul{ top:0px;left:0px;right:0px; position: absolute; transition: all 0.5s; max-height:46px; overflow: hidden; border-top:1px solid #ececec; border-left:1px solid #ececec; background-color: #ffffff; z-index: 98; li{ border-right:1px solid #ececec; border-bottom:1px solid #ececec; text-align: center; line-height: 43px; padding-right: 45px; a{ display:block; width: 100%; height: 43px; position: relative; font-size: 14px; em{ position: absolute; display: block; bottom:0px;left:50%; width:0%; height:3px; background-color: #00ff00; transition: all 0.6s; } &:hover{ em{ left:0%; width:100%; } } } } .this{ a{ color: #e77735; em{ position: absolute; display: block; bottom:-1px;left:0%; width:100%; height:3px; background-color: #e77735; transition: all 0.6s; } } } } } } /*独立页面部分*/ .subpagecont{ background-color: #ffffff; min-height: 350px; padding:15px 0px 45px; line-height: 35px; font-size: 14px; text-align:justify; text-justify:inter-ideograph; .title{ padding:30px 0px 15px; text-align: center; h1{ display: block; border-bottom:1px solid #ececec; font-size: 30px; font-weight: 400; padding-bottom:15px; } div{ font-size: 14px; color: #cccccc; } } } /*新闻列表部分*/ .subarticlelist{ background-color: #ffffff; padding:15px 0px 45px; ul{ li{ padding: 0px; position: relative; height: 220px; padding-left: 330px; margin-bottom: 30px; .pics{ display: block; width: 300px; height: 220px; position: absolute; left:0px; top:0px; background-color: rgba(0, 0, 0, 0.03); overflow: hidden; img{ width: 300px; height: 220px; transition: all 3s; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; } } .title{ font-size: 30px; font-weight: 300; padding-bottom:25px; a{ color: #505050; } } .text{ line-height: 30px; height:90px; font-size: 16px; text-align:justify; text-justify:inter-ideograph; } .more{ border-top: 1px dashed #888888; height:45px; padding-top:15px; margin-top: 15px; font-size: 28px; font-weight: 300; a{ display: block; float: right; font-size: 14px; padding-top:10px; } } &:hover{ .pics{ img{ transform: scale(1.4); } } .title{ a{ color: #e77735; } } .more{ border-color: #e77735; color: #e77735; a{ color: red; } } } } } } /*图片列表部分*/ .subpicturelist{ background-color: #ffffff; padding:15px 0px 45px; ul{ padding: 0px; margin: 0px; li{ float: left; width: 370px;height: 270px; padding:10px; margin: 15px; overflow: hidden; background-color: rgba(0, 0, 0, 0.03); a{ display: block;position: relative; width: 350px;height: 250px; overflow: hidden; img{ width: 350px;height: 250px; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; } div{ width: 350px;height: 250px; position: absolute; bottom:-250px;left:0px; background-color: rgba(0, 170, 250, 0.7); transition: all 0.6s; text-align: center; span{ display: block; width: 75px;height:75px; text-align: center; line-height: 75px; color: #ffffff; border:2px solid #ffffff; border-radius: 50%; font-size: 50px; margin: 50px auto 30px; background-color: rgba(0, 0, 0, 0.15); } h2{ padding:10px; text-align: center; font-size: 14px; font-weight: normal; color: #ffffff; } h3{ padding:10px; text-align: center; font-size: 12px; font-weight: normal; color: #ffffff; } } &:hover{ div{ bottom:0px; } } } } } } .pages{ padding: 5px 0px; margin: 15px 0px; margin-top: 50px; a{ float: left; border:1px solid #ececec; color:#333333; padding:15px 15px; margin-right: 5px; &:hover{ color:#1598e4; } } .current{ float: left; border:1px solid #1598e4; padding:15px 15px; margin-right: 5px; font-weight:bold; color:#1598e4; background-color: rgba(21, 152, 228, 0.15); } .total{ display: block; float: right; border:1px solid #ececec; padding:15px 15px; color:#333333; } } .piccontent{ border:1px solid #ececec; background-color: rgba(236, 236, 236, 0.6); line-height: 35px; font-size: 14px; padding:10px; margin: 30px 15px; } .showpiclist{ text-align: center; } /***碎片:返回顶部***/ .winRbtn{ z-index: 9997; position: fixed; right:0px; bottom: 100px; div{ width: 55px; height: 55px; background-color: #189afa; color: #fff; font-size: 30px; line-height: 55px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; text-align: center; margin-bottom: 5px; cursor: pointer; } .scrollup{ display: none; background-color: #e77735; } } .linkmore{cursor:pointer;border:1px solid #ccc;font-size:18px; color:#189afa;} .linkmore_list{ position:absolute; left:0px; right:0px; top:130px; min-height:150px; background-color:rgba(255,255,255, 0.8); display : none; padding:10px; text-align:left; padding-right:0px; padding-bottom:0px } .linkmore_list a{ display : black !important; float:left; font-size:14px; border:1px solid #ccc !important; width: 228px; padding:10px; margin-right:10px; margin-bottom:10px; background-color:#ffffff; } .linkmore_list a:hover{ border:1px solid #189afa !important; background-color:#ffffff; color:#189afa; } /* 窗口宽度<1023,设计宽度=960 */ @media screen and (max-width:1025px){ @import "web.media.960.less"; } /* 窗口宽度<960,设计宽度=768 */ @media screen and (max-width:959px){ @import "web.media.768.less"; } /* 窗口宽度<768,设计宽度=640 */ @media screen and (max-width:767px){ @import "web.media.640.less"; } /* 窗口宽度<640,设计宽度=480 */ @media screen and (max-width:639px){ @import "web.media.480.less"; } /* 窗口宽度<480,设计宽度=320 */ @media screen and (max-width:479px){ @import "web.media.320.less"; } /* 320 479 490 639 640 767 768 950 960 1023 all */