body{ font-family: Lato,'Open Sans', sans-sarif; font-size: 16px; background-color: #fff; }
*{margin: 0; padding: 0; box-sizing: border-box;}
.container{margin: 0 auto;width: 90%; bottom:10vh; position:absolute;z-index: 2;    left: 50%;margin-left: -45%;}
.row{display: flex;}
ul,li,p,a{
    margin:0;
    padding:0;
    list-style: none;
    text-decoration: none;
}

/*= common css to all effects =*/
.single-member{ float: left; margin:30px 2.5%;  background-color: #fff; text-align: center; position: relative;flex:1;box-shadow: 0 0 10px 7px #d4d4d4;}
.member-image img{max-width: 100%; vertical-align: middle;background:#fff}
h3 {font-size: 30px; font-weight: bold;font-weight: normal; margin: 10px 0 0; text-transform: uppercase;}
h5 {    font-size: 18px;
    font-weight: 300;
    margin: 0 0 15px;
    line-height: 22px;
    font-weight: 400;}
p {font-size: 14px; font-weight: 300; line-height: 22px; padding: 0 30px; margin-bottom: 10px;}
/* .social-touch a{display: inline-block; width: 27px; height: 26px; vertical-align: middle; margin: 0 2px; background-image: url(../images/social-icons.png); background-repeat: no-repeat; opacity: 1; transition: 0.3s;height:38px;} */
/* .social-touch a:hover{opacity: 1; transition: 0.3s;} */
.fb-touch{background-position: 0 0;}
.tweet-touch{background-position: -35px 0;}
.linkedin-touch{background-position: -71px 0;}
.icon-colored .fb-touch{background-position: 0 -27px;}
.icon-colored .tweet-touch{background-position: -35px -27px;}
.icon-colored .linkedin-touch{background-position: -71px -27px;}
/*= common css to all effects end =*/

/*= effect-1 css =*/
.effect-1{border-radius: 5px 5px 0 0; padding-bottom: 40px;}
.effect-1 .member-image {border: 2px solid #fff; border-radius:100px; display: inline-block; margin-top: 5px; overflow: hidden; transition: 0.3s;    background: linear-gradient(#fff,#d6ecfd);}
.effect-1 .member-image-change{border-radius:140px;}
.effect-1 .social-touch{background-color: #0858bc; position: absolute; left: 0; bottom: 0; padding: 6px 0; height: 38px; overflow: hidden; width: 100%; transition: 0.3s;color:#fff;cursor: pointer;}
.effect-1 .member-image img{transition: 0.3s; border-radius: 60px 0;}
.effect-1:hover .member-image{border-color: #5cb2f1; transition: 0.3s; border-radius: 50%;}
.effect-1:hover .social-touch{padding: 6px 0; height: 38px; transition: 0.3s;background-color: #2096ed;}
/*= effect-1 css end =*/

/*= effect-2 css =*/
.effect-2{max-height: 302px; min-height: 302px; overflow: hidden;}
.effect-2 h3{padding-top: 7px; line-height: 33px;}
.effect-2 .member-image{border-bottom: 5px solid #1fb554; height: 212px; overflow: hidden; width: 100%; transition: 0.4s; display: inline-block; float: none; vertical-align: middle;}
.effect-2 .member-info{transition: 0.4s;}
.effect-2 .member-image img{width: 100%; vertical-align: bottom;}
.effect-2 .social-touch{background-color: #1fb554; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;}
.effect-2:hover .member-image{height: 81px; transition: 0.4s;}
/*= effect-2 css end =*/

/*= effect-3 css =*/
.effect-3{max-height: 302px; min-height: 302px; overflow: hidden;}
.effect-3 h3{padding-top: 7px; line-height: 33px;}
.effect-3 .member-image{border-bottom: 5px solid #e5642b; transition: 0.4s; height: 212px; width: 100%; display: inline-block; float: none; vertical-align: middle;}
.effect-3 .member-info{transition: 0.4s;}
.effect-3 .member-image img{width: 100%; vertical-align: bottom;}
.effect-3 .social-touch{background-color: #e5642b; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;}
.effect-3:hover .member-image{border-bottom: 0; border-radius: 0 0 50px 50px; height: 81px; display: inline-block; overflow: hidden; width: 109px; transition: 0.4s;}
/*= effect-3 css end =*/

/*= effect-4 css =*/
.effect-4{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-4 h3{line-height: 35px;}
.effect-4 .member-image{position: absolute; width: 100%; transition: 0.4s;}
.effect-4 .member-image img{width: 100%;}
.effect-4 .more-info{height: 0; transition: 0.4s; overflow: hidden; z-index: 9; position: relative; background-color: #fff;} 
.effect-4:hover .more-info{height: 208px; transition: 0.4s;}
/*= effect-4 css end =*/

/*= effect-5 css =*/
.effect-5{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-5 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
.effect-5 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4;}
.effect-5 .member-image img{width: 100%;}
.effect-5 .member-info:before{border-left: 140px solid transparent; border-right: 140px solid transparent; border-top: 15px solid #fff; bottom: -15px; content: ""; left: 0; position: absolute; z-index: 9;}
.effect-5:hover .member-info{height: 215px; transition: 0.3s; z-index: 6;}
.effect-5:hover .member-image{margin-top: 200px; transition: 0.3s;}
/*= effect-5 css end =*/

/*= effect-6 css =*/
.effect-6{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-6 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
.effect-6 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4; overflow: hidden;}
.effect-6 .member-image img{width: 100%;}
.effect-6:hover .member-info{height: 215px; transition: 0.3s; z-index: 6; border-radius: 0 0 50% 50%; overflow: hidden;}
.effect-6:hover .member-image{margin-top: 100px; transition: 0.3s; border-radius: 0;}
/*= effect-6 css end =*/

/*= effect-7 css =*/
.effect-7{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-7 h3{line-height: 35px;}
.effect-7 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-7 .member-image img{width: 100%; transition: 0.4s; opacity: 1; height: 100%;}
.effect-7 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-7:hover .member-image{bottom: 40%;}
.effect-7:hover .member-image img{width: 0; height: 0; transition: 0.4s; opacity: 0;}
/*= effect-7 css end =*/

/*= effect-8 css =*/
.effect-8{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
.effect-8 h3{line-height: 35px;}
.effect-8 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-8 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
.effect-8 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-8:hover .member-image{transform: rotateX(82deg); transform-origin: center bottom 0; transition: 0.4s;}
/*= effect-8 css end =*/

/*= effect-9 css =*/
.effect-9{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
.effect-9 h3{line-height: 35px;}
.effect-9 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-9 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
.effect-9 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-9:hover .member-image{transform: translateY(100%); transition: 0.4s;}
/*= effect-9 css end =*/
.bg-img{
    height:100vh;
    background:url('../images/bg-change.jpg') no-repeat;
    background-size:cover;
    /* background-position: 0 -140px */
}
.mask{
    width: 90%;
    /* background: #bcddf5;; */
    opacity: .6;
    margin: 0 auto;
    /* height: 404000px; */
    position: absolute;
    bottom: 10vh;
    left: 50%;
    /* padding: 20px; */
    margin-left: -45%;
    z-index: 1;
    border-radius: 10px; 
}
/*= Media Query 
=============== */

/*= Media Query End
=================== */
.box-all{
    /* padding:20px 0; */
    background:#f4f4f4;
    padding: 20px 0 60px;
}
/* .dian{
    color:blue;
    font-size:20px;
} */
.t-box{
    /* margin-top:-70px; */
    width:85%;
    margin:0 auto;
}
.t-title{
    padding: 50px 0;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: rgb(0, 50, 129);
}
.effect-1 .member-image-width{
    width:100%;
    border-radius: inherit;
    margin-top:0;
}
.effect-add p{
    word-wrap: break-word;
}
.member-image-width img{
    /* height:150px; */
    overflow: hidden;
}
.team-img img{
    width: 100%;
    height: auto;
    vertical-align: middle;
    box-shadow: 0 0 10px 0 #ccc;



}
.effect-add{
    overflow: hidden;
    padding-bottom: 15px;
    width:100%;
}
.li-bg-hover{
    transform:scale(1.05,1.05);
    /* transform:scaleY(1.2); */
    animation:mymove .5s linear;
    
}
.pad{
    padding-top:10px;
}
@keyframes mymove /*Safari and Chrome*/
{
    0%{
    transform: scale(1);  /*开始为原始大小*/
    }
 
    100%{
        transform: scale(1.05);
    }
}
.li-bg-out{
    transform:scale(1,1);
    animation:myout 0.5s linear;
}
@keyframes myout /*Safari and Chrome*/
{
    0%{
    transform: scale(1.05);  /*开始为原始大小*/
    }
  
    100%{
        transform: scale(1);
    }
}
.effect-1 .member-image img.bg-img-add{
    border-radius: inherit;
}
.bg-box{
    height:100vh
}
.box-bg-add{
    background-color: #fff;
}
.box-new-img{
    width:100%;
    /* background: #303030; */
    background: url(../images/font.png) no-repeat;
    background-size:cover;
    background-position: top center;
    min-height: 560px;
    padding-top: 140px;
}
.effect-1 .member-info-add{
    /* border-radius: 0; */
}
.bown-j{
    width:50px;
    height:70px;
    background:url(../images/arrow-bottom-dot.png) no-repeat;
    background-size: 100%;
    position: absolute;
        bottom: -4vh;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        /* margin-left: -50px; */
        animation-name: beat;
        /*动画名称*/
        animation-duration: .5s;
        /*设置秒数*/
        animation-timing-function: linear;
        /*速度曲线*/
        animation-iteration-count: infinite;
        /*播放次数*/
        animation-direction: alternate;
        /*逆向播放*/
        animation-play-state: running;
        /*正在运行*/

}
@keyframes beat {
    0% {
        bottom: -4vh;
    }

    100% {
        bottom: -6vh;
    }
}
.box-ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 43px;
}
.box-ul li{
    /* flex:1; */
    min-width: 200px;
    margin-bottom: 20px;
}
.box-ul li p{
    text-align: center;
    font-weight: bold;
  
}
.box-ul li p span{
    font-size:42px;
    
}
.title-add-color{
    color:#fff;
}
.footer {
    background-color: #e8ebf0 !important;
    padding: 3rem 1.5rem;
}
.container-1 {
    margin: 0 auto;
    position: relative;
}
.footer-bottom[data-v-4221f2d0] {
    margin-top: 1rem;
    font-size:.8rem;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.bg-hide-add{
    display:block;
}

.horizontal-align {
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-top{
    display: flex;
        
}
.bg-box-add{
    margin:15vh auto;

}
.header{
    /* width:100%; */
    height:70px;
}
.header img{
    width: 180px;
    margin-top: 13px;
}
.bg-top-title{
    font-size: 50px;
    /* line-height: 60vh; */
    text-align: center;
padding:5px 35px;
    font-weight: bold;
    /* height: 200px; */
 /* margin:25vh auto; */
  background: 
      linear-gradient(#1359df, #1359df) right top,
      linear-gradient(#1359df, #1359df) right top,
	  linear-gradient(#1359df, #1359df) left bottom,
      linear-gradient(#1359df, #1359df) left bottom;

	 background-size: .3vw 1.5vw, 1.5vw 0.3vw,
		 0.3vw 1.5vw, 1.5vw 0.3vw,0.3vw 1.5vw, 1vw 0.3vw;
	    background-repeat: no-repeat

   
}
/* .bg-top-right{
    flex:1
} */
.news{
    width: 100%;
    text-align: center;
    font-size: 36px;
    height: 100px;
     background-color: #fff; 
    line-height: 100px;
    font-weight: bold;
    color:#000;
}
@media only screen and (max-width: 1000px){
	.row{width: 100%;display: inherit;}
	.team-members{text-align: center;}
	.single-member{float: none; display: inline-block; vertical-align: bottom;margin: 20px 0; width: 444px;}
    .container{
       position: inherit;
       margin-left:auto;
    }
    .bg-top-title{
        /* margin:10vh auto; */
        font-size:36px;
    }
    .bg-box-add{
        margin: 10vh auto;
    }

    .mask{
        bottom: auto;
        top:20vh;
    }
    .bg-img{
        background-size:100%;
        background-position:initial ;

    }
    .bg-hide-add{
        display:none;
    }
    .bg-box{
        height:auto
    }
    .bg-img{
        height:27vh;
    }
    .bown-j{
        display: none;
    }
    .t-title {
        padding: 15px 0;
        font-size: 26px;
        color:rgb(0, 50, 129)
    }
    .box-new-img{
        padding-top:100px;
    }
    .box-ul li p span{
        font-size:30px;
        
    }
    .footer{
        padding:3rem 0
    }
 
    .single-member{
        width:100%
    }
    .t-box{
        /* margin-top:-70px; */
        width:90%;
        margin:0 auto;
    }
  
}
@media only screen and (max-width: 750px){
    .bg-top-title{
        /* margin:8vh auto; */
        font-size:20px;
    }
    .news{
        font-size: 20px;
        height:70px;
        line-height: 70px;
    }
    .cd-timeline-content h2{
        font-size:16px;
        line-height: 38px;
    }
}