/* 横幅 */
#banner{
	position: relative;
	overflow: hidden;
}
#banner .img{
	display:block;
	margin:0 auto;
    width: 100%;
}
.banner-pagination-center{
	text-align:center;
	position: absolute;
    bottom: 30px;
	width:100%;
	z-index:10;
}
#banner .banner-pagination .swiper-pagination-bullet {
    border-radius: 0;
    opacity: 1;
    margin: 0 5px;
	border-radius:0;
	height: 11px;
    width:11px;
	border-radius:11px;
    background-color: #fff;
    opacity: 0.9;
	-webkit-transition: all .3s;-moz-transition: all .3s;-o-transition: all .3s;transition: all .3s;
}
#banner .banner-pagination .swiper-pagination-bullet-active{
    opacity:1;
	background:#3399fe;
    width:25px;
}

.trait{
    position: relative;
    margin-top:-30px;
    z-index: 9;
    height: 0px;
}
.trait .item{
    height: 60px;
    padding:10px;
    border:2px solid #fff;
    box-shadow: 0 0 16px #1e457314;
    border-radius: 10px;
    background:#fff url(img/bg.png) center center;
    background-size: cover;
    display: flex;
    align-items: center;
    font-size:22px;
    font-weight: 700;
    color:#164799;
}
.trait .item .iconfont{
    color:#3399fe;
    font-size:36px;
    margin-right: 10px;
    font-weight: 500;
}


.public_title{
    text-align: center;
}
.public_title .t1{
    text-align: center;
    font-size:28px;
    font-weight: 700;
    color:#333;
    margin-bottom: 5px;
}
.public_title .t1 .strong{
    color:#3399fe;
    
}
.public_title .t2{
    font-size: 16px;
    color: #595959;
}

#model{
    padding:60px 0;
}
#model .public_title{
    margin-bottom: 30px;;
}
#model .item{
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 16px #1e457314;
    padding: 24px;
    border: 1px solid #E5EFFF;
}
#model .item .top{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E5EFFF;
    width:100%;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
#model .item .top .icon{
    height: 40px;
    width:40px;
    background-color:#00d273 ;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    border-radius: 5px;
    margin-right: 10px;
}
#model .item .top .icon .iconfont{
    font-size:22px;
}
#model .item .top .name{
    font-size: 20px;
    font-weight: 600;
    color: #242933;
}
#model .item .main{
    color: #595959;
    line-height: 22px
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

#base{
    padding:50px 0;
    
    background-color: #f7f9fe;
}
#base .public_title{
    margin-bottom: 30px;;
}
#base .item{
    display: flex;
    align-items: center;
    box-shadow: 0 0 16px #1e457314;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 16px #1e457314;
    background-color: #fff;
    border: 1px solid #E5EFFF;
}
#base .item .icon{
    height: 45px;
    width:45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
#base .item .icon img{
    display: block;
    max-width: 45px;
    max-height: 45px;
}
#base .item .name{
    font-size:18px;
}


#about{
    padding:60px 0;
}
#about .public_title{
    margin-bottom: 30px;;
}
#about .main{
    font-size:16px;
    line-height: 24px;
    text-align: center;
}

#service{
    padding:150px 5px 60px 5px;
    background-color: #f7f9fe;
}
#service .public_title{
    margin-bottom: 30px;;
}
#service .item{
    background-color: #12b7f5;
    border-radius: 4px;
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:20px;
    transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out;
    position: relative;
    z-index: 98;
    cursor: pointer;
}
#service .item:hover{
    transform:scale(1.1); 
    z-index: 99;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#service .item.i2{
    background-color: #ee685d;
}
#service .item.i3{
    background-color: #33cc99;
}

#service .item  .top{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#service .item .name{
    font-size:20px;
    margin-bottom: 10px;
}
#service .item  .icon{
    border:2px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;  
    display: block;
}
#service .item .des{
    width:100%;
    font-size:16px;
    line-height: 24px;
    text-align: center;
    opacity: 0.9;
    border-top:1px solid rgba(255, 255, 255, 0.3);
    padding-top:10px;
}


