/** @Name: layuiNetCompany - 大气风格的网络公司企业模版 @Author: xuxingyu @Copyright: layui.com */ body{background: #fff;} /** 首页 */ /*导航部分*/ .nav{width: 100%; height: 80px; box-shadow: 0 3px 3px 0 #CCC; background: #FFF; position: fixed; left: 0; top: 0; z-index: 999; overflow: hidden; transition: 0.3s} .nav.index{background: rgba(255, 255, 255 ,0.8); box-shadow: 0 0 0 0 rgba(0,0,0,0.05);} .nav.scroll{ background: #FFF; box-shadow: 0 3px 3px 0 rgba(0,0,0,0.05); transition: 0.3s} .nav .layui-container{position: relative; transition: all 400ms ease-out;} .nav .nav-logo{height: 100%; position: absolute; top: 0; left: 15px; line-height: 80px; } .nav .nav-logo h1{width: 100%; height: 100%; display: flex; align-items: center;} .nav .nav-logo.enter h1{width: 100%; height: 100%; display: block; align-items: center;padding-top: 5px;} .nav .nav-logo h1 a{ width: 200px; height: 40px; display: block; background: url('/res/static/img/logo.png') no-repeat center center; text-indent: -9999px;} .nav .nav-list{display: inline-block; height: 80px;} .nav .nav-list button{width: 25px; height: 30px; position: absolute; top: 30px; right: 15px; background-color: transparent; border: none; outline: none; cursor: pointer;} .nav .nav-list button span{display: block; width: 25px; height: 2px; background: #d71144; margin-bottom: 6px; transition: 0.5s;} .nav .nav-list button span.spa1{transform: rotate(45deg);} .nav .nav-list button span.spa3{transform: rotate(-45deg) translate(5px,-5px);} .nav .layui-nav{width: 100%; position: absolute; top: 80px; right: 0; color: #000; background: transparent;} .nav .layui-nav .layui-nav-item{display: block; line-height: 60px;} .nav .layui-nav *{font-size: 18px;} .nav .layui-nav .layui-nav-item a{padding: 0 0; color: #000;} .nav .layui-nav-bar, .nav .layui-nav .layui-this:after{height: 2px; background-color: #d71144;} .nav .layui-nav .layui-this a ,.nav .layui-nav .layui-nav-item a:hover{color: #d71144;} .nav .my {position: absolute; top: 0; right: -120px;display: flex;justify-content: flex-start;font-size: 14px;line-height: 80px;} /*轮播*/ #banner {height: 898px; margin-top: 80px;} #banner .item{background: url(/res/static/img/banner1.png) no-repeat center top; background-size: cover;} #banner .panel{width: 400px; position: absolute; top: 25%; left: 50%; margin-left: -200px; text-align: center;} #banner .panel p{color: #8c8c8c; font-size: 44px; line-height: 80px; letter-spacing: 15px;} #banner .panel p.title{color: #4a4a4a; font-size: 54px; letter-spacing: 10px;} /*主体—产品*/ .main-product{padding-top: 90px; padding-bottom: 130px;} .main-product p{font-size: 16px; color: #ababab; line-height: 28px;} .main-product p.title ,.main-service p.title{color: #484848; font-size: 24px; text-align: center; line-height: 160px;} .main-product p.title span ,.main-service p.title span{color: #d71144;} .main-product .content{border: 1px solid #DEDEDE; padding: 30px 36px 0 36px; text-align: center; transition: 0.3s;} .main-product .content p.label{font-size: 18px; color: #939393; line-height: 46px; padding-top: 6px;} .main-product .content a{font-size: 18px; color: #a1d8cb; line-height: 68px;} .main-product .content:hover{box-shadow: 0 0 3px 3px #EEE; transition: 0.3s;} .main-product .content img{transition: 2s;} .main-product .content img:hover{transform: rotateY(180deg);} .main-product .shop-context-box {display: flex;justify-content: center;align-items: center;} .main-product .shop-box{width: 410px;padding:25px; display: flex;flex-direction: column;background: #FFFFFF;box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.15);border-radius: 10px;} .main-product .shop-box:nth-child(1){margin-right: 85px;} .main-product .shop-box .header-data-box{display: flex;justify-content: flex-start;align-items: center;} .main-product .shop-box .header-data-box .image{width: 82px;height: 82px;padding-right: 10px;} .main-product .shop-box .header-data-box .header-right-box{display: flex;flex-direction: column;line-height: 35px;} .main-product .shop-box .header-data-box .header-right-box .title-box{display: flex;justify-content: center;align-items: center;} .main-product .shop-box .header-data-box .header-right-box .title{font-size: 24px;font-weight: 500;margin-right: 10px;} .main-product .shop-box .header-data-box .header-right-box .phone-box {display: flex;justify-content: center;align-items: center;} .main-product .shop-box .header-data-box .header-right-box .phone-box .phone{font-size: 18px;font-weight: 400;} .main-product .shop-box .header-data-box .header-right-box .phone-box .button-phone{font-size: 18px;font-weight: 400;margin-left: 5px;padding: 2px 5px; background: #D71144;font-weight: 400;border-radius: 5px;color: #FEFEFE;} .main-product .shop-box .address{font-size: 15px;padding-top: 15px; font-weight: 500;} /*主体-服务*/ .main-service{background: #f8f8f8;} .main-service .content{position: relative;} .main-service .content .content-left{width: 50%;} .main-service .content .content-left img{width: 100%;} .main-service .content .content-right{box-sizing: border-box; background: #FFF; padding: 58px 40px 0 48px; width: 50%; height: 100%; position: absolute; top: 0; right: 0; transition: 0.3s; overflow: hidden;} .main-service .content .content-right p{color: #adadad; line-height: 32px; overflow: hidden; text-overflow: ellipsis;} .main-service .content .content-right p.label{font-size: 16px; color: #4a4a4a;} .main-service .content .content-right span{display: block; width: 50px; height: 2px; background: #d71144; margin-bottom: 23px;} .main-service .content .content-right:hover{box-shadow: 2px 2px 2px #EEE; transition: 0.3s;} .main-service .service-more{padding-top: 40px; padding-bottom: 40px; text-align: center;} .main-service .service-more a{padding: 10px 62px; font-size: 23px; line-height: 46px;color: #FFF; background: #7fd3c6; border-radius: 3px;} /*底部*/ .footer{ padding-bottom: 20px;background: #5e6664;} .footer .footer-web{padding-top: 50px; padding-bottom: 63px; color: #a5aaa9;} .footer .footer-web .title{margin-bottom: 5px;} .footer .footer-web a{color: #a5aaa9; line-height: 22px; margin-right: 20px; transition: 0.3s;} .footer .footer-web a:hover{color: #dce1e0; transition: 0.3s;} .footer .footer-contact{color: #fff;padding-bottom: 30px} .footer .footer-contact a{color: #a5aaa9;} .footer .footer-contact .contact-top{padding-top: 20px; line-height: 30px;} .footer .footer-contact .contact-bottom{line-height: 35px;} .footer .copyright{text-align: center;color: #fff;} .footer .copyright:hover {text-decoration:underline;} /** 产品 */ .banner{height: 320px; margin-top: 80px;} .banner.product{background: url(/res/static/img/nav_img1.jpg) no-repeat center top; background-size: cover;} .main.product{padding: 30px 0 75px 0;} .main.product .content{padding: 50px 0; border-bottom: 1px solid #e8e8e8;} .main.product .content .content-img{text-align: center;} .main.product .content .content-img img{max-width: 100%;} .main.product .content .label{color: #565656; font-size: 30px; line-height: 78px; margin-top: 32px;} .main.product .content .detail{font-size: 16px; line-height: 28px; color: #666; padding-bottom: 30px;} .main.product .content a{color: #d71144; font-size: 16px; line-height: 38px; padding:10px 11px 10px 23px; border: 1px solid #d71144; border-radius: 3px;} /** 动态 */ .banner.news{background: url(/res/static/img/nav_img3.jpg) no-repeat center top; background-size: cover;} .banner .title{padding-top: 170px;} .banner .title.active{padding-top: 120px; transition: 1.5s;} .banner .title p{color: #606060; font-size: 36px; text-align: center; line-height: 50px; letter-spacing: 5px;} .banner .title p.en{font-size: 20px; letter-spacing: 3px;} .main-news{padding: 70px 0 80px 0;} .main-news .content > a{padding-bottom: 20px; border-bottom: 1px dashed #eaeaea; position: relative; height: 100%; display: block;} .main-news .content .news-img{display: inline-block; width: 30%; vertical-align: top;} .main-news .content .news-img img{max-width: 90%;} .main-news .content .news-panel{display: inline-block; width: 70%; vertical-align: top; padding-left: 5px; box-sizing: border-box;} .main-news .content .news-panel strong a{display: block; color: #555; font-size: 18px; line-height: 26px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;} .main-news .content .news-panel p.detail{color: #777; line-height: 22px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;margin-bottom: 40px;} .main-news .content .news-panel p.read-push{color: #AAA; padding-top: 5px;} .main-news #newsPage .layui-laypage{display: block; text-align: center; margin-top: 70px;} .main-news #newsPage .layui-laypage a,.main-news #newsPage .layui-laypage span{font-size: 18px; line-height: 40px; height: 40px; margin-right: 20px; border-radius: 3px; color: #e3e3e3;} /* 动态详情页 */ .main-newsdate .detail-content{padding:150px 200px;} .main-newsdate .detail-content p{font-size: 14px; line-height: 24px; margin-bottom: 20px;} .main-newsdate .detail-content img{display: inline-block; max-width: 100%;} /*加盟*/ .main-league{margin-top: 80px;} .main-league .league-img-wrapper{width: 100%; margin-bottom: 150px;} .main-league .league-img-wrapper img{display: block; width: 100%;} .main-league .content{margin-bottom: 150px;} .main-league .content1{margin-bottom: 30px;} .main-league .content .title{text-align: center; margin-bottom: 50px;} .main-league .content .title p.t{font-size: 30px; font-weight: bold; margin-bottom: 10px;} .main-league .content .title p.t .t-img{display: inline-block;width: 140px; height: 58px; background: url('/res/static/img/num.png') 0 0 no-repeat; background-size: 140px 58px; vertical-align: bottom} .main-league .content .title span.t-sub{border: 2px solid #999999;color:#999;border-radius: 14px; line-height: 28px; padding: 0 10px;} .main-league .content .img-wrapper{padding-right: 50px;} .main-league .content .img-wrapper img{width: 100%;} .main-league .content .img-wrapper img.first{margin-bottom: 20px;} .main-league .content .right{display: flex; flex-direction: column; justify-content:space-around; height: 620px;} .main-league .content .right p{font-size: 16px;line-height: 28px;color: #666;} .main-league .content .right p.t{color: #565656;font-size: 30px; margin-bottom: 20px;} .main-league .content .t-top{font-size: 24px; color: #fff; font-weight: bold; background-color: #D71144;border-radius: 30px 30px 0px 0px;height: 72px; line-height: 72px;text-align: center;} .main-league .content .t-bot{font-size: 24px;padding: 30px; background-color: #f7f7f7; color: #7D7D7D;border-radius: 0px 0px 30px 30px; height: 278px;text-align: center; line-height: 36px;} .main-league .content .pic-wrapper {box-sizing: border-box; margin: 0;} .main-league .content .pic-wrapper img{ display: block; width: 100%;} .main-league .content .pic-wrapper .pic2{margin-bottom: 20px;} .main-league .content .pic-wrapper .txt-box{padding: 10px 90px; line-height: 32px;} .main-league .content .pic-wrapper .txt-box .tit{font-size: 24px;font-weight: bold;color: #333333;margin-bottom: 12px;} .league-form{ width: 100%; background-color: #F4F4F4; margin-top: 0; padding-top: 50px; padding-bottom: 40px;} .league-form .form-area{ font-size: 14px; width: 500px; margin: 0 auto; max-width: 100%; overflow: hidden;} .league-form .form-area .item{margin-bottom: 20px; display: flex; align-items: center;} .league-form .form-area .tag{font-size: 24px; color: #FE0101; width: 9px; height: 14px; display: block; margin-left: 12px; font-weight: bold;} .league-form .form-area label{font-size: 14px; flex: 0 0 5em; width: 5em; font-weight: bold; color:#000;text-align: right;} .league-form .form-area input{background: #FFFFFF;border: 1px solid #EEEEEE; height: 38px; line-height: 38px; padding-left: 10px; flex: auto;} .league-form .form-area .citys{height: 38px; display: flex; width: 100%;} .league-form .form-area .citys select{height: 38px; flex: 1; flex-wrap: nowrap; justify-content: space-between;} .league-form .form-area .citys select{margin-right: 10px;} .league-form .form-area .citys select:last-child{margin-right: 0;} .league-form .form-area .citys option{ width: 100%; height: 38px;} .btn-wrapper{height: 60px; line-height: 60px ; color: #fff; font-size: 24px; text-align: center;} .btn-wrapper .submit{display: inline-block; padding: 0 30px; background: #D71144;} /** 案例 */ .banner.case{background: url(/res/static/img/nav_img2.jpg) no-repeat center top; background-size: cover;} .main-case{padding: 30px 0 75px;} .main-case .content{width: 48%; text-align: center; padding-top: 120px; padding-bottom: 20px; border-bottom: 2px solid #c9c9c9;} .main-case .content.even{margin-left: 2%;} .main-case .content .case-img{border: 1px solid #e2e2e2; overflow: hidden;} .main-case .content .case-img img{width: 100%; transition: 2s;} .main-case .content .case-img img:hover{transform: scale(1.2,1.2); transition: 2s;} .main-case .content p.lable{padding-top: 13px; font-size: 30px; line-height: 76px;} .main-case .content p{font-size: 18px; line-height: 32px; color: #505050;} .main-case #casePage .layui-laypage{display: block; text-align: center; margin-top: 100px;} .main-case #casePage .layui-laypage a,.main-case #casePage .layui-laypage span{font-size: 18px; line-height: 40px; height: 40px; margin-right: 20px; border-radius: 3px; color: #e3e3e3;} /** 关于 */ .banner.about{background: url(/res/static/img/nav_img4.jpg) no-repeat center top; background-size: cover;} .main-about{padding-bottom: 130px;} .main-about ul.aboutab{padding: 100px 0; text-align: center;} .main-about ul.aboutab li{display: inline-block; padding: 0 22px; margin-left: 15px; font-size: 20px; line-height: 46px; color: #b5b5b5; border: 1px solid #e2e2e2; border-radius: 3px; cursor: pointer;} .main-about ul.aboutab li:first-child{margin-left: 0;} .main-about ul.aboutab li.layui-this ,.main-about ul.aboutab li:hover{color: #d71144; border-color: #d71144; transition: 0.3s;} .main-about .tabJob, .main-about .tabCour{display: none;} /*公司简介*/ .main-about .tabIntro{padding-bottom: 15px;} .main-about .tabIntro .content{vertical-align: middle;} .main-about .tabIntro .content .img{width: 49%;} .main-about .tabIntro .content .img img{width: 100%;} .main-about .tabIntro .content .panel{width: 50%;} .main-about .tabIntro .content p{padding: 0 20px; line-height: 24px; text-align: justify;} .main-about .tabIntro .p_hidden{padding: 0 20px; display: none;} /*发展历程*/ .main-about .tabCour p.title{font-size: 28px; line-height: 28px; text-align: center;} .main-about .tabCour .timeline{position: relative; margin-top: 75px;} .main-about .tabCour .timeline:before{position: absolute; top: 0; bottom: 0; content: ""; width: 2px; background-color: #e2e2e2; left: 50px;} .main-about .tabCour .timeline li{position: relative; padding-top: 70px;} .main-about .tabCour .timeline li:first-child{padding-top: 0;} .main-about .tabCour .timeline li .cour-img{position: absolute; left: 0; width: 100px; border-radius: 50%;} .main-about .tabCour .timeline li .cour-img img{width: 100%;} .main-about .tabCour .timeline li .cour-panel{padding-top: 20px; padding-left: 120px; text-align: left;} .main-about .tabCour .timeline li .cour-panel p.label{font-size: 18px; color: #000;} .main-about .tabCour .timeline li .cour-panel p{color: #949494; line-height: 30px;} /*关于我们*/ .main-about .tabJob .content{ margin-top: 90px;} .main-about .tabJob .content:first-child{margin-top: 10px;} .main-about .tabJob .content .title-wrapper{text-align: center;} .main-about .tabJob .content p.title{font-size: 30px; line-height: 30px; text-align: center;font-weight: bold;margin-bottom: 10px;} .main-about .tabJob .content .title-sub{font-size: 10px; font-weight: bold;} .main-about .tabJob .content .title-img{width: 22px; height: 11px; margin-bottom: 50px;} .main-about .tabJob .content .img-wrapper{display: flex; align-items: center;} .main-about .tabJob .content .first{justify-content:flex-end;} .main-about .tabJob .content .second{justify-content:flex-start;} .main-about .tabJob .cont-area img{width: 354px; height: 197px; display: block;} .main-about .tabJob .txt-wrapper{text-align: center; font-size: 18px; color: #333; line-height: 24px; margin-top: 100px;} .main-about .tabJob .txt-wrapper .first{font-size: 30px; color: #D71144; margin-bottom: 30px;} .main-about .tabJob .focus-us-wrapper{background-color: #F4F4F4; padding: 50px 0 72px;} .main-about .tabJob .focus-wrapper .p-title{text-align: center; font-size: 24px; margin-bottom: 30px;} .main-about .tabJob .foc-tit-wrapper {font-size: 20px; color: #333;text-align: center; margin-bottom: 30px;} .main-about .tabJob .foc-tit-wrapper span{color: #D71144; margin-right: 10px;} .main-about .tabJob .focus-img{width: 156px; height: 156px;} .main-about .tabJob .focus-img img{ display: block; width: 100%; height: 100%;} .main-about .tabJob .ercode-wrapper{display: flex; align-items: center; justify-content: center; flex-direction: column;} .main-about .tabJob .map-wrapper .title-img{margin-bottom: 30px;} .main-about .tabJob .map-img-wrapper{width: 100%;} .main-about .tabJob .map-img-wrapper img{ width: 100%; height: auto; display: block;} /* 加盟 */ .banner.league{background: url(/res/static/img/nav_img5.png) no-repeat center top; background-size: cover;} /* 招贤纳士 */ .main-about .tabJion{padding-top:100px;} .main-about .tabJion .content{padding: 0 20px 40px 20px; border: 1px solid #e2e2e2; border-top: 4px solid #D71144; margin-top: 90px;} .main-about .tabJion .content:first-child{margin-top: 10px;} .main-about .tabJion .content p{font-size: 18px; line-height: 40px;display: flex; justify-content: space-between; color: #666;} .main-about .tabJion .content p .c33{color: #D71144;} .main-about .tabJion .content p .c99{color: #999;} .main-about .tabJion .content p.title{font-size: 24px; color: #545454; line-height: 60px;} .main-about .tabJion .content ol{padding-left: 20px; list-style-type: none; counter-reset: sectioncounter;} .main-about .tabJion .content ol li{color: #8d8d8d; font-size: 16px; line-height: 30px;} /* .main-about .tabJion .content ol li:before {content: counter(sectioncounter) "、"; counter-increment: sectioncounter;} */ /* 我要入驻 */ .banner.enter{background: url(/res/static/img/nav_img6.png) no-repeat center top; background-size: cover;} .banner.enter .title p{color: #FFF;} .main-about .layui-container .flow {min-width: 100%;display: flex;justify-content: center;align-items: center;margin-top: 40px;} .main-about .layui-container .flow .flow-title-box {width: 100%;display: flex;justify-content: flex-start;margin: 0 60px;} .main-about .layui-container .flow .flow-title-box .title {min-width: 100%;height: 47px;line-height: 47px;padding-left: 10px;background-color: #CCC;font-size: 20px;} .main-about .layui-container .flow .flow-title-box .triangle {border: 23px solid transparent;border-left: 23px solid #CCC;} .main-about .layui-container .flow .flow-title-box .title2 {background-color: rgb(3, 128, 167);color: #FFF;} .main-about .layui-container .flow .flow-title-box .triangle2 {border-left: 23px solid rgb(3, 128, 167);} .main-about .layui-container .form-box {padding-top: 50px;} .main-about .layui-container .form-box .form { padding-bottom: 2%; } .main-about .layui-container .form-box .form .content {min-width: 100%;display: flex;justify-content: center;align-items: center;} .main-about .layui-container .form-box .form #error {color: red;padding-left: 30%;font-size: 18px;} .main-about .layui-container .form-box .form .content .title {min-width: 10%;;text-align: right;font-size: 16px;font-weight: 700;padding-bottom: 10px;} .main-about .layui-container .form-box .form .content .title::before {content: "* ";line-height: 16px; color: red;font-size: 20px;} .main-about .layui-container .form-box .form .content input {padding: 12px 14px;font-size: 16px;min-width: 50%;border-radius: 5px;border: 1px solid #999;} .main-about .layui-container .form-box .form .content input::-webkit-inner-spin-button{-webkit-appearance: none !important;margin: 0;} .main-about .layui-container .form-box .form .content #target .iPicker-container .iPicker-result {border: 1px solid #999;border-radius: 5px;} .main-about .layui-container .form-box .form .content #target .iPicker-container .iPicker-input {border: 0;} .main-about .layui-container .form-box .form .content .id-front {min-width: 50%;} .main-about .layui-container .form-box .form .content .id-front input {min-width: 75%;} .main-about .layui-container .form-box .form .content .id-front button {padding: 10px 20px; background-color: #e74c3c;border: none;border-radius: 5px;margin-left: 18px;color: #FFF;} .main-about .layui-container .form-box .form .content .id-front button:active {background-color: rgb(240, 125, 125);} .main-about .layui-container .form-box .form .content .id-front button::before {content: "\e609";width: 10%;} .main-about .layui-container .submit-button {min-width: 30%; background-color: #e23201;border: none;padding: 10px 148px;border-radius: 5px;color: #FFF;font-size: 16px;display: flex;margin: 0 auto;} .main-about .layui-container .submit-button:active {background-color: #e05630;} /* 审核页 */ .main-about .layui-container .finish-box {min-width: 100%;height: 600px;border: 1px solid #CCC;border-radius: 5px;margin-top: 50px;display: flex;justify-content: center;align-items: center;font-size: 25px;font-weight: 800;color: rgb(223, 150, 15);background-color: #EEE;} /* 手机端 */ @media screen and (max-width: 480px){ .main-product{padding-top: 0; padding-bottom: 40px;} .main-service .content .content-right{padding: 10px 10px 0 10px;} .main-service .content .content-right p{line-height: 24px;} .main-news .content .news-panel p.read-push{font-size: 12px;} .main-case .content{padding-top: 60px;} .main-case .content p.lable{padding-top: 10px; font-size: 18px; line-height: 48px;} .main-case .content p{font-size: 12px; line-height: 20px; color: #505050;} .main-about ul.aboutab{padding: 70px 0;} .main-about ul.aboutab li{padding: 0 15px; font-size: 16px; box-sizing: border-box;} .main-about .tabIntro .content .img{width: 100%; margin-bottom: 10px;} .main-about .tabIntro .content .panel{width: 100%;margin-bottom: 10px;} .main-about .tabIntro .content .panel.p_block{display: none;} .main-about .tabIntro .p_hidden{display: block;} .main-news #newsPage .layui-laypage a,.main-news #newsPage .layui-laypage span ,.main-case #casePage .layui-laypage a,.main-case #casePage .layui-laypage span{padding: 0 12px; font-size: 14px; line-height: 30px; height: 30px; margin-right: 4px;} .main-about .tabJob .content .img-wrapper{justify-content: center;} .main-about .tabJob .txt-wrapper .first{font-size: 24px;} .main-newsdate .detail-content{padding: 100px 15px;} .main-league .content .right{margin-top: 20px; height: 400px;} .main-league .content .right .item{margin-bottom: 20px;} .main-league .content .right p.t{font-size: 24px; margin-bottom: 0px; line-height: 32px;} .main-league .content .right p{font-size: 16px;} .main-league .league-img-wrapper{margin-bottom: 40px;} .main-league .content .img-wrapper{padding-right: 0;} .main-league .content{margin-bottom: 40px;} .main-league .content .t-bot{height: 120px; font-size: 14px; line-height: 24px; } .main-league .content .title p.t{font-size: 20px;} .main-league .content .title p.t .t-img{width: 70px; height: 29px; background-size:70px 29px;} .main-league .content .pic-wrapper .txt-box{padding: 10px 30px;} .btn-wrapper{height: 40px; line-height: 40px; font-size: 14px;} .main-league .content .title{margin-bottom: 20px;} .main.product .content{padding: 20px 0;} .main.product .content .label{margin-top: 10px; font-size: 24px; line-height: 48px;} .main.product .content .detail{padding-bottom: 0;} .main-news{padding-top: 30px;} .main-league {margin-top: 30px;} .main-about .tabJion{ padding-top: 50px;} .main-about{padding-bottom: 50px;} .main-about .tabJion .content ol{padding-left: 0;} .main-about .tabJion .content{margin-top: 30px;} .main-product .shop-context-box {display: flex;justify-content: center;align-items: center;} .main-product .shop-box2{display: none !important;} .main-product .shop-box{width: 345px;padding:15px; display: flex;margin-top: 40px; flex-direction: column;background: #FFFFFF;box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.15);border-radius: 5px;} .main-product .shop-box .header-data-box{display: flex;justify-content: flex-start;align-items: center;} .main-product .shop-box .header-data-box .image{width: 45px;height: 45px;padding-right: 10px;} .main-product .shop-box .header-data-box .header-right-box{display: flex;flex-direction: column;justify-content: flex-start; line-height: 20px;} .main-product .shop-box .header-data-box .header-right-box .title-box{display: flex;justify-content: center;align-items: center;} .main-product .shop-box .header-data-box .header-right-box .title{font-size: 17px;font-weight: 500;margin-right: 10px;} .main-product .shop-box .header-data-box .header-right-box .phone-box {display: flex;justify-content: flex-start;align-items: center;} .main-product .shop-box .header-data-box .header-right-box .phone-box .phone{font-size: 14px;font-weight: 400;} .main-product .shop-box .header-data-box .header-right-box .phone-box .button-phone{font-size: 14px;font-weight: 400;margin-left: 5px;padding: 2px 5px; background: #D71144;font-weight: 400;border-radius: 5px;color: #FEFEFE;} .main-product .shop-box .address{font-size: 14px;padding-top: 8px; font-weight: 500;} .main-about .layui-container .flow{display: flex;justify-content: space-between;align-items: center;} .main-about .layui-container .flow .flow-title-box{display: flex;justify-content: flex-start;margin: 0 10px;} .main-about .layui-container .flow .flow-title-box .title {min-width: 100px;height: 35px;line-height: 35px;padding-left: 4px;background-color: #CCC;font-size: 12px;} .main-about .layui-container .flow .flow-title-box .triangle {border: 17px solid transparent;border-left: 17px solid #CCC;} .main-about .layui-container .flow .flow-title-box .triangle2 {border-left: 17px solid rgb(3, 128, 167);} .main-about .layui-container .flow .flow-title-box .title2 {background-color: rgb(3, 128, 167);color: #FFF;} .main-about .layui-container .form1 .form-group{display: flex;justify-content: center;align-items: center;} .main-about .layui-container .form1 .form-group .input-lg{width: 80%;} } /* 手机端与平板之间宽度 */ @media screen and (min-width: 480px) and (max-width: 768px) { .main-about .tabJob .content .img-wrapper{justify-content: center;} .main-newsdate .detail-content{padding: 100px 30px;} } /* 手机端与平板宽度 */ @media screen and (max-width: 750px) { #banner {height: 300px;} #banner .item{background: url(/res/static/img/sub_banner1.png) no-repeat center top; background-size: cover;} .banner{height: 200px;} .banner .title{padding-top: 100px;} .banner .title.active{padding-top: 60px; transition: 1.5s;} .main-news .content .news-img{width: 100%; margin-bottom: 20px;} .main-news .content .news-img img{max-width: 100%;} .main-news .content .news-panel p.detail{margin-bottom: 0px;} } /*小屏幕*/ @media screen and (min-width: 768px){ .nav{max-height: 80px;} .nav.index{background: rgba(255, 255, 255 ,1);} .nav .nav-list button{display: none;} .nav .layui-nav{width: auto; position: absolute; top: 0; padding: 0 5px; border-radius: 0; margin: 0;} .nav .layui-nav .layui-nav-item{display: inline-block; margin:0 45px; line-height: 80px;} .main-product p.title ,.main-service p.title{font-size: 36px; line-height: 216px;} .main.product .content .content-img{text-align: left;} .main-news .content .news-panel strong a{font-size: 20px; line-height: 30px;} .main-news .content .news-panel p.read-push{padding-top: 0; position: absolute; bottom: 30px;} .main-league .pushtime{line-height: 142px;} .main-case .content{width: 45%;} .main-case .content.even{margin-left: 9%;} .main-about ul.aboutab li{padding: 0 32px; font-size: 24px; margin-left: 30px; line-height: 50px;} .main-about .tabIntro .content p{padding: 0 30px; font-size: 18px; line-height: 30px;} .main-about .tabCour .timeline:before{left: 50%;} .main-about .tabCour .timeline li{min-height: 195px; padding-top: 95px;} .main-about .tabCour .timeline li .cour-img{left: 50%; margin-left: -97.5px; width: 195px;} .main-about .tabCour .timeline li .cour-panel{padding-top: 55px; padding-left: 0;} .main-about .tabCour .timeline li.odd .cour-panel{text-align: right;} .main-about .tabJion .content p{font-size: 24px; line-height: 50px; } .main-about .tabJion .content p.title{font-size: 30px; line-height: 90px;} .main-about .tabJion .content ol li{font-size: 20px; line-height: 60px;} } @media screen and (min-width: 768px) and (max-width: 992px){ .main.product .content div.right{padding-left: 20px;} .nav .layui-nav .layui-nav-item{margin:0 33px;} .main-service .content .content-right{padding: 10px 10px 0 15px;} .main-service .content .content-right span{margin-bottom: 20px;} .main-service .content .content-right p{line-height: 28px;} .main.product .content .label{line-height: 40px; margin-top: 0;} .main.product .content .detail{padding-bottom: 10px;} .main-about .tabJob .content .img-wrapper{justify-content: center;} } /*大屏幕*/ @media screen and (min-width: 992px){ .main.product .content{padding: 100px 0;} .main.product .content div.right{padding-left: 0;} .main-news .content .news-img{width: 20%;} .main-news .content .news-panel{width: 80%;} .main-case .content{width: 31%;} .main-case .content.even{margin-left: 0;} .main-case .content.center{margin-right: 3%; margin-left: 3%;} .main-about .tabIntro .content p{padding: 0 50px; font-size: 20px; line-height: 40px;} } /*超大屏幕*/ @media screen and (min-width: 1200px) { .main-news .content .news-img{width: 35%;} .main-news .content .news-panel{width: 64%;} .main-news .content:nth-child(odd){padding-right: 20px;} .main-news .content:nth-child(even){padding-left: 20px;} .main-about .tabCour .timeline li .cour-panel{padding-left: 50px;} .main-about .tabCour .timeline li.odd .cour-panel{padding-left: 0; padding-right: 50px;} } @media screen and (min-width: 1300px) { .nav .layui-container {width: 1300px;} .layui-container{width: 1200px; padding: 0;} .nav .nav-logo{position: absolute; top: 0; left: 0;} .layui-col-space80{margin: -40px;} .layui-col-space80>*{padding: 40px;} } @font-face { font-family: "iconfont"; /* Project id 2600462 */ src: url('//at.alicdn.com/t/font_2600462_47ni9lj4685.woff2?t=1623988813023') format('woff2'), url('//at.alicdn.com/t/font_2600462_47ni9lj4685.woff?t=1623988813023') format('woff'), url('//at.alicdn.com/t/font_2600462_47ni9lj4685.ttf?t=1623988813023') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .toast { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 999; pointer-events: none; display: none; } .toast.show { display: flex; justify-content: center; align-items: center; } .toast .toast_con { border-radius: 0.1rem; background-color: rgba(0, 0, 0, 0.7); padding: 0.2rem 0.3rem; color: #fff; font-size: 14px; display: block; max-width: 90%; } .user-section { background: #fff; padding: 15px; margin-bottom: 20px; -webkit-border-radius: 4px; -webkit-background-clip: padding-box; -moz-border-radius: 4px; -moz-background-clip: padding; border-radius: 4px; background-clip: padding-box; } .login-section { margin: 50px auto; width: 460px; -webkit-border-radius: 0; -webkit-background-clip: padding-box; -moz-border-radius: 0; -moz-background-clip: padding; border-radius: 0; background-clip: padding-box; } .login-section.login-section-weixin { min-height: 315px; } .login-section .logon-tab { margin: -15px -15px 0 -15px; } .login-section .logon-tab > a { display: block; padding: 20px; float: left; width: 50%; font-size: 16px; text-align: center; color: #616161; background-color: #ececec; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .login-section .logon-tab > a:hover { background-color: #fafafa; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .login-section .logon-tab > a.active { background-color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .login-section .login-main { padding: 40px 45px 20px 45px; } .login-section .control-label { font-size: 13px; } .controls .input-group { display: flex; align-items: center; } .controls .input-group .input-group-addon { border: none; background: none; } .login-section .n-bootstrap .input-group { position: inherit; } .controls { margin-bottom: 15px; } .controls #target .iPicker-result { height: 42px !important; border-radius: 5px !important; width: 430px !important; } .login-section .n-bootstrap .n-right { margin-top: 0; top: 0; position: absolute; left: 0; text-align: right; width: 100%; } main.content { width: 100%; overflow: auto; padding: 15px; padding-top: 20px; min-height: calc(100vh - 125px); } .sidenav { padding: 20px 0 10px 0; margin-bottom: 20px; background-color: #fff; } .sidenav .list-group:last-child { margin-bottom: 0; } .sidenav .list-group .list-group-heading { list-style-type: none; color: #919191; margin-bottom: 10px; margin-left: 35px; font-size: 14px; } .sidenav .list-group .list-group-item { -webkit-border-radius: 0; -webkit-background-clip: padding-box; -moz-border-radius: 0; -moz-background-clip: padding; border-radius: 0; background-clip: padding-box; border: none; padding: 0; border-left: 2px solid transparent; } .sidenav .list-group .list-group-item:last-child, .sidenav .list-group .list-group-item:first-child { -webkit-border-radius: 0; -webkit-background-clip: padding-box; -moz-border-radius: 0; -moz-background-clip: padding; border-radius: 0; background-clip: padding-box; } .sidenav .list-group .list-group-item:hover { border-left: 2px solid rgba(245, 245, 245, 0.38); background-color: rgba(245, 245, 245, 0.38); } .sidenav .list-group .list-group-item > a { display: block; color: #616161; padding: 10px 15px 10px 35px; } .sidenav .list-group .list-group-item.active { border-left: 2px solid #46c37b; background-color: rgba(245, 245, 245, 0.38); } .sidenav .list-group .list-group-item.active > a { color: #46c37b; } .nav li .avatar-text, .nav li .avatar-img { height: 30px; width: 30px; line-height: 30px; font-size: 14px; } .nav li .avatar-img { font-size: 0; } .nav li .avatar-img img { border-radius: 30px; width: 30px; height: 30px; } .avatar-text, .avatar-img { display: inline-block; box-sizing: content-box; color: #fff; text-align: center; vertical-align: top; background-color: #e8ecf3; font-weight: normal; width: 48px; height: 48px; border-radius: 48px; font-size: 24px; line-height: 48px; } .avatar-img { font-size: 0; } .avatar-img img { border-radius: 48px; width: 48px; height: 48px; } @media (max-width: 767px) { main.content { position: inherit; padding: 15px 0; } .login-section { width: 100%; margin: 20px auto; } .login-section .login-main { padding: 20px 0 0 0; } footer.footer { position: inherit; } footer.footer .copyright { padding: 10px; line-height: 30px; } } .pager .pagination { margin: 0; } .pager li { margin: 0 .4em; display: inline-block; } .pager li:first-child > a, .pager li:last-child > a, .pager li:first-child > span, .pager li:last-child > span { padding: .5em 1.2em; } .pager li > a, .pager li > span { background: none; border: 1px solid #e6e6e6; border-radius: 0.25em; padding: .5em .93em; font-size: 14px; } .jumpto input { height: 31px; width: 50px; margin-left: 5px; margin-right: 5px; text-align: center; display: inline-block; }