﻿
/*banner*/
.banner{ height:450px; width: 100%; margin-top:100px;}
.banner .wrapper-img {width:100%; height:100%; display:block;background-position: center center; background-repeat: no-repeat; background-size: auto 100%;}
.banner .container {margin: 0 auto !important; position: relative;}
.banner .image-show { position: absolute; right: 0; top: 10px; z-index: 90;    height: 100%; }
.banner .text-info{position:absolute; top:100px; left: 20px; z-index:100; width:50%; color:#fff!important; text-align: left;}
.banner .title{ margin-bottom:20px; font-weight:500; font-size:42px; line-height: 42px;}
.banner .sub-title{padding:10px 0; font-weight:500; font-size:16px; line-height:28px; color: rgba(255,255,255,0.8);}
.banner .btn-container{margin-left:1px; padding-top:20px; display: inline-block;}
.btn-container a{ display: inline-block; margin:0 auto; height: 46px; line-height: 46px; width:150px; border:1px solid #fff; border-radius:5px; color:#fff;text-align:center;text-decoration:none; font-size:18px}
.btn-container a+a { margin-left:15px;}
a.free-trial {border: 1px solid #008cd6; background: #008cd6;}
a.free-trial:hover { background: #0077b6;}
a.reservation:hover{ background: hsla(0,0%,100%,.1);}


.recommended{width: 100%; background: #f5f5f6;}
.recommended-ul{overflow: hidden; width: 1200px; margin: 0 auto; padding: 28px 0;}
.recommended-ul li{float: left; width: 25%; border-left: 1px solid #DDDDDD; box-sizing: border-box; text-align: center;}
.recommended-ul li:first-child{border: none;}
.recommended-brand-box{position: relative; display: inline-block; width: 65px; vertical-align: top; margin-right: 20px;}
.recommended-brand-box{width: 68px; height: 69px;}
.recommended-brand-box .recommended-icon{left: 5px; width: 68px; height: 69px; display: block;}
.recommended-ul .recommended-introduce{vertical-align: middle; display: inline-block; width: 185px; min-height: 65px; font-size: 12px; text-align: left;}
.content-region-title { border-bottom: 1px solid #D8D8D8; position: relative; margin-bottom: 50px; font-weight: 500;}
.content-region-title:after{position: absolute; bottom: -2.5px; left: 50%; transform: translateX(-50%); content: ""; width: 98px; height: 5px; background: #206bd1;}
.recommended-introduce h3 {font-size:16px; font-weight: 700; line-height: 18px; margin: 0 0 10px;}
.recommended-introduce p { color: #666; }
.content-region-sub-title {color: #9B9B9B; font-size: 16px; font-weight: 500;}




.solution_zjyFun .item{ position: relative;margin:5px 0; width:100%; padding-top:40px;margin-bottom:20px;background: #fff; height:320px;padding:10px 20px;}
.solution_zjyFun .item p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:5;overflow: hidden; text-align: center; background: no-repeat top center;padding-top:110px;}
.solution_zjyFun .item p strong { font-size:18px;}
.solution_zjyFun .item:hover{background: #fff; border-color:#fff; transform: scale(1.05); -webkit-transform: scale(1.05);z-index:10; -webkit-box-shadow:0 0 15px rgba(0, 0, 0, .1);   -moz-box-shadow:0 0 15px rgba(0, 0, 0, .1);  box-shadow:0 0 15px rgba(0, 0, 0, .1); }
.solution_zjyFun .item strong{font-size:1.1em;}
.solution_zjyAdv .item{ position: relative; margin:5px 0; width:100%; padding-top:40px; margin-bottom:20px; padding:10px 20px 10px 15px; background: rgba(255,255,255,0.1) no-repeat left center;}
.solution_zjyAdv .item:hover { transform: scale(1.05); -webkit-transform: scale(1.05);z-index:10; -webkit-box-shadow:0 0 15px rgba(0, 0, 0, .1);   -moz-box-shadow:0 0 15px rgba(0, 0, 0, .1);  box-shadow:0 0 15px rgba(0, 0, 0, .1);}
.solution_zjyAdv .item p{background: no-repeat top left; padding-left:120px; height: 100%; color:#fff;}
.solution_zjyAdv .item p strong { font-size:18px;}

@media (min-width:1200px){/*大屏幕*/
.container{width:1200px;}
}
@media (max-width:992px)/*平板*/
{
.container{width: 100%}
body{ overflow-x:hidden; }
.solution_zjyFun .item {height: auto;}
}

@media (max-width:767px){/*手机*/
.banner { background-color:#18223c; height: 510px;}
.banner .image-show { top:0;}
.banner .image-show img{ max-width: 85%; margin-left:30px;}
.banner .text-info { top: 310px; text-align: center; width:90%;}
.banner .title { font-size: 28px; line-height: 24px; margin-bottom: 0;}
.banner .sub-title { font-size: 14px; line-height:24px;}
.btn-container a { font-size: 12px; height: 28px; line-height: 28px; width: 80px;}
.banner .btn-container { padding-top:10px;}
.solution_content img{max-width: 80%;}
.solution_zjyFun .item {height: auto;}
.recommended-ul{width: 100%; }
.recommended-ul li{width: 50%; border-left:0; padding:10px 20px;}
.recommended-ul .recommended-introduce {width: 100%; text-align:center;}
}














