// 公共部分 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; } } } } @font-face { font-family:kisn; src: url(../font/KISN.TTF); } .fen{ font-family: kisn; } @color: #2f318b; @bjcolor:#eef2f6; .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; } } // .con1500 { // max-width: 1500px; // width: 100%; // margin: 0 auto; // } .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; } // 公共结束 .con1500{ max-width: 1580px; width: 100%; margin: 0 auto; } // 头部开始 .ban_wap{ display: none; } .head_pc{ .con1400{ display: flex; justify-content: space-between; align-items: center; } .nav{ display: flex; align-items: center; ul{ display: flex; align-items: center; li{ a{ display: block; padding:0 28px; font-size: 18px; line-height: 110px; position: relative; &.hover,&:hover{ color: @color; } &::after{ content:''; width: 80%; height: 4px; background-color: @color; position: static; left: 50%; bottom: 0; transform: translateX(-50%); opacity: 0; .transition; } &:hover::after,&.hover::after{ opacity: 1; } } } .ul2{ display: none; } } } .lng{ a{ display: flex; align-items: center; justify-content: space-between; line-height: 36px; font-size: 18px; text-align: center; padding:0 10px; border-radius: 36px; img{ max-width: 30px; object-fit: cover; } p{ padding-left: 10px; } } } } .index_banner{ position: relative; .swiper-pagination-bullet{ background-color: #fff; opacity: 1; } .swiper-pagination-bullet-active{ background-color: @color; } .ban_icon{ width: 27px; height: 83px; position: static; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3; } } .index_type{ h5{ .fen; font-size: 60px; text-transform: uppercase; line-height:68px; } h1{ font-size: 36px; } } .i_tion{ padding: 4% 0; .con1400{ overflow: hidden; } .list_cont{ display: flex; margin: -10px; &>div{ width: 50%; padding: 10px; } h5{ font-size: 30px; .fen; line-height: 38px; text-transform: uppercase; } h2{ font-size: 30px; line-height: 38px; } i{ display: block; width: 34px; height: 2px; background-color: #fff; margin: 4% 0; } } .left{ .img{ position: relative; } .cont_box{ position: static; left: 0; bottom: 0; width: 100%; background: rgba(47,49,139,0.9); padding: 60px; color: #fff; } .cont_s{ line-height: 34px; } } .rig{ overflow: hidden; ul{ margin: -10px 0; li{ padding: 10px 0; &:last-child{ a{ flex-direction: row-reverse; } .cont_box{ background-color: #009b4c; } } } a{ display: flex; &>div{ width: 50%; } } .cont_box{ background-color: @color; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; } i{ margin: 20px auto; } .more{ width: 120px; line-height: 32px; text-align: center; border:1px solid #fff; border-radius: 16px; margin: 40px auto; } } } } .index_more{ display: flex; align-items: center; justify-content: center; line-height: 40px; border:1px solid #ccc; width: 170px; border-radius: 40px; } .tac{ text-align: center; } .i_appli{ padding-top: 2%; .cont_s{ text-align: center; padding: 2% 0; } .list{ overflow: hidden; ul{ overflow-x: scroll; margin: -10px; white-space: nowrap; padding-bottom: 40px; li{ padding: 10px; display: inline-block; } } } } .i_quality{ padding: 4% 0; .list_tit{ margin: 4% 0; ul{ display: flex; margin: -10px; } li{ padding: 10px; flex:1; &.on{ a{ background:@color; color: #fff; } .icon img:last-child{ display: block; } .icon img:first-child{ display: none; } } a{ display: flex; align-items: center; justify-content: space-between; padding:30px 20px; border:1px solid #ccc; background-color: #f5f5f5; } .tit{ display: flex; align-items: center; } h2{ font-size: 24px; padding:0 5px; } h5{ font-size: 30px; padding:0 5px; .fen; } } .icon img:last-child{ display: none; } } .list_cont{ position: relative; overflow: hidden; ul{ display: flex; margin: -10px; position: static; left: 0; top: 0; width: calc(100% + 20px); height: calc(100% + 20px); } li{ padding: 10px; width: 25%; // width: calc(100% - 100px); opacity: 0; a{ display: block; background:rgba(47,49,139,0.75); height: 100%; padding: 30px; color: #fff; text-align: center; h5{ font-size: 30px; .fen; } h2{ font-size: 24px; } i{ display: block; width: 32px; height: 2px; background-color: #fff; margin: 10% auto; } } } .cont{ font-size: 16px; line-height: 32px; } } } // 首页关于我们 .i_ab{ .con1400{ display: flex; &>div{ width: 50%; } .ab_cont{ padding:30px 40px; background-color: #f5f5f5; } .cont_s{ line-height: 28px; padding: 2% 0; } .more{ display: block; width: 120px; line-height: 32px; text-align: center; border: 1px solid #ccc; border-radius: 16px; // margin: 40px auto; } } } .i_news{ .index_type{ padding: 6% 0 2% 0; } ul{ margin: -15px; li{ width: 50%; padding: 15px; } a{ display: block; border:1px solid #ccc; } .box{ padding:20px 30px ; } h2{ font-size: 20px; font-weight: bold; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } p.time{ color: @color; font-weight: bold; } } .sum{ padding: 10px 0 0 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } } .footer{ background-color: #333; margin-top: 4%; .foo_top{ display: flex; align-items: center; justify-content: space-between; } .foo_nav{ color: #ccc; padding: 4% 0; ul{ display: flex; li:first-child a{ padding-left: 0; } a{ display: block; padding:0 30px; } } } .foo_center{ display: flex; justify-content: space-between; align-items: center; .foo_info{ color: #ccc; line-height: 28px; } } .foo_bottom{ display: flex; justify-content: space-between; align-items: center; margin-top: 4%; .bj{ display: flex; a{ display: block; color: #ccc; padding-right: 20px; } } .scroll_top{ display: flex; align-items:flex-end; justify-content: center; width: 0; height: 0; border-left:80px solid transparent; border-right:80px solid transparent; border-bottom: 48px solid @color; position: relative; p{ position: static; left: 50%; bottom:-56px; color: #fff; transform: translate(-50%,-50%); } } } } .ban_list{ position: relative; } // 公共二级 .pub_left{ position: static; bottom: 0; width: 100%; background: rgba(47, 49, 139, 0.75); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccc; ul{ display: flex; justify-content: center; li{ a{ display: block; padding:0 40px; position: relative; line-height: 60px; font-size: 16px; color: #fff; &::after{ content: ''; width: 1px; height: 14px; position: static; right: 0; top: 50%; background-color: #cfd8e0; transform: translateY(-50%); } &.hover,&:hover{ background-color: @color; } } &:last-child a::after{ display: none; } } } } // 关于我们 .about_one{ padding: 4% 0; .con1400{ overflow: hidden; } .cont_box{ display: flex; margin: -20px; &>div{ width: 50%; padding: 20px; } } .cont_s{ line-height: 30px; padding-top: 2%; } .img{ } } .about_two{ background-color: #f5f5f5; padding: 4% 0; .con1400{ display: flex; max-width:1440px; &>div{ width: 50%; padding: 20px; } } .cont_s{ line-height: 30px; padding-top: 4%; } .list_ul{ margin-top: 4%; ul{ display: flex; justify-content: space-between; h3{ text-align: center; font-size: 60px; } p{ text-align: center; } } } } .culture{ padding: 4% 0 0 0; .list_ul{ margin-top: 4%; } ul{ margin: -20px; } li{ padding: 20px; width: 50%; } } .honor{ padding: 4% 0 0 0; .list_ul{ margin-top: 4%; } ul{ margin: -10px; } li{ width: 33.33%; padding: 10px; a{ display: block; border:1px solid #ccc; } } } .products{ padding: 4% 0; .list_ul{ ul{ margin: -10px; } li{ width: 33.33%; padding: 10px; } h3{ text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 46px; border:1px solid @color; background-color: #f5f5f5; font-size: 16px; .transition; } a{ display: block; } a:hover h3{ background-color: @color; color: #fff; } } } .pro_read{ // background-color: @bjcolor; padding: 4% 0; .pro_info{ display: flex; .img{ width: 30%; } .rig{ padding: 60px; background-color: #fff; width:70%; box-sizing: border-box; h1{ font-size: 26px; font-weight: bold; } .line{ height: 1px; margin: 4% 0; background-color: @bjcolor; } .sum_box{ h5{ font-size: 20px; font-weight: bold; padding-left: 30px; background: url(../images/p_icon1.png) no-repeat left center; } .sum{ line-height: 32px; color: #666666; padding: 20px 0; } } .box{ height: 100%; position: relative; } .more{ display: block; position: static; left: 0; bottom: 0; width: 150px; line-height: 58px; text-align: center; background-color: @color; color: #fff; font-size: 16px; } } } .detail_tit{ padding: 4% 0 2% 0; // background-color: #fff; ul{ display: flex; justify-content: space-between; margin: -5px; li{ width: 16.66%; padding: 5px; &.on a{ background-color: @color; color: #fff; } } a{ display: block; line-height: 46px; // padding:0 20px; border:1px solid #ccc; text-align: center; background-color: #f5f5f5; } } } .detail_cont{ .content{ line-height: 26px; font-size: 14px; display: none; img{ max-width: 100%; } } } } // 新闻中心 .news { padding: 3% 0; .news_list { ul { li { a { display: flex; justify-content: space-between; padding: 2% 0; border-bottom: 1px solid #ccc; background-color: #fff; .img { width: 27%; } .cont { width: 68%; h1 { font-size: 16px; } .time { padding: 10px 0; color: #6e6e6e; } .sum { line-height: 28px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; } } p.more { width: 124px; line-height: 40px; text-align: center; border: 1px solid #ccc; margin-top: 14px; .transition; } &:hover .more { background-color: @color; color: #fff; } } } } } } .news_read{ background-color: @bjcolor; padding: 4% 0; .news_typename h1{ font-size: 24px; text-align: center; } .time{ text-align: center; line-height: 50px; } .line{ height: 1px; background-color: #ccd4db; margin: 2% 0; } .read_con{ line-height: 26px; img{ width: auto; max-width: 100%; } } } // 人力资源 .rlzy{ padding: 4% 0 0 0; .list{ margin-top: 4%; } li{ overflow: hidden; &:nth-child(even){ a{ flex-direction: row-reverse; } } } a{ display: flex; margin:0 -40px; &>div{ width: 50%; padding: 40px; } } .icon{ width: 70px; height: 70px; background-color: @color; display: flex; align-items: center; justify-content: center; border-radius: 50%; } h2{ font-size: 24px; padding: 2% 0 2% 0; } .sum{ line-height: 28px; } } // 招聘 .join{ background-color: @bjcolor; .uls1{ li.wow{ border-bottom: 1px solid #ccc; } a{ display: block; } .tit_info{ color: #666666; display: flex; align-items: center; padding:20px 30px; h3{ width: 20%; font-size: 18px; color: #333; } .info{ width: 60%; font-size: 16px; ul{ display: flex; li{ flex:1; display: flex; align-items: center; justify-content: center; p{ padding:0 10px; } } } } .icon{ width: 20%; text-align: right; font-size: 30px; color: #666666; } } .cont{ padding:20px 30px; background-color: #fff; display: none; .tit{ font-size: 16px; font-weight: bold; padding: 1% 0; border-bottom: 1px solid #ccc; } .content{ padding: 2% 0; line-height: 26px; } } .img2{ display: none; } .active{ .tit_info{ background-color: @color; color: #fff; h3{ color: #fff; } .img1{ display: none; } .img2{ display: block; } .icon{ color: #fff; } } // .cont{ // display: block; // } } } .info2{ display: none; width: 100%; font-size: 16px; ul{ // display: flex; li{ flex:1; display: flex; align-items: center; margin-top: 14px; // justify-content: center; p{ padding:0 10px; font-size: 14px; } } } } } .contact{ padding-top: 4%; .con1400{ .amap_box{ display: flex; padding-top: 4%; } #amap_container{ width: 50%; height: auto; } .info{ width: 50%; padding: 50px; background-color: #f7f7f7; h1{ font-size: 24px; padding:10px 24px; background: url(../images/c_icon.jpg) no-repeat center left; } .sum{ line-height: 30px; } .info_two{ padding-top: 6%; } } } } .tech{ background-color: @bjcolor; ul{ margin: -10px; li{ width: 50%; padding: 10px; } a{ display: block; background-color: #fff; padding:0 30px; } h1{ font-size: 18px; padding: 20px 0; font-weight: bold; border-bottom: 1px solid #666; } .info{ line-height: 36px; padding: 20px 0; p{ padding-left: 26px; } p:first-child{ background: url(../images/c1.png) no-repeat left center; } p:last-child{ background: url(../images/c2.png) no-repeat left center; } } } } .leave { // padding-top: 4%; .mess_form { width: 100%; overflow: hidden; // margin: 3% auto; p { display: flex; margin-bottom: 34px; align-items: center; justify-content: space-between; margin:0 -5px; input { flex:1; margin:10px 5px; 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; margin-top: 10px; } } .submit input { display: block; width: 120px; line-height: 36px; text-align: center; background-color: @color; color: #fff; margin: 20px auto 6% auto; } } .pro_list_wap{ display: none; .img{ padding: 14px 0; background-color: #f5f5f5; } h2{ font-size: 16px; text-align: center; line-height: 40px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pro_k{ display: flex; justify-content: center; align-items: center; &>div{ width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; margin: 10px; } } } .cc_pro{ border-top:1px solid #ccc; padding: 2% 0; margin-top: 2%; ul{ display: flex; justify-content: space-between; align-items: center; a{ display: block; width: 158px; line-height: 56px; text-align: center; color: #fff; background-color: @color; font-size: 16px; } } } .wap_footer { width: 100%; height: 50px; background: #2f318b; position: static; bottom: 0; left: 0; z-index: 10000; padding:2px 0; display: none; } .wap_footer a { display: block; // padding: 2px 0; width: 25%; height: 45px; float: left; background: url(../images/public/footer.png) right center repeat-y; overflow: hidden; position: relative; } .wap_footer a::after{ content:''; position: static; right: 0; top:50%; transform: translateY(-50%); width: 1px; height: 40px; background: rgba(255,255,255,0.2); } .wap_footer a:last-child { background-image: none; } .wap_footer a img { display: block; height: 18px; margin: 0 auto; margin-top: 4px; } .wap_footer a p { text-align: center; font-size: 12px; color: #fff; line-height: 28px; }