html,body{ font-size: 16px; color: #525252; width: 100vw; min-height: 100vh; overflow-x: hidden;  background-color: #f2f2f2; font-family: "Microsoft Yahei", "微软雅黑", "Source Han Sans CN" }
body.index{background-color: #fff; }
.layui-layer-content img{ max-width: 100%;}
.line10_block{ width:100%; height:10%;}
.margin_top10{margin-top: 10%;}
.max_img{ max-width: 100%;}
.img-fit{width: 100%; height: 100%; object-fit: cover;}
.text-center{ text-align: center}
.text-align-right{ text-align: right;}
.text-red{ color: red;}
.red{ color: red;}
.margin_left15{margin-left: 15px;}
.line-height-2{ line-height: 2;}
.margin-top-10px{ margin-top: 10px;}
.margin-top-20px{ margin-top: 20px;}
.margin-top-25px{ margin-top: 25px;}
.margin-top-60px{ margin-top: 60px;}
.margin-top-70px{ margin-top: 70px;}
.padding-top-60px{ padding-top: 60px;}
.margin-top-120px{ margin-top: 120px;}
.margin-bottom-70px{ margin-bottom: 70px;}
.margin-bottom-20px{ margin-bottom: 20px;}
.position-fixed{position: fixed;}
.position-relative{ position: relative;}
.padding-top-bottom-60{ padding-top: 60px; padding-bottom: 60px;}
.padding-left-right-0{padding-left: 0 !important; padding-right: 0 !important;}
.bg-color-f2fbfe{ background-color: #f2fbfe}
.float_left{ float: left;}
.layui-btn {background-color: #2250ff;}
.layui-fixbar{bottom: 60px}
.text-color-blue{ color: #2250FF;}
.border-e6e6e6-solid{border: 1px #e6e6e6 solid;}
.padding-10px{padding: 10px}
.padding-20px{padding: 20px}
.breadcrumb{ margin: 20px 0 0;}
.text-overflow {overflow: hidden; text-overflow: ellipsis; display: -webkit-box;  -webkit-box-orient: vertical;}
.block-title{ font-size: 36px; color: #333430; text-align: center}

.title-block{margin-bottom: 70px; color: #333430;}
.title-block h1{ font-size: 36px;}
.title-block p{ font-size: 24px; text-transform: capitalize;}
.title-block p:after{ display:block; height: 2px; background-color: #2874FF; content: ' '; width: 60px; margin: 5px auto 0;}

/*banner*/
.none-index-banner{ display: block; text-align: center; background-color: #257cff;}
.none-index-banner img{ max-width:100%; margin-top: 65px;}

nav.layui-fluid{ position: fixed; padding-top: 10px; padding-bottom: 10px; top: 0; width: 100%; z-index: 999; background-color: #F2FBFE; box-sizing: border-box; border-bottom: 1px #E7E8EA solid; transition:all 1s ease-out;}
nav.layui-fluid:hover{background-color:#D1F4FF}
nav.layui-fluid .layui-nav{ background: none; text-align: right;}
nav.layui-fluid .layui-nav .layui-nav-item{ line-height: normal; margin-left: 25px;}
nav.layui-fluid .layui-nav .layui-nav-item a{font-size: 18px;  color: #000; margin: 8px 0;}
nav.layui-fluid .layui-nav .layui-this::after,nav.layui-fluid  .layui-nav-bar,nav.layui-fluid  .layui-nav-tree .layui-nav-itemed::after{ background-color: #2250FF}
nav.layui-fluid .layui-nav .layui-nav-item .layui-nav-child{ top:40px;border: 1px solid #393D49; background-color: #393D49;}
nav.layui-fluid .layui-nav .layui-nav-item .layui-nav-child a:hover{ background-color: #1E9FFF;}

nav.layui-fluid .header_menu{ text-align: right;}
nav.layui-fluid .header_menu .menu_img{ width:35px; height:40px; padding:0; cursor: pointer;}
nav.layui-fluid .header_menu .menu_img .st0{fill:#000;}
nav.layui-fluid .header_logo img{  height: auto;}

nav.layui-fluid .header_fixed{position: fixed; left: 0; top: 0; z-index: 9999;}
nav.layui-fluid .header_fixed .layui-fluid{ padding: 0;}

nav.layui-fluid .menu_fixed{ position: fixed; z-index: 999; width: 100%; left: 0; height: 0; overflow: hidden; background-color: #F2FBFE;}
nav.layui-fluid .menu_fixed .nav_line{ width: 100%; clear: both;}
nav.layui-fluid .menu_fixed .nav_line ul li{ display: none; padding-right: 3.142rem; float: left; }
nav.layui-fluid .menu_fixed .nav_line ul li:first-child{padding-right: 9rem; display: block;}
nav.layui-fluid .menu_fixed .nav_line ul li:after{ display: block; content: ' '; clear: both;}
nav.layui-fluid .menu_fixed .nav_line ul li a{ font-weight: bold; font-size: 18px;}
nav.layui-fluid .menu_fixed .nav_line ul li a:hover{ color: #666;}
.layui-fixbar li.layui-icon{ font-size: 30px !important;}

.main-content{ min-height: 75vh;}

.content-block-title h1{ padding-bottom: 20px; width: 70%; border-bottom: 1px #e6e6e6 solid; margin: 0 auto; text-align: center;}
.content-block-title h1 span{color: #2250FF; text-transform:capitalize; padding-right: 10px;}
.content-block-title .info{ color: #808080; text-align: center; margin: 20px 0 50px; font-size: 16px; line-height: 2;}
.content-block-left-title h1 span{color: #2250FF; text-transform:capitalize; padding-right: 10px;}
.striping {width: 1.2%; height: 3px; background-color: #333; margin: 50px 0;}

.content-form .layui-form .layui-form-item{ width: 40%; margin: 20px auto;}
.content-form .layui-form .layui-input-block{margin: 10px 0; box-sizing: border-box; width: 40%; float: left;}
.content-form .layui-form .layui-input-block:nth-child(2n+2){ padding-left: 10%; width: 50%;}
.content-form .layui-form .layui-input-block:last-child{clear: both; padding: 0; width: 90%;}
.content-form .layui-form .layui-btn{ background-color: #2250ff;}
.content-form .layui-form h1{ margin-top: 20px;}

footer.layui-fluid{ padding-top:20px; padding-bottom: 20px; text-align: center; line-height: 2;}


{/*项目案例模块*/}
.index-case-block .index-case-item{position: relative;box-sizing: border-box; margin-bottom: 20px; text-align: center; max-height: 500px; overflow: hidden;}
.index-case-block .index-case-item .recommend_title{ font-size: 18px; position: absolute; left: 0; bottom: 35%; padding: 0; width: 100%; text-align: center; line-height: 26px; overflow: hidden;}
.index-case-block .index-case-item .recommend_title figcaption{font-weight:400; opacity: 0; -webkit-transform:translateY(100%); transform:translateY(100%);}
.index-case-block .index-case-item a::before{ width: 300px; height: 1px; }
.index-case-block .index-case-item a::after{height: 300px; width: 1px;}
.index-case-block .index-case-item a::before,.index-case-block .index-case-item a::after{content: ''; background-color: #000; position: absolute; z-index: 1; top: 50%; left: 50%; opacity:0; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);  -webkit-transition: all 0.4s ease; transition:all 0.4s ease;  }
.index-case-block .index-case-item a:hover::before{ width: 50px;}
.index-case-block .index-case-item a:hover::after{ height: 50px;}
.index-case-block .index-case-item a:hover::before,.index-case-block .index-case-item a:hover::after{opacity:1;}
.index-case-block .index-case-item img{ object-fit:cover; max-width: 100%; box-shadow:2px 2px 4px #595f6d; -webkit-transition: all 0.4s ease; transition:all 0.4s ease;}
.index-case-block .index-case-item:hover  img{filter:alpha(opacity=85); -webkit-opacity:0.65; opacity:0.65;  transform: scale(1.1);}
.index-case-block .index-case-item:hover .recommend_title figcaption{-webkit-transform:translateY(0%); transform:translateY(0%); opacity:1;}


/*项目案例列表页面*/
.case-block{ display: flex; justify-content: space-around; flex-wrap: wrap; align-content: space-between;}
.case-block .case-item{position: relative;box-sizing: border-box;}
.case-block .case-item .recommend_title{ font-size: 18px; position: absolute; left: 0; bottom: 35%; padding: 0; width: 100%; text-align: center; line-height: 26px; overflow: hidden;}
.case-block .case-item .recommend_title figcaption{font-weight:400; opacity: 0; -webkit-transform:translateY(100%); transform:translateY(100%);}
.case-block .case-item a::before{ width: 300px; height: 1px; }
.case-block .case-item a::after{height: 300px; width: 1px;}
.case-block .case-item a::before,.case-block .case-item a::after{content: ''; background-color: #000; position: absolute; z-index: 1; top: 50%; left: 50%; opacity:0; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);  -webkit-transition: all 0.4s ease; transition:all 0.4s ease;  }
.case-block .case-item a:hover::before{ width: 50px;}
.case-block .case-item a:hover::after{ height: 50px;}
.case-block .case-item a:hover::before,.case-block .case-item a:hover::after{opacity:1;}
.case-block .case-item img{ object-fit:cover; width: 375px; box-shadow:2px 2px 4px #595f6d; -webkit-transition: all 0.4s ease; transition:all 0.4s ease;}
.case-block .case-item:hover  img{filter:alpha(opacity=65); -webkit-opacity:0.65; opacity:0.65;  transform: scale(1.05);}
.case-block .case-item:hover .recommend_title figcaption{-webkit-transform:translateY(0%); transform:translateY(0%); opacity:1;}

{/*新闻列表*/}
.news-list .card::before{content: ''; display: block; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: #2250FF;}
.news-list .card{ display:block; position: relative; width: 100%; border-top: 1px solid #e6e6e6; padding: 20px 0 0;}
.news-list .card:hover::before{ width: 100%; transition: width .5s;}
.news-list .card .list-title{ width: 100%; height: 36px; line-height: 1.5; font-size: 24px; margin-bottom: 20px;}
.news-list .card:hover .list-title{color: #2250FF}
.news-list .card .list-des{ line-height: 2; -webkit-line-clamp: 2;}

{/*客户列表*/}
.culture{ line-height: 2}
.client .item{ margin: 5px 0;}
.client .item .img_box{ width: 95%; background: #fff; box-shadow: 0 0 16px 0 rgba(0,0,0,.14);}
.client .item .img_box:hover{transform: scale(1.05);}
.client .item img{ max-width: 100%; width: 100px; display: block; margin: 0 auto;}
.client .item p{line-height: 2.5; text-align: center; letter-spacing:3px; height: 36px; padding: 0 5px; width: 100%; box-sizing: border-box; overflow: hidden;}
.client:after{ content: ' '; display: block; clear: both;}

{/*标题*/}
.index_block_title{ margin-bottom: 70px; color: #333430;}
.index_block_title h2{ font-size: 26px;}
.index_block_title p{ font-size: 18px; text-transform: capitalize;}
.index_block_title p:after{ display:block; height: 2px; background-color: #2874FF; content: ' '; width: 60px; margin: 5px auto 0;}

{/* 选择公司 */}
.choose{ position: relative;}
.choose img{ width: 60px;  display: inline-block; margin:0 10px 0 30%;}
.choose .info{ display: inline-block; line-height: 2; vertical-align: top; vertical-align: middle;}
.choose .info b{ border-top: 1px #F2FBFE solid; font-size: 24px;}

{/* 选择我们的好处 */}
.advantage-block .be-card { margin: 0 auto; width: 269px; max-width: 100%; height: 304px; background: #fff; border-radius: 10px; padding: 24px 14px; position: relative;}
.advantage-block .pie{ width: 150px; height: 150px; margin: 40px auto 0;}
.advantage-block .be-cardtitle {font-size: 24px; font-weight: 500; color: #5E5E5E; text-align: center; padding-bottom: 20px; border-bottom: 1px solid #C7C7C7;}
.advantage-block .icon-ok {display: inline-flex; width: 30px; height: 30px; vertical-align: middle; background: url("/static/images/ok.png") no-repeat;}
.advantage-block .pie-con {position: absolute; top: 150px; left: 50%; transform: translate(-50%); color: #5E5E5E; font-size: 14px; text-align: center;}
.advantage-block .pie-con i {display: inline-block; font-size: 20px !important; color: #2874FF; padding-bottom: 5px;}

{/* 和其它公司区别 */}
.difference{ position: relative; border-radius:10px; text-align: center; padding: 70px 0;}
.difference i{position: absolute; display: inline-block; width: 184px; height: 147px; left: -9px; top: -9px;background-repeat: no-repeat;}
.difference i.kp{background-image: url('/static/images/icon-kp.png'); }
.difference i.risk{background-image: url('/static/images/icon-risk.png');}
.difference h3{font-size: 50px; margin-bottom: 20px; font-weight: bold; color: #fff;}
.difference ul{padding-left:  44px;}
.difference li {background: #3294e0; color: white; margin-bottom: 15px; width: 417px; height: 42px; line-height: 42px; padding-left: 26px; border-radius: 40px; font-size: 18px; font-weight: 700; text-align: left;}
.advantage_us{ background-color: #2874FF; }
.other_companies{background-color: #F2FBFE;}
.other_companies h3{ color: #333;}
.other_companies li{ color: #333; background-color: #dedede;}

/*分页*/
.xblock:before,.xblock:after{ display: block; content: ''; width:100%; clear:both;}
.xblock{ margin: 20px auto;}
.pagination { width:100%; text-align: center;}
.pagination li {display: inline-block; padding: 5px;border: 1px solid #e2e2e2;min-width: 20px;}
.pagination li.active {background: #2250FF;color: #fff;border: 1px solid #2250FF; margin-left:4px;}
.pagination li:nth-child(2).active {margin:0 4px 0 0;}
.pagination li a {display: block;text-align: center;}

.xblock-render{ height:38px; line-height:26px;}
.xblock-render .pagination li{min-width: 26px;}

@keyframes scaleDraw {
    0% {
        transform:scale(1);
    }

    25% {
        transform:scale(1.1);
    }

    50% {
        transform:scale(1);
    }

    75% {
        transform:scale(1.1);
    }
}

@keyframes fadeIn {
    0% {
        opacity:0
    }
    10% {
        opacity:0.1
    }
    20% {
        opacity:0.2
    }
    100% {
        opacity:1
    }
}
@keyframes fadeInup {
    0% {
        transform: translate3d(0, 0, 0)
    }
    50% {
        transform: translate3d(0, -20%, 0)
    }
    100% {
        transform: translate3d(0, 0, 0)
    }
}
.fadeIn{-webkit-animation: fadeIn 1s;	animation: fadeIn 1s;	transition: opacity 1s ease;}

@media screen and (max-width: 1600px) and (min-width: 1200px){
    /*项目案例*/
    .case-block .case-item img{ width: 280px;}
    {/* 选择公司 */}
    .choose img{ margin-left: 25%;}
}
@media screen and (min-width: 1200px){
    .none-index-banner img{margin-top: 62px;}
    .layui-fluid{ padding-left:50px; padding-right: 50px;}
}

@media screen and (max-width: 1024px){
    .client .item{ margin:5px 0;}
    .client h1{ width: 100%;}
}

@media screen and (max-width: 1024px) and (min-width: 1000px){
    /*项目案例*/
    .case-block .case-item img{ width: 220px;}
}

@media screen and (max-width: 1024px) and (min-width: 768px){

    nav.layui-fluid .header_menu .menu_img #cock{fill:#393D49}

    .layui-nav-tree{ width: 40%; overflow: hidden; display: block; margin: 0 auto;}
    /*nav.layui-fluid .menu_fixed .nav_line:first-child{ margin-top: 100px;}*/
    nav.layui-fluid .menu_fixed .nav_line ul li{ margin: 0;}
    nav.layui-fluid .layui-nav .layui-nav-item{ margin-left: 0; text-align: center;}
    .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover{ background:none;}
    .layui-nav-tree .layui-nav-item a:hover{ background: none;}

    /*项目案例*/
    .case-block{ height: 1050px;}
    .case-block .case-item img{ width: 280px;}

    {/* 选择公司 */}
    .choose img{ margin-left: 5%;}
    .choose .info{ width: 60%;}

    {/* 和其它公司区别 */}
    .difference h3{font-size: 30px;}
    .difference li{ width: 260px; font-size: 12px;}
    .difference i{background-size: 60%; left: -3px; top: -3px;}

    #customerServerTip{ width: auto !important; background: none !important; top: auto !important; bottom: 10px;}
}

@media screen and (max-width: 768px){
    html,body{ font-size: 14px;}
    .none-index-banner img{margin-top: 65px;}
    .layui-nav-tree{ width: 140px; overflow: hidden; display: block; margin: 0 auto;}
    /*nav.layui-fluid .menu_fixed .nav_line:first-child{ margin-top: 100px;}*/
    nav.layui-fluid .menu_fixed .nav_line ul li{ margin: 0;}
    nav.layui-fluid .layui-nav .layui-nav-item{ margin-left: 0; text-align: center;}
    .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover{ background:none;}
    .striping{ width: 5%}
    .map{ max-width: 100%; max-height: 300px; margin-bottom: 30px;}
    .layui-form .layui-form-item{ width: 100%;}
    .block-title{ font-size: 26px;}
    .padding-top-bottom-60{ padding-top:30px; padding-bottom:30px;}
    .padding-top-60px{padding-top: 30px;}
    .margin-top-60px{ margin-top: 30px;}
    .xs-margin-top-0{ margin-top:0}
    .title-block{margin-bottom: 30px;}
    .title-block h1{ font-size: 18px; font-weight: bold;}
    .title-block p{ font-size: 16px;}

    .content-block-title h1 span{ display: block;}
    .content-form .layui-form .layui-input-block{ }
    .content-form .layui-form .layui-input-block:nth-child(2n+1){ padding-left:10%;}
    .content-form .layui-form .layui-form-item{ width: 90%; margin: 20px auto;}

    #customerServerTip{ width: auto !important; background: none !important; top: auto !important; bottom: 10px;}

    {/*项目案例模块*/}
    .index-case-block .index-case-item{ max-height:300px;}

    {/*项目案例页面*/}
    .case-block{ height: 520px;}
    .case-block .case-item img{ width: 140px;}

    {/*标题*/}
    .index_block_title{ margin-bottom: 30px;}
    .index_block_title h2{ font-size: 20px; font-weight: bold}

    {/* 选择公司 */}
    .choose img{ margin-left: 0;}
    .choose .info{ width: 64%;}

    {/* 区别 */}
    .difference{ padding:30px 0;}
    .difference h3{font-size: 30px;}
    .difference ul{ padding-left: 0;}
    .difference li{ width: 260px; font-size: 12px; padding-left: 10px; margin: 0 auto 15px;}
    .difference i{background-size: 60%; left: -3px; top: -3px;}


    .news-list .card .list-title{ font-size: 16px; height: auto; margin-bottom: 10px; }
    .news-list .card .list-des{ font-size: 14px; -webkit-line-clamp: 3}
}