#exmple{
    padding:60px 5px;
    background: url(img/bg2.png)no-repeat center center;
    overflow: hidden;
    background-size: cover;
}
#exmple .public_title{
    margin-bottom: 30px;;
}
#exmple .list{
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
}
#exmple .item{
    width:20%;
    overflow: hidden;
}
#exmple .item .content{
    margin:6px;
    position: relative;
    overflow: hidden;
}
#exmple .list .item .content:hover .text{
    opacity: 1;
    transform:scale(1); 
}
#exmple .list .item .content:hover img{
    transform:scale(1.1); 
}
#exmple .item .imgbox img{
    display: block;
    width: 100%;
    transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out;
}
#exmple .list .text{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    transform:scale(0.5); 
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out;
}
#exmple .list .text .name{
    color:#fff;
    font-size:20px;
}
#exmple .list .text .icon{
    width:50px;
    height: 50px;
    border-radius: 50%;
    background-color:#3399fe;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
#exmple .list .text .icon .iconfont{
    color:#fff;
    font-size:24px;
}
#exmple .more{
    display: flex;
    justify-content: center;
}
#exmple .more a{
    display: block;
    border:1px solid rgba(0, 0, 0, 0.3);
    padding:12px 25px;
    color:#666;
    transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out;
}
#exmple .more a:hover{
    background-color: #3399fe;
    border-color: #3399fe;
    color:#fff;
    padding:12px 30px;
}


#article{
    padding:60px 0;
}
#article .public_title{
    margin-bottom: 30px;;
}
#article .list{
    border:1px solid #EDEFF2;
    border-radius: 16px;
    overflow: hidden;
}
#article .list .item{
    border-right:1px solid #EDEFF2;
    padding:20px 20px 40px 20px;
}
#article .list:last-child{
    border-right: none;
}
#article .item{
    position: relative;
    overflow: hidden;
}
#article .item .title .t1{
    font-size:20px;
    font-weight: 600;
}
#article .item .title .t2{
    padding:30px 0;
    color: #262626;
    font-weight: 400;

}
#article .item .main{
    height: 210px;
}
#article .item .main a{
    display: block;
    margin:15px 0;
    transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out;
}
#article .item .main a:hover{
    color:#3399fe;
}
#article .item .main a:hover::before{
    background-color:#3399fe;
}
#article .item .main a:before{
    content:'';
    display: inline-block;
    width:7px;
    height: 7px;
    border-radius: 50%;
    border:1px solid #3399fe;
    margin-right: 10px;
    transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out;
}
#article .item .icon{
    position: absolute;
    bottom:-18px;
    right:-18px;
}
#article .item .icon .iconfont{
    font-size:86px;
    color:#3399fe;
    opacity: 0.2;
}


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

    .public_title .t1{font-size:26px;}
    .public_title .t2{font-size:15px;}

	#banner .banner-pagination-center{bottom:10px;}
	#banner .swiper-pagination-bullet{height:4px;}

    .trait{margin-top: 0;padding-top:30px;background-color: #f7f9fe; height: auto;}
    .trait .item{font-size:20px;}

    #service{padding: 40px 0;}
    #service .item{padding:15px;}
    #service .item .top{flex-direction: row;}
    #service .item .icon{width:45px;margin-right: 15px;}
    #service .item .des{font-size:14px;}

    #model{padding: 40px 0;}
    #model .item .top .icon{width:35px;height: 35px;}
    #model .item .top .name{font-size:18px;}

    #base .item .icon img{width:40px;height: 40px;}
    #base .item{padding:15px;}

    #exmple{padding:40px 5px;}
    #exmple .item{width:50%;}
    #exmple .item:last-child{display: none;}
    #exmple .list .text .icon{width:30px;height: 30px;}
    #exmple .list .text .icon .iconfont{font-size: 18px;}
    #exmple .list .text .name{font-size:14px;}

    #article .item .main{height: auto;}


    
    
}