// 鍏叡閮ㄥ垎 body{ // -webkit-filter: grayscale(100%); // -moz-filter: grayscale(100%); // -ms-filter: grayscale(100%); // -o-filter: grayscale(100%); // filter: grayscale(100%); // filter: gray; } .list_ul { overflow: hidden; ul { display: flex; flex-wrap: wrap; li { box-sizing: border-box; a { display: block; } } } } @color:#eb5f09; @font-face{ font-family: fontm; src: url(../font/060-CAI978.ttf); } @font-face{ font-family: helv; src: url(../font/HelveticaObl-Heavy_0.ttf); } .transition { transition: all ease-in-out 0.3s; } .img-transform { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } .big_img { .img { overflow: hidden; img, h1, h2, h3, h4, h5 { .transition; } } &:hover img { .img-transform; } &:hover h1, &:hover h2, &:hover h3, &:hover h4 &:hover h5 { color: @color; } } .con1400{ max-width: 1400px; width: 100%; margin: 0 auto; } .con1300{ max-width: 1300px; width: 100%; margin: 0 auto; } .con1200{ max-width: 1200px; width: 100%; margin: 0 auto; } // 鍏叡缁撴潫 // 澶撮儴寮€濮 .head_top{ padding: 1% 0; border-bottom: 1px solid #ccc; .con1400{ display: flex; align-items: center; justify-content: space-between; .logo_left{ display: flex; align-items: center; width: 50%; } a.logo{ display: block; max-width: 160px; // padding:0 20px; margin-right: 20px; img{ max-width: 140px; } } ul{ display: flex; // width: 33.33%; li{ a{ margin-right: 5px; display: block; img{ width: 60px; } } } } .tel{ width: 50%; display: flex; align-content: center; justify-content: flex-end; p{ display: flex; align-items: center; padding:5px 10px; margin:0 20px; font-size: 16px; // background: @color; color: #595757; img{ max-width: 40px; display: block; margin-right: 10px; } strong{ font-size: 20px; // padding-left: 10px; } } } a.link{ display: block; padding-left: 30px; font-size: 16px; color: @color; line-height: 50px; background:url(../images/link.png) no-repeat left center; } } } .head{ background: url(../images/nav_bj.jpg) no-repeat center; position: relative; z-index: 9999; .con1400{ display: flex; justify-content: space-between; align-items: center; .nav{ width: 80%; margin: 0 auto; ul{ display: flex; justify-content: space-between; height: 60px; li{ a{ display: block; padding:0 40px; padding-bottom: 8px; line-height: 60px; font-size: 18px; background: url(../images/nav_icon1.png) no-repeat center 60px; .transition; &.hover, &:hover{ // background-color: @color; // color: #fff; background: url(../images/nav_icon.png) no-repeat center 60px; } } } } } .pc_tel{ font-size: 18px; color: #fff; padding-left: 30px; letter-spacing: 3px; background:url(../images/tel.png) no-repeat left center; } } } .head_wap{ display: none; } #banner{ .con1400{ transform: translateY(-50%); position: relative; z-index: 9999; background-color: #fff; ul{ display: flex; align-items: center; box-shadow: 0 0 10px #ccc; li{ flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 1.5% 0; border-right:1px solid #f5f5f5; .icon{ width: 64px; height: 64px; border-radius: 50%; border: 1px solid @color; display: inline-flex; align-items: center; justify-content: center; margin: 16px; } .main{ h1{ font-size: 24px; font-weight: bold; } h3{ font-size: 14px; color: #999999; text-transform: uppercase; } } } } } } .i_type{ display: flex; align-items: flex-end; h1{ font-size: 34px; font-weight: bold; } h3{ font-size: 24px; color: @color; padding-left: 16px; } } .i_choose{ .con1400{ display: flex; .choose_left{ border:1px solid #ccc; padding: 30px 50px; width: 75%; .i_type{ width: 50%; padding: 10px 0; border-bottom: 1px solid #ccc; } .sum{ font-size: 16px; color: #999999; line-height: 34px; padding-top: 14px; } } .img{ width: 25%; img{ height: 100%; width:100%; } } } } // a.more{ // display: block; // width: 148px; // line-height: 42px; // text-align: center; // border:1px solid #ccc; // .transition; // &:hover{ // color: #fff; // background-color: @color; // } // } .i_pro{ padding: 4% 0 2% 0; margin-top: 4%; background-color: #fff; .i_type{ display: none; } .con1400{ display: flex; justify-content: space-between; ul{ margin:0 -5px; li{ width: 25%; padding: 5px; a{ display: block; overflow: hidden; position: relative; .img1{ .transition; overflow: hidden; } .img2{ opacity: 0; height: 0; .transition; position: absolute; left: 0; top: 0; overflow: hidden; } h1{ line-height: 50px; text-align: center; background-color: #fff; font-size: 16px; } &:hover{ .img1{ } .img2{ opacity: 1; height: 100%; } } } } } } } .i_news{ padding: 4% 0 2% 0; .con1400{ .i_type{ text-align: center; margin-bottom: 2%; } .list_ul{ li{ width: 33.33%; padding: 18px; a{ display: block; .tit{ line-height: 56px; background-color: #f5f5f5; font-size: 9px; display: flex; align-items: center; justify-content: space-between; padding:0 10px; } h1{ text-align: center; flex:1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } i{ display: block; width: 28px; height: 13px; background: url(../images/more.png) no-repeat center right; } } } } .news_type{ display: flex; align-items: center; justify-content: space-between; } a.more{ display: flex; align-items: center; justify-content: center; width: 104px; i{ display: block; width: 28px; height: 13px; background: url(../images/more.png) no-repeat center right; } } } } #foo_wap{ display: none; } .footer{ background-color: #f8f8f8; margin-top: 2%; .con1400{ .foo_top{ padding: 4% 0; display: flex; align-items: center; justify-content: space-between; .index_cont{ text-align: right; font-size: 18px; line-height: 36px; color: #444;; } a.scroll_top{ display: block; width: 54px; height: 54px; float: right; margin-top: 4%; background: url(../images/top.jpg) no-repeat center; } } .foo_nav{ border:1px solid #ccc; border-right: none; border-left: none; ul{ display: flex; li{ flex: 1; a{ display: block; font-size: 18px; line-height: 32px; padding: 20px 0; } } } } .foo_bottom{ padding-top: 4%; display: flex; justify-content: space-between; a{ display: block; line-height: 50px; padding:0 20px; } } } } .pub_left{ background-color: #f5f5f5; .con1400{ .treeview{ display: flex; justify-content: center; li{ a{ display: block; padding: 30px; font-size: 10px; color: #999999; position: relative; display: flex; align-items: center; &::before{ content: ""; width: 1px; height: 10px; background-color: #b8b8b8; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } &:last-child a::before { display: none; } } } } } .ab_sub{ a{ div{ display: flex; align-items: center; padding:0 5px; } .icon1{ display: none; } .icon2{ // -webkit-filter: contrast(0%); / Chrome, Safari, Opera */ // filter: contrast(0%); -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } img{ max-width: 24px; max-height: 24px; } h1{ padding:0 5px; } &.hover, &:hover{ .icon1{ display: none; } .icon2{ display: flex; -webkit-filter: contrast(100%); /* Chrome, Safari, Opera */ filter: contrast(100%); } h1{ color: @color; } } } } .about{ padding-top: 4%; .con1400{ .tit{ position: relative; padding-bottom: 30px; &::before{ content: ""; width:36px; height: 6px; background-color: @color; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; } h1{ font-size: 34px; font-weight: bold; text-align: center; line-height: 40px; } h2{ text-align: center; font-size: 20.5px; color: #999999; } } .sum{ text-align: center; font-size: 16px; color: #888888; line-height: 36px; padding: 2% 0; } .num{ ul{ display: flex; li{ flex:1; position: relative; &::before{ content: "/"; color: @color; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } &:last-child::before{ display: none; } .icon{ margin: 0 auto; display: flex; justify-content: center; align-items: flex-end; i{ font-size: 70px; font-family: "Microsoft YaHei"; font-weight: 300; } p{ font-size: 20px; color: #888888; padding:0 10px; } } h5{ text-align: center; padding: 10px; font-size: 20px; } } } } .list_sum{ margin-top: 4%; padding-top: 4%; border-top: 1px solid #e9e9e9; ul{ display: flex; margin:0 -30px; li{ flex:1; padding:0 30px; .img{ } .cont_box{ margin-top: -140px; width: 100%; box-sizing: border-box; padding:0 20px; .cont{ padding: 30px; height: 374px; box-sizing: border-box; position: relative; border-bottom: 3px solid @color; background-color: #fff; h1{ font-size: 20px; font-weight: bold; line-height: 34px; } .l_sum{ font-size: 16px; color: #888888; line-height: 30px; padding: 20px 0; } } } } } } .heart{ padding: 8% 0 0 0; .heart_icon{ display: flex; justify-content: center; } .slogan{ padding: 4% 0; h1{ text-align: center; font-size: 38px; line-height: 30px; font-family: "Microsoft YaHei"; font-weight: 300; padding: 20px 0; } p{ text-align: center; font-size: 20px; color:#888888; line-height: 30px; } } .heart_bj{ height: 218px; background: url(../images/ab_bj.png) repeat-x center; display: flex; align-items: center; justify-content: center; img{ max-width: 160px; } } } } } // 鍙戝睍鍘嗙▼ .deve{ .con1400{ position: relative; } .cont{ margin: 4% auto; width: 70%; box-sizing: border-box; border-top:3px solid @color; background-color: #fff; box-shadow: 0 0 10px #ccc; .sum{ padding:3% 5%; } } .deve_left,.deve_rig{ font-size: 30px; font-family: "simsun"; } .deve_box{ width: 244px; margin: 0 auto; position: relative; h1{ font-size: 50px; font-weight: bold; text-align: center; } } .deve_left,.deve_rig{ width: 60px; height: 35px; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 8888; } .deve_left{ left: -15px; background:url(../images/left.png) no-repeat center; } .deve_rig{ right: -15px; background:url(../images/rig.png) no-repeat center; } .swiper-button-disabled{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } #thumbs{ background: url(../images/dev_icon.png) repeat-x bottom; overflow: hidden; padding-bottom: 60px; margin: 4% 0; h2{ font-size: 20px; position: relative; text-align: center; &::before{ width: 3px; height: 34px; background-color: #000; content: ''; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); } } .swiper-slide-thumb-active { h2{ color: @color; &::before{ background-color: @color; } } } } } .honor{ padding-top: 4%; .con1400{ .tit{ font-size: 40px; text-align: center; } .sum{ text-align: center; font-size: 16px; color: #888888; line-height: 36px; padding: 0 0 2%; } td{ border: 1px solid #000; } .honor_box{ padding: 2% 0; position: relative; .swiper-slide{ background-color: #f8f8f8; padding: 30px; .img{ padding: 15px; background-color: #fff; display: flex; justify-content: center; align-items: center; } } .h_left,.h_rig{ width: 54px; height: 53px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 8888; cursor: pointer; } .h_left{ background: url(../images/h_l.jpg) no-repeat center; left: -25px; } .h_rig{ background: url(../images/h_r.jpg) no-repeat center; right:-25px; } } } } .culture{ .cul_box{ padding: 4% 0; text-align: center; .sum{ font-size: 20px; color: #999999; text-align: center; padding: 2% 6%; strong{ color: @color; font-weight: bold; } } .cont{ font-size: 26px; text-align: center; font-family: "Microsoft YaHei"; font-weight: 300; display: flex; align-items: center; justify-content: center; i{ display: block; margin:0 28px; width: 84px; height: 1px; background-color: #ccc; } } } } .culture_list{ background-color: #eff1f3; padding: 4% 0; ul{ margin: -10px; li{ width: 25%; padding: 10px; .box{ background-color: #fff; height: 100%; h1{ font-size: 22px; color: #fff; background-color: #00154b; width: 182px; line-height: 58px; text-align: center; border-radius: 0 0 58px 0; } .sum{ text-align: center; font-size: 18px; padding-bottom: 10%; } } } } } .culture_more{ ul{ display: flex; } li{ overflow: hidden; .box{ position: relative; right: 0; opacity: 0; width: 0; height:0; .img{ position: relative; h1{ position: absolute; left: 38px; top: 38px; font-size: 18px; color: #fff; } .sum{ position: absolute; left: 38px; bottom: 38px; font-size: 24px; padding: 20px; min-width: 390px; background-color: #fff; border-bottom: 3px solid @color; } } } .tit{ height: 100%; background-color: #f8f8f8; border-right: 1px solid #ccc; padding: 30px; display: flex; flex-wrap: wrap; h1{ font-size: 18px; align-self:flex-start; width: 100%; } i{ align-self:flex-end; width: 100%; text-align: center; font-size: 18px; color: @color; font-weight: bold; } } } } .news{ padding: 4% 0; ul{ margin:0 -6px; li{ width: 33.33%; padding: 6px; margin-bottom: 5px; a{ display: block; &:hover{ .cont{ background:url(../images/more.png) no-repeat 98% center; } } } .cont{ padding:0 40px; background:url(../images/more.png) no-repeat 96% center; background-color: #f8f8f8; .transition; h1{ line-height: 56px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; } } } } } .news_read { padding: 4% 0; // background-color: #f7f7f7; } .news_read .news_typename h1 { font-size: 22px; text-align: center; } .news_read .news_typename .time { text-align: center; color: #747474; padding: 14px 0; } .news_read .read_con { padding-bottom: 40px; line-height: 24px; } .news_read .cc_book { padding: 40px 0; margin-top: 20px; border-top: 1px solid #ccc; } // .news_read .read_con p img{ // width:99%; // } .leave{ padding: 4% 0; .mess_form{ width: 870px; margin: 0 auto; p{ display: flex; margin-bottom: 34px; align-items: center; justify-content: space-between; input{ width: 46%; padding:0 8px; line-height: 40px; border:1px solid #ccc; } } textarea{ width: 100%; border:1px solid #ccc; box-sizing:border-box; padding: 8px; line-height: 40px; height: 200px; } } .submit input { display: block; width: 120px; line-height: 36px; text-align: center; background-color: @color; color: #fff; margin: 20px auto 6% auto; } } #foo_wap { width: 100%; height: 56px; background: @color; position: fixed; bottom: 0; left: 0; z-index: 102; display: none; } #foo_wap a { display: block; padding-top: 13px; width: 25%; height: 56px; float: left; overflow: hidden; border-right:1px solid rgba(255,255,255,0.15) } #foo_wap a img { display: block; height: 18px; margin: 0 auto; } #foo_wap a p { text-align: center; font-size: 13px; color: #fff; line-height: 28px; } .head-wap{ a{ color: #fff; display: block; line-height: 50px; text-indent: 2em; } } .products_type{ padding: 4% 0; background: #fff; .list_ul{ ul{ li{ width: 25%; padding: 5px; a{ display: block; overflow: hidden; position: relative; .img1{ .transition; overflow: hidden; } .img2{ opacity: 0; height: 0; .transition; position: absolute; left: 0; top: 0; overflow: hidden; } h1{ line-height: 50px; text-align: center; background-color: #fff; font-size: 16px; } &:hover{ .img1{ } .img2{ opacity: 1; height: 100%; } } } } } } } .products{ padding: 4% 0; .typename{ .type_top{ h1{ text-align: center; font-size: 40px; } } .return{ display: flex; justify-content: center; position: relative; border:none; margin: 3% 0; &::before{ content: ""; width: 100%; height: 1px; background-color: #ccc; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .return_btn{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 92px; line-height: 34px; display: flex; justify-content: center; align-items: center; background-color: #000; } strong{ color: #fff; padding:0 10px; } } } ul{ margin:2% -14px; li{ width: 33.33%; padding: 14px; a{ display: block; .img{ border:1px solid #f2f2f2; border-bottom: none; } .title{ h3{ line-height: 60px; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #f5f5f5; font-size: 18px; } } } } } } .products_read{ padding: 4% 0; background-color: #f5f5f5; .con1300{ display: flex; justify-content: space-between; .pro_main{ display: flex; width: 50%; justify-content: space-between; .main_left{ width: 100%; max-width: 630px; .tit{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccc; padding: 10px 0; } button{ width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; background-color: @color; } h1{ font-size: 36px; color: @color; } .feature{ h2{ font-size: 20px; color: #797979; margin: 2% 0 4% 0; } .f_cont{ line-height: 24px; } } } } .pro_img{ width: 50%; max-width: 648px; // display: flex; .swiper_pro{ max-width: 480px; border:1px solid #ccc; } #thumbs{ overflow: hidden; max-width: 480px; margin: 10px auto; .swiper-slide{ border:1px solid #ccc; } .swiper-slide-thumb-active{ border:1px solid @color; } } // #thumbs{ // width: 148px; // &>div{ // flex-direction: column; // } // .swiper-wrapper{ // margin: -5px 0; // } // .swiper-slide{ // height: auto; // padding:5px 0; // img{ // border:1px solid #ccc; // } // } // } } } } .contact{ padding: 4% 0; .con1400{ display: flex; justify-content: space-between; } .amap_box{ width: 60%; } .shuyou_info{ width: 40%; padding-left: 2%; box-sizing: border-box; .c_logo{ background-color: @color; display: flex; align-items: center; justify-content: center; padding: 20px 0; } .com_name{ padding: 6% 0; border-bottom: 1px solid #ccc; h1{ font-size: 26px; font-weight: bold; text-align: center; } h2{ text-align: center; font-size: 16px; color: #999999; } } .add{ padding: 4% 0 0 0; h1{ font-size: 16px; font-weight: bold; line-height: 40px; } } } } .contact .shuyou_info .c_logo{ img{ max-width: 40%; } }