.topbar{
    width: 100%;
    /*position: fixed;*/
    display: block;
    left: 0;
    top: 0;
    z-index: 998;
    min-height: 10rem;
    background: rgba(255, 255, 255, 0);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.topbar .logo {
    width: 18rem;
    display: flex;
    align-items: center;
    margin-left: 8%;
    height: 5rem;
    position: relative;
}
.topbar .logo img {
    height:5rem;
    width: 100%;
    max-width: 28rem;
	margin-top: 2rem;
    object-fit: cover;
}
.topbar ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-right: 8%;
    height: 5rem;
}

.topbar ul li{
    width: 12rem;
    text-align: center;
    display: inline-block;
    position: relative;
    line-height: 5rem;
}
.topbar ul li a{
    color: white;
}

/** menu */
.menu__list {
    position: relative;
    list-style: none;
}
.menu__link {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Iris */
.menu--iris .menu__item {
    margin:0 1.5em 0 0;
}

.menu--iris .menu__link {
    position: relative;
    text-align: center;
    color: #333;
	font-weight: bold;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.menu--iris .menu__link:hover,
.menu--iris .menu__link:focus {
    color: #333;
}

.menu--iris .menu__item--current .menu__link {
    color: #333;
}

.menu--iris .menu__link::before,
.menu--iris .menu__link::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    border: 2px solid #ffffff;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
    transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
}

.menu--iris .menu__link::before {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
    -webkit-transform: translate3d(10px, 10px, 0);
    transform: translate3d(10px, 10px, 0);
}

.menu--iris .menu__link::after {
    right: 0;
    bottom: 0;
    border-width: 0 2px 2px 0;
    -webkit-transform: translate3d(-10px, -10px, 0);
    transform: translate3d(-10px, -10px, 0);
}

.menu--iris .menu__item--current .menu__link::before,
.menu--iris .menu__item--current .menu__link::after,
.menu__link:hover::before,.menu__link:hover::after{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.menu__list a {
    padding: 0.3rem 1rem;
}
/** menu end */
/** cards */
.cards{
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
    margin: 3.75rem 0;
}
.cards .six-side-box{
    width: 18.18rem;
    height: 21rem;
    margin: 2.25rem;
    background-size: 100% 100%;
    transition: background-image 0.2s;
    -moz-transition: background-image 0.2s;	/* Firefox 4 */
    -webkit-transition: background-image 0.2s;	/* Safari 和 Chrome */
    -o-transition: background-image 0.2s;	/* Opera */
}
.cards .b1{background-image: url("../image/card-01.png");}
.cards .b2{background-image: url("../image/card-02.png");}
.cards .b3{background-image: url("../image/card-03.png");}
.cards .b4{background-image: url("../image/card-04.png");}
.cards .b1:hover{background-image: url("../image/card-01-b.png");}
.cards .b2:hover{background-image: url("../image/card-02-b.png");}
.cards .b3:hover{background-image: url("../image/card-03-b.png");}
.cards .b4:hover{background-image: url("../image/card-04-b.png");}
/*.cards .six-side-box{*/
    /*background-color: #2e6da4;*/
    /*width: 18rem;*/
    /*height: 10.38rem;*/
/*}*/
/*.cards .six-side-box:before{*/
    /*content: "";*/
    /*width: 0;*/
    /*height: 0;*/
    /*border-right: 9rem solid transparent;*/
    /*border-left: 9rem solid transparent;*/
    /*border-top: 0;*/
    /*border-bottom: 5.19rem solid #2e6da4;*/
    /*position: relative;*/
    /*bottom:6.7rem*/
/*}*/
/*.cards .six-side-box:after{*/
    /*content: "";*/
    /*width: 0;*/
    /*height: 0;*/
    /*border-right: 9rem solid transparent;*/
    /*border-left: 9rem solid transparent;*/
    /*border-bottom: 0;*/
    /*border-top: 5.19rem solid #2e6da4;*/
    /*position: relative;*/
    /*top:9.9rem*/
/*}*/
/** cards end */
.title{
    display: flex;
    justify-content: center;
    font-size:3.75rem;
    color: #2e6da4;
    margin-top: 1rem;
}
.title-sm{
    margin: 1rem 0 5.5rem 0;
    display: flex;
    justify-content: center;
    font-size:2rem;
    color: #333;
}
.content{
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    color: #333;
}
.content .c-left{
    width: 32rem;
}
.content .c-left img{
    width: 100%
}
.content .c-right{
    width: 64rem;
    margin-left: 4rem;
}
/** content-pics */
.content-pics-col{
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}
.content-pics{
    display: flex;
    justify-content: space-between;
    width: 100rem;
    margin-bottom: 5rem;
}
.content-pics .img-left{
    width: 37.88rem;
    height: 48.19rem;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content-pics .img-left .title{
    font-size: 3.5rem;
    font-weight: bolder;
    color: white;
    line-height: 10rem;
}
.content-pics .img-left .text{
    font-size: 2rem;
    color: white;
    line-height: 3.5rem;
}
.content-pics .img-left .button{
    margin-top: 7rem;
    width: 14.25rem;
    text-align: center;
    height: 5.875rem;
    font-size: 2rem;
    color: white;
    line-height: 5.875rem;
    border: 0.1875rem solid white;
    cursor: pointer;
    transition:  0.2s;
    -moz-transition:  0.2s;	/* Firefox 4 */
    -webkit-transition:  0.2s;	/* Safari 和 Chrome */
    -o-transition:  0.2s;	/* Opera */
}
.content-pics .img-left .button:hover{
    color: black;
    background-color: white;
}
.content-pics .img-right{
    width: 60.81rem;
    height: 48.19rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.content-pics .img-right .img-right-top{
    height: 23.06rem;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content-pics .img-right .img-right-bottom{
    height: 23.06rem;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-pics .img-right .title{
    font-size: 3.5rem;
    font-weight: bolder;
    color: white;
    line-height: 8rem;
}
.content-pics .img-right .text{
    font-size: 2rem;
    color: white;
    line-height: 3.5rem;
}
.content-pics .img-right .button{
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 14.25rem;
    text-align: center;
    height: 5.875rem;
    font-size: 2rem;
    color: white;
    border: 0.1875rem solid white;
    cursor: pointer;
    transition:  0.2s;
    -moz-transition:  0.2s;	/* Firefox 4 */
    -webkit-transition:  0.2s;	/* Safari 和 Chrome */
    -o-transition:  0.2s;	/* Opera */
}
.content-pics .img-right .button:hover{
    color: black;
    background-color: white;
}

.content-pics .img-right .button .lt{
    font-size: 2rem;
    font-weight: bold;
}
.content-pics .img-right .button .ltt{
    font-size: 1.5rem;
}
.center-block{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/** content-pics  end*/
/** news */
.news{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 11.75rem;
}
.news .news-row{
    width: 112.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.news .news-row .news-img{
    width: 25rem;
    height: 22rem;
    background-size: auto 100%
}
.news .news-row .news-img .cover{
    background-color: rgba(0,0,0,0.3);
    margin-top: 17.5rem;
    width: 25rem;
    height: 4.5rem;
    font-size: 1.5rem;
    color: white;
}
.news .news-row .news-img .cover div{
    margin: 0px auto;
    width: 23rem;
    line-height: 2.25rem;
}
/** news end*/
/** footer */
footer {
    width: 100%;
    height: 216px;
    background-color: rgb(31, 33, 40);
}
#footer {
    height: 100%;
    width: 1200px;
    margin: auto;
}

#bottomNavigation {
   width: 250px;
    float: right;
    margin-top: 20px;
}

/*#bottomNavigation li {
    list-style-type: none;
    float: left;
    margin-right: 50px;
    vertical-align: bottom;
}

#bottomNavigation a {
    font-size: 20px;
    color: #646464;
    text-decoration: none;
}

#bottomNavigation a:hover {
    color: white;
}*/

#footerMessage {
    width: 390px;
    float: left;
    margin-top: 60px;
}

#copyright {
    float: left;
    margin-top: 20px;
}

/** footer end*/
/** news page */
.news-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 6rem;
}
.news-col .news{
    width: 75rem;
    height: 22rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 1.375rem;
}
.news-col .news .left{
    width: 5.5rem;
    height: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0b6caf;
    color: white;
}
.news-col .news .left .text{
    font-size: 3rem;
    font-weight: normal;
}
.news-col .news .left .year{
    font-size: 1.5rem;
}
.news-col .news .left .text span{
    font-size: 1rem;
    font-weight: bolder;
}
.news-col .news .mid img{
    width: 32rem;
    height: 22rem;
}
.news-col .news .right{
    width: 37.5rem;
    height: 22rem;
    background-color: white;
    padding: 3rem 2rem;
}
.news-col .news .right .title{
    color: #333;
    height: 4rem;
    font-size: 1.5rem;
}
.news-col .news .right .content{
    margin-top: 3rem;
    color: #333;
    height: 5rem;
    font-size: 1rem;
}
.news-col .news .right .more{
    margin-top: 2rem;
    text-align: right;
}
/** news page end */
/** pro */
.pro{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pro .pro-types{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.pro .pro-types .product{
    margin: 4.25rem;
    font-size: 2.18rem;
    text-align: center;
    color: #ababab;
    cursor: pointer;
}
.pro .pro-types .product:hover {
    color: #0b6caf;
}
.pro .pro-types .product:hover .pro-icon svg{
    fill: #0b6caf;
}
.pro .pro-types .product .pro-icon{
    width: 6.75rem;
    height: 6.75rem;
}
.pro .pro-types .product .pro-icon svg{
    fill: #ababab;
}
.pro .pro-types .product.active {
    color: #0b6caf;
}
.pro .pro-types .product.active .pro-icon svg{
    fill: #0b6caf;
}
.pro .content{
    display: flex;
    flex-direction: row;
}
.pro .content .phone {
    width: 29rem;
    height: 53.75rem;
    margin-right:9rem
}
.pro .content .phone img{
width: 100%;
height: 100%;
}
.pro .content .content-right {
    padding: 4rem 0;
    width: 61.125rem;
    height: 53.75rem;
}
.pro .content .content-right .tit{
    width: 61.125rem;
    text-align: left;
    font-size: 3.8rem;
    color: #0b6caf;
}
.pro .content .content-right .cutline{
     margin-top: 3rem;
     width: 61.125rem;
     border-top: 1px solid black;
 }
.pro .content .content-right .des{
    width: 61.125rem;
    margin-top: 3rem;
    font-size: 2rem;
}
/** pro end */
/** recruit **/
.rec{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rec .recruit{
    margin: 4rem;
    width: 100rem;
    /*height: 20rem;*/
    border: 2px solid #0b6caf;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 3rem;
}
.rec .recruit .tit{
    width: 26rem;
    height: 5rem;
    background-color: #0b6caf;
    border-radius: 1rem;
    color: white;
    font-size: 2.5rem;
    text-align: center;
    line-height: 5rem;
    position: relative;
    top: -2.5rem;
}
.rec .recruit .content{
    width: 92rem;
    font-size: 1.5rem;
    display: block;
}
/** recruit end **/
/** news detail */
.news-detail{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.news-detail .title{
    margin-top: 5rem;
    color: black;
    font-size: 3rem;
    font-weight: bold;
    width: 100rem;
    text-align: center;
}
.news-detail .cont{
    margin-top: 2rem;
    width: 100rem;
}
.news-detail .cont{
    margin-top: 2rem;
    width: 100rem;
}
.news-detail .imgs{
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    width: 100rem;
    justify-content: space-between;
}
.news-detail img{

    width: 32rem;
    height: 25rem;
}
/** news detail end */