// 公共部分 body { // -webkit-filter: grayscale(100%); // -moz-filter: grayscale(100%); // -ms-filter: grayscale(100%); // -o-filter: grayscale(100%); // filter: grayscale(100%); // filter: gray; // padding-top: 90px; } .jgys{ justify-content: space-between; li{ width: 300px; height: 323px; border: 1px solid #eee; display: flex; flex-direction: column; justify-content: center; position: relative; text-align: center; padding: 0 53px; &:hover{ .title{ color: #3490de; } } .title{ font-size: 24px; color: #333; margin-bottom: 20px; } .hx{ width: 36px; height: 2px; background: #3490de; margin: 0 auto; margin-bottom: 48px; } .ms{ font-size: 16px; line-height: 26px; color: #666; } img{ position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); } } } .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: #000; @bjcolor: #eef2f6; .head_pc { width: 100%; z-index: 222; background: #fff; .con1600 { display: flex; justify-content: space-between; align-items: center; } .nav { display: flex; align-items: center; ul { display: flex; align-items: center; li { position: relative; .active { display: block; padding: 0 40px; font-size: 18px; line-height: 90px; // color: #fff; position: relative; &::after { width: 76px; height: 5px; position: absolute; content: ""; left: 50%; transform: translateX(-50%); bottom: 0; .transition; } &:hover::after, &.hover::after { background-color: #3490de; color: @color; } &:hover, &.hover { color: @color; } } .ul2 { position: absolute; left: 50%; transform: translateX(-50%); min-width: 100%; background: rgba(0, 0, 0, 0.5); display: none; a { font-size: 16px; display: block; line-height: 40px; width: 100%; // overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; color: #fff; &:hover, &.hover { background-color: @color; color: #fff; } } } } } } .langs{ height: 100%; display: flex; justify-content: center; padding: 0 40px; a{ padding: 0 !important; } div{ background: url('../images/en.png') no-repeat left center; padding: 0 !important; padding-left: 36px !important; color: #000; width: 100%; display: block; &:hover{ color: #fff; } } &:hover{ background: #3490de; div{ background: url('../images/en2.png') no-repeat left center; color: #fff; } } } } .index_banner { .main { padding: 113px 0 180px 0; color: #fff; position: relative; &::after{ display: block; content: ''; clear: both; } .left{ position: absolute; padding-top: 110px; z-index: 2; .etitle{ font-size: 85px; line-height: 85px; margin-bottom: 54px; span{ color: @color; } } .ctitle{ font-size: 37px; line-height: 58px; margin-bottom: 58px; } .ms{ font-size: 20px; line-height: 20px; margin-bottom: 48px; } .xq{ display: flex; align-items: center; margin-bottom: 113px; .fa{ font-size: 34px; } .yuan{ width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%; margin-left: -20px; } } .slt{ display: flex; align-items: center; .thumbs{ width: 35%; } .thumbs ul .swiper-slide{ cursor: pointer; } .hx{ width: 8.3%; border-bottom: 1px solid #f5d2c6; margin-left: 2px; height: 0; margin-right: 1.8%; } .sz{ display: flex; font-size: 14px; width: 7.6%; justify-content: space-between; .active{ transform: scale(1.5); } } } } .right{ float: right; width: 64%; } } } .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: 1554px; width: 100%; margin: 0 auto; } .con1300 { max-width: 1300px; width: 100%; margin: 0 auto; } .con1200 { max-width: 1200px; width: 100%; margin: 0 auto; } .con1600 { max-width: 1600px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; } // 公共l束 .con1500 { max-width: 1550px; width: 100%; margin: 0 auto; } // 头部开? p { -webkit-margin-before: 0; -webkit-margin-after: 0; } .public_padding { padding-bottom: 150px; } .head_pc { .con1600{ align-items: center; } position:fixed; width:100%; background:#fff; z-index: 999; box-shadow: 0 0 12px -7px; .nav { display: flex; align-items: center; ul { display: flex; align-items: center; li { a { display: block; padding: 0 40px; font-size: 18px; line-height: 90px; color:#000; position: relative; &.hover, &:hover { color: @color; } } } } } .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; } } } } .pub_flex { display: flex; } .dsuojin { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .index_banner{ } .index_about{ background: url('../images/index_ab_bg.png') no-repeat; background-size: 50% auto; .con1600{ position: relative; .right{ .pub_title{ text-align: left; margin-top: 165px; } width: 42%; .content{ font-size: 18px; color: #333; line-height: 41px; margin-bottom: 118px; font-weight: lighter; } .about_link{ display: flex; justify-content: space-between; li{ width: 31%; border: 1px solid #eeeeee; height: 132px; a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 16px; color: #999; font-weight: lighter; &:hover{ transform: translateY(5px); transition: all .2s; } .active{ display: none; } &:hover{ color: #3490de; .normal{ display: none; } .active{ display: block; } } img{ margin-bottom: 19px; } } } } } .left{ z-index: 999; width: 41%; margin-top: 660px; ul{ display: flex; justify-content: space-between; margin-bottom: 170px; width: 100%; li{ font-size: 78px; color: #fff; display: flex; flex-direction: column; align-items: center; position: relative; span{ font-size: 16px; font-weight: lighter; } } .fa-plus:before{ font-size: 24px; position: absolute; top: 17px; right: -17px; } } } } &.active{ .left{ animation: 1s bounceInLeft both; li{ &:nth-child(1){ animation: 1s fadeInUp both; } &:nth-child(2){ animation: 1.2s fadeInUp both; } &:nth-child(3){ animation: 1.4s fadeInUp both; } } } .right{ animation: 1s bounceInRight both; li{ &:nth-child(1){ animation: 1s fadeInUp both; } &:nth-child(2){ animation: 1.2s fadeInUp both; } &:nth-child(3){ animation: 1.4s fadeInUp both; } } } } } .index_product{ background: linear-gradient(#fff, #fff) no-repeat, linear-gradient(#aee1f8, #fff); background-size: 100% 54%; &.active{ .content{ animation: 1s bounceInUp both; li{ transition: .6s; overflow: hidden; &.active{ .title{ background: #4b9fe1 !important; } } &:nth-child(1){ animation: 1s fadeInUp both; } &:nth-child(2){ animation: 1.3s fadeInUp both; } } } } .wrap{ padding: 136px 0 50px; animation: 1s .4s fadeInLeft both; } .content{ display: flex; justify-content: space-around; margin-bottom: 50px; a{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 16px; color: #333; .img_wrap{ width: 100%; text-align: center; overflow: hidden; } span{ position: absolute; bottom: 17px; font-size: 16px; color: #333; font-weight: lighter; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: 90%; text-align: center; } &:hover{ img{ transform: scale(1.1); overflow: hidden; transition: 1s; } ~.title{ border-bottom:1px solid #3490de; } } } } .more{ font-size: 18px; color: #484848; padding: 0 106px; border: 1px solid #d2d2d2; line-height: 66px; width: fit-content; position: relative; left: 50%; transform: translateX(-50%); font-weight: lighter; &:hover{ color: #fff !important; background: #3490de; } // margin-bottom: 106px; } } .index_enterprise{ background: url('../images/index_enterprise.png') no-repeat; background-size:100% 100%; .video_wrap{ flex-wrap: wrap; align-items: space-between; li{ width: 40%; height: 200px; background: #fff; box-shadow: 0 0 10px #fff; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; padding: 0 26px; &:hover{ box-shadow: 0 0 10px #3490de; .title{ color: #3490de !important; } } .right{ margin-right: 74px; .title{ font-size: 24px; color: #333; text-align: left; margin-bottom:12px; } .hx{ width: 36px; height: 2px; background: #3490de; } .ms{ font-size: 18px; color: #666; margin-top: 28px; } } } } &.active{ .video_wrap{ animation: 1s bounceInUp both; } } .wrap{ padding: 136px 0 50px; } .pub_title{ .etitle{ color: #fff; } .ctitle{ color: #fff; } } .video_wrap{ position: relative; } .video_wrap{ cursor: pointer; } .play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%;-50%); font-size: 32px; color: #fff; display: flex; flex-direction: column; align-items: center; // &:hover{ // transform: translate(-50%;-70%); // } img{ margin-bottom: 32px; } } } .index_news{ display: flex; flex-direction: column; justify-content: center; &.active{ .pub_title{ animation: 1s fadeIn both; } .pub_news{ animation: 1s bounceInUp both; } li{ &:nth-child(1){ animation: 1s fadeInUp both; } &:nth-child(2){ animation: 1.2s fadeInUp both; } &:nth-child(3){ animation: 1.4s fadeInUp both; } &:nth-child(4){ animation: 1.6s fadeInUp both; } } } .wrap{ padding: 136px 0 50px; } } .pub_news{ margin-bottom: 62px; .title{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } ul{ display: flex; justify-content: space-between; width: 100%; a{ height: 469px; position: relative; display: flex; flex-direction: column; font-size: 18px; font-weight: lighter; padding: 29px 26px 0; background: #eee; img{ margin-bottom: 36px; } i{ position: absolute; bottom: 33px; color: #9d9d9d; } span{ margin-bottom: 14px; } &:hover{ background: #3490de; color: #fff; i{ color: #fff; } } } } .more{ &:hover{ color: #fff !important; background: #3490de; } } } .pub_title{ text-align: center; .etitle{ font-size: 60px; color: #3490de; } .ctitle{ font-size: 36px; color: #000; font-weight: lighter; margin-bottom: 52px; } } .pub_news { flex-direction: column; .content { display: flex; justify-content: space-between; flex-wrap: wrap; li { width: 32.7%; padding: 29px 36px; border: 1px solid #f3f3f3; &:hover{ .cover{ opacity: 1; } } .cover{ position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.5s 0s ease-in-out; .time{ position: absolute; left: 0; top: 0; z-index: 1; color: #fff; padding: 48px; background: @color; border-radius: 10px; } } .time { color: #ccc; width: fit-content; text-align: center; margin-bottom: 62px; .ntime { font-size: 18px; line-height: 18px; } .rtime { font-size: 72px; line-height: 72px; margin-bottom: 14px; } } .title { font-size: 24px; line-height: 24px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 26px; } .main { color: #666666; font-size: 16px; line-height: 34px; margin-bottom: 64px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .fa { font-size: 27px; color: #d1cbcb; } } } } .pub_news .content{ display: none; } .footer{ background: #000; padding-top: 102px; // max-height: 318px; .con1600{ display: flex; justify-content: space-between; height: 216px; .left{ display: flex; .info{ display: flex; flex-direction: column; span{ &:nth-child(1){ font-size: 16px; color: #666666; } &:nth-child(2){ font-size: 40px; line-height: 74px; color: #ccc; } &:nth-child(3){ font-size: 16px; color: #ccc; } } } } .right{ display: flex; align-items: center; flex-direction: column; color: #999; .top{ img{ margin-bottom: 10px; } p{ font-size: 13px; margin-bottom: 10px; } } .bottom{ font-size: 14px; } } .nav{ width: 45%; margin-left: 15%; .title{ font-size: 16px; color: #666666 !important; width: 100%; } a{ width: 26% !important; } li{ font-size: 16px; color: #ccc !important; margin-right: 15px; line-height: 56px; } ul{ display: flex; flex-wrap: wrap; } } } } .banner{ margin-top: 90px; } .pub_top_nav{ justify-content: center; // justify-content: start; flex-wrap: wrap; font-size: 20px; color: #666666; line-height: 60px; border-bottom: 1px solid #bfbfbf; li{ width: 25%; text-align: center; &:hover{ color: #3490de; } } .hover{ color: #3490de; } } .product_center_nav{ justify-content: start; } .about{ padding: 98px 0; font-size: 18px; color: #666666; line-height: 42px; text-align: justify; display: block; font-weight: lighter; .top{ display: flex; align-items: center; .left{ width: 46%; justify-content: space-between; p{ &:nth-child(1){ font-size: 22px; color: #3490de; line-height: 40px; margin-bottom: 50px; font-weight: bold; } } } margin-bottom: 95px; } .bottom{ margin-top: 393px; position: relative; video{ position: relative; top: -298px; } .video_wrap{ cursor: pointer; } .play{ position: absolute; top: -19px; left: 50%; transform: translate(-50%;-50%); font-size: 32px; color: #fff; display: flex; flex-direction: column; align-items: center; img{ margin-bottom: 32px; } } .wrap{ background: #f4f4f4; } .content{ margin-top: -189px; padding-bottom: 148px; } } } .zizhi{ height: 875px; display: flex; align-items: center; margin: 98px 0; background: url('../images/zizhi_bg.png'); .content{ li{ width: 322px; text-align: center; &:nth-child(even){ margin-top: 58px; } &:nth-child(1){ animation: 1s fadeInUp both; } &:nth-child(2){ animation: 1.2s fadeInUp both; } &:nth-child(3){ animation: 1.4s fadeInUp both; } &:nth-child(4){ animation: 1.6s fadeInUp both; } img{ &:nth-child(1){ margin-bottom: 3px; } } } } } .class_title{ text-align: center; font-size: 36px; font-weight: lighter; margin-bottom: 78px; color: #000; } .product_center{ padding: 98px 0 68px; .jgj{ display: flex; align-items: center; justify-content: center; position: relative; &:hover{ box-shadow: 0 0 10px #ccc; .title{ color: #3490de !important; } } a{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .title{ position: absolute; bottom: 18px; background: none !important; color: #000 !important; font-weight: lighter !important; } } .con1600{ flex-wrap: wrap; justify-content: start; position: relative; li{ a{ &:hover{ img{ transform: scale(1.03); overflow: hidden; transition: 1s; } } } margin-bottom: 27px; margin-right: 27px; .wrap{ display: flex; align-items: center; justify-content: center; overflow: hidden; } width: 23.7%; text-align: center; &:nth-child(4n+4){ margin-right: 0 !important; } .title{ font-size: 18px; color: #fff; line-height: 43px; background: #4b9fe1; font-weight: lighter; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } } } } .index_banner_pic{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .product_xq{ padding: 98px 0; display: block; .top{ display: flex; justify-content: space-between; align-items: center; // width: 32.6%; width:100%; margin-bottom: 75px; .left{ width: 32.6%; } .right{ width: 63.5%; .path{ font-size: 16px; color: #999999; font-weight: lighter; margin-bottom: 67px; .hover{ color: #000; } a{ &:hover{ color: #000; } } i{ font-size: 18px; margin: 0 9px; } } .title{ font-size: 24px; margin-bottom: 35px; } .ms{ border-top: 1px solid #eeeeee; font-size: 17px; font-weight: lighter; line-height: 37px; margin-bottom: 86px; padding-top: 31px; } .contact{ display: block; padding: 0 46px; width: fit-content; background: #eeeeee; border-radius:30px; line-height: 47px; font-size: 16px; font-weight: lighter; &:hover{ background: #f8b551; color: #fff; } } } } .wrap{ width: 100%; display: flex; align-items: center; justify-content: center; } .bottom{ .pd_nav{ display: flex; li{ text-align: center; background: #eee; flex: 1; font-size: 20px; a{ display: block; line-height: 65px; } &.hover{ background: #3490de; color: #fff; } &:hover{ .hover } &:nth-child(2){ border-width: 0 1px; border: 1px solid #fff; } } } .content{ padding: 60px 62px 0; font-size: 18px; line-height: 42px; li{ font-weight: lighter; } table,table tr th, table tr td { border: 1px solid #7c7b79; } table{ margin-top: 12px; width: 100%; th,td{ text-align: center; } } .technical,.shape{ table{ margin-top: 12px; width: 100%; thead{ background: #848283; color: #fff; line-height: 37px; font-size: 20px; } tbody{ line-height: 36px; tr{ &:nth-child(2n){ background: #c5e5fa; } td{ &:nth-child(2){ text-align: center; } } } } } } .title{ font-size: 20px; color: #3490de; font-weight: normal; padding-bottom: 16px; span{ font-weight: bold; } } .shape{ .table_wrap{ display: flex; justify-content: space-between; flex-wrap: wrap; } table{ width: 45%; .tab_head{ background: #848283; color: #fff; font-size: 20px; } tbody{ tr{ td{ text-align: center !important; padding-left: 0 !important; } &:nth-child(2n){ background: #c5e5fa; } } } } } } } } .news_center{ padding: 98px 0; display: block; margin-bottom: 0; ul{ flex-wrap: wrap; li{ margin-bottom: 26px; } } } .news_read{ padding: 98px 0; .news_typename{ margin-bottom: 64px; } h1{ font-size: 30px; line-height: 30px; color: #333; font-weight: bold; text-align: center; margin-bottom: 23px; } .time{ font-size: 18px; line-height: 18px; text-align: center; margin-bottom: 72px; } hr{ background-color: #d2d2d2; border: none; height: 1px; &:nth-child(2){ margin-bottom: 80px; } } .read_con{ font-size: 18px; color: #666666; line-height: 38px; p{ margin-bottom: 5px; &:last-child{ margin-bottom: 0; } } } .news_con{ margin-bottom: 30px; } .cc_pro{ ul{ display: flex; justify-content: space-between; li{ padding: 9px 56px; background: #eee; font-weight: lighter; font-size: 20px; &:hover,&.article_return{ background: #3490de; color: #fff; } } } } } .renli{ padding: 98px 0; .title{ text-align: center; font-size: 36px; font-weight: lighter; margin-bottom: 89px; } .top{ margin-bottom: 98px; .content{ .left{ width: 790px; height: 501px; background: #3490de; display: flex; align-items: center; padding: 0 74px; font-size: 16px; font-weight: lighter; color: #fff; line-height: 37px; } } } .bottom{ table{ width: 100%; thead{ font-size: 21px; line-height: 84px; font-weight: lighter; color: #000; tr{ background: #e2f2fc; } } tbody{ line-height: 110px; font-size: 18px; tr{ border-bottom: 1px solid #eeeeee; } } td{ text-align: center; } } } } .contact{ padding: 98px 0; .top{ display: flex; justify-content: space-between; margin-bottom: 98px; .left{ width: 34.6%; background: #3490de; display: flex; flex-direction: column; align-items: center; justify-content: center; .content{ width: 72.3%; } .ctitle{ font-size: 24px; color: #fff; margin-bottom: 11px; } .etitle{ font-size: 18px; color: #66ccff; margin-bottom: 54px; } .ms{ font-size: 16px; color: #666; line-height: 34px; margin-bottom: 81px; } .lx{ li{ display: flex; flex-direction: column; font-size: 16px; color: #fff; line-height: 42px; border-top: 1px solid #3399ff; span{ &:nth-child(1){ font-weight: lighter; } } } } } .right{ width: 65.4%; .amap_box{ padding: 0; } #amap_container{ height: 760px; } } } .bottom{ display: flex; justify-content: space-between; .right{ flex-direction: column; align-items: center; .title{ font-size: 30px; color: @color; line-height: 30px; margin-bottom: 30px; } .ms{ font-size: 16px; line-height: 16px; color: #333333; margin-bottom: 84px; } } form{ width: 100%; height: 626px; background: #fafafa; display: flex; justify-content: center; align-items: center; flex-direction: column; } } } .mess_form{ width: 87.8%; .input{ display: flex; flex-wrap: wrap; justify-content: space-between; } input,textarea{ height: 45px; border: 1px solid #d2d2d2; background: #fbfbfb; margin-bottom: 42px; padding-left: 10px; } textarea{ width: 100%; line-height: 45px; height: 223px; } } .form_btn{ display: flex; justify-content: right; input{ border: 2px solid #f0f0f0; padding: 14px 60px; font-size: 18px; line-height: 18px; color: #fff; &:nth-child(1){ background: @color; margin-right: 15px; } &:last-child{ background: #000; } } } 欧美精品v欧洲高清视频在线观看