.bgimg { width: 100%; height: auto;}
.bgimg img { width: 100%; height: auto;}

.menu { height: 75px; border-bottom: 1px solid #e7e7ea; position: relative;}
.menu li { float: left; height: 75px; font-size: 15px; line-height: 75px; text-align: center; margin-right: 3.125rem; position: relative;}
.menu li a:before { content: ""; width: 0; height: 3px; position: absolute; bottom: 0; left: 0; background: #0050a3; transition: 0.6s ease-in-out;}
.menu li a { color: #333;}
.menu li a.on:before, .menu li:hover a:before { width: 100%;}

.position { line-height: 75px; color: #7b7b7d; padding-left: 22px; font-size: 14px; background: url(../img/home_icon.png) left center no-repeat;}
.position span, .position a, .position i { font-size: 13px; color: #7b7b7d; -moz-transition: all 0.36s ease-in-out; -webkit-transition: all 0.36s ease-in-out;
    -o-transition: all 0.36s ease-in-out; -ms-transition: all 0.36s ease-in-out; transition: all 0.36s ease-in-out;}
.position i { margin: 0px 5px; font-style: normal;}
.position i img { vertical-align: middle; margin-top: -2px;}
.position em { font-size: 12px; color: #acacac; font-style: normal;}
.position a:hover { color: #0050a3;}

.case .caser { width: 78%;}
.case .caser li { width: 24.2%; float: left; margin: 0 10px 10px 0; overflow: hidden; position: relative;}
.case .caser li.mr0 { margin-right: 0;}
.case .caser li a.pic { position: relative; width: 100%; padding: 50% 0; display: block;}
.case .caser li a.pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.case .caser li a.txt { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, .5); height: 40px; line-height: 40px; display: inline-block; color: #fff;
    font-size: 16px; text-align: center; transition: all 0.5s ease 0s;}
.case .caser li a.txt p { font-size: 14px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-align: left;
    padding: 10px 10px 0 10px; line-height: 26px;}
.case .caser li:hover a.txt { height: 100%; transition: all 0.5s ease 0s;}

.n_tit { height: 45px; line-height: 25px; margin-bottom: 20px; border-bottom: 1px solid #dad9de;}
.n_tit h3 { float: left; font-size: 18px; color: #565656; font-size: 20px; color: #0050a3; font-weight: normal;}
.n_tit h3 span { font-size: 15px; color: #b4b4b6; font-family: arial; text-transform: uppercase; margin-left: 10px;}
.n_pos { height: 45px; margin-bottom: 20px; font-size: 12px; color: #8c8c8c; line-height: 25px; display: block; float: right;}
.n_pos { background: url(../img/home_icon.png) no-repeat left 7px; padding-left: 22px;}
.n_pos a { margin: 0 5px; display: inline-block; font-size: 12px; color: #838287; vertical-align: middle;}
.n_pos a:hover { color: #0050a3;}
.n_pos i { font-style: normal; font-size: 12px;}
.n_pos em { font-size: 12px; color: #0050a3; margin-left: 5px; vertical-align: middle; font-style: normal;}

.c_main, .team, .pro, .news, .case { padding: 40px 0;}

.bg { background: url(../img/n_container_bg.jpg) no-repeat bottom left;}
.c_main h3 { font-size: 2rem; color: #333; font-weight: bold; margin-bottom: 3rem; text-align: center;}
.c_main p { font-size: 14px; line-height: 28px; text-indent: 2em;}
.c_main p img, .c_main img { width: auto; max-width: 100%; height: auto; display: block; margin: 0 auto;}

.team li { display: block; padding: 25px; margin-bottom: 40px;  border-top: 3px solid #e3e5e7; background: #f7f9fb; transition: all 0.36s ease-in-out; -o-transition: all 0.36s ease-in-out;
    -moz-transition: all 0.36s ease-in-out; -webkit-transition: all 0.36s ease-in-out; -ms-transition: all 0.36s ease-in-out;}
.team li .pic { width: 18.3333333333333%; overflow: hidden;}
.team li .pic a { position: relative; width: 100%; padding: 61.4% 0; display: block;}
.team li .pic a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.team li .txt { width: 78%; margin-left: 22%;}
.team li .txt h1 { padding-top: 30px; font-weight: normal;}
.team li .txt span { display: block; margin-top: 10px; color: #989999; display: block; font-size: 15px;}
.team li .txt h1 a { display: block;  font-size: 20px; color: #18140e; margin-bottom: 10px;}
.team li .txt p { line-height: 30px; padding-top: 25px; font-size: 14px; color: #6b6b6a;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}
.team li:hover .txt h1 a { color: #ca0e2a;}
.team li:hover { border-top: 3px solid #0050a3; -moz-box-shadow: 0px 10px 10px #bbb; box-shadow: 0px 10px 10px #bbb;}

.t_left { width: 20%;}
.t_left .proll li { width: 100%; line-height: 50px; background: #0050a3;  margin-bottom: 10px; position: relative;}
.t_left .proll li:after { content: "+"; position: absolute; right: 20px; opacity: 1; transition: .3s right; color: #fff; line-height: 50px; font-size: 18px; top: 0;}
.t_left .proll li a { display: block; padding-left: 50px; font-size: 15px; color: #fff;}
.t_left .proll li:before, .t_left .proll li:before { content: ""; display: block; width: 10px; height: 100%; background: #fff; position: absolute; left: 5px; top: 0;}
.t_left .proll li.on, .t_left .proll li:hover { background: #004791;}
.t_left .proln { background: #f4f6f7; padding: 20px;}
.t_left .proln h3 { font-size: 15px; color: #555; text-align: center; height: 45px; border-bottom: 1px solid #dbddde; margin-bottom: 10px;}
.t_left .proln h3 i { display: block; width: 17px; height: 2px; background: #f39700; margin: 0 auto; margin-top: 10px;}
.t_left .proln li a { font-size: 13px; color: #656567; line-height: 36px; transition: .3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; width: 100%;}
.t_left .proln li a:before { content: "●"; font-size: 12px; color: #d2d4d5; margin-right: 9px;}
.t_left .proln li:hover a { font-size: 13px; color: #0050a3;}
.t_left .proln li:hover a:before { color: #0050a3;}
.pro .pror { width: 78%;}
.pro .pror li { float: left; width: 32.6%; margin: 0 10px 10px 0; position: relative;}
.pro .pror li.mr0 { margin-right: 0;}
.pro .pror li a.pic { position: relative; width: 100%; padding: 50% 0; display: block; overflow: hidden;}
.pro .pror li a.pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;}
.pro .pror li a.txt { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(244, 244, 244, 0.7); height: 40px; line-height: 40px; display: inline-block;
    color: #333; font-size: 16px; text-align: center;}
.pro .pror li:hover a.pic img { transform: scale(1.08); transition: all 0.5s ease 0s; -webkit-transform: scale(1.08); -webkit-transform: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s;}
.pro .pror li:hover a.txt { background: rgba(1, 81, 168, 0.9); color: #fff;}

.news .newl li { padding: 2.5rem; border: #eaeaea 1px solid; position: relative; margin-bottom: 20px;}
.news .newl li:before { content: ""; position: absolute; right: 0; top: 0; height: 100%; width: 0; background: #fafafa; -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}
.news .newl li a { padding: 0; -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out; position:relative; display: block;}
.news .newl li a h5, .news .newl li a h5 a { font-size: 1.125rem; height: 1.5rem; line-height: 1.5rem; color: #383838; position: relative; margin-bottom: 1rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-weight: bold;}
.news .newl li a p { font-size: 0.9375rem; color: #6e6e6e; line-height: 1.5rem; margin: 0.75rem 0 1.5rem; position: relative; display: -webkit-box; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;}
.news .newl li a h6 { font-size: 1rem; color: #6e6e6e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1rem; position: relative; font-weight: normal;}
.news .newl li a h6 .icon { vertical-align: middle; overflow: hidden; height: 1rem; width: 1rem; fill: #999; -moz-transition: all 0.6s ease-in-out; margin: -2px 0.25rem 0 0;
    -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}
.news .newl li a h4 { font-size: 0.9375rem; color: #666; line-height: 20px; font-weight: normal;}
.news .newl li a h4 span { margin-left: 12px;}
.news .newl li:hover:before { left: 0; width: 100%;}
.news .newl li:hover a h5, .news .newl li:hover a h5 a, .news .newl li:hover a h4 { color: #0050a3;}

.c_info_t { text-align: center; border-bottom: 1px dashed #ddd; padding-bottom: 15px; margin-bottom: 10px;}
.c_info_t h1 { font-size: 28px; line-height: 58px; font-weight: 300; letter-spacing: 1px; color: #333;}
.c_info_t h4 { font-size: 15px; color: #666; font-weight: normal;}
.c_info_t h4 span { margin-left: 10px; vertical-align: middle;}
.c_info_txt { line-height: 1.7; font-size: 15.4px; vertical-align: baseline; color: #515151; white-space: normal; padding: 10px;}
.c_info_txt .c_info_txt_info p { text-indent: 2em; color: #333;}
.c_info_txt .c_info_txt_info p img { width: auto; height: auto; max-width: 100%; margin: 0 auto; display: block;}

/* -- 翻页效果 -- */
.box_page { margin: 0; overflow: hidden; padding: 30px 0; text-align: center;}
.page { background: #fff; font-size: 18px; padding: 13px 18px; border-radius: 0px; color: #666; margin: 0 5px; border: 1px solid rgba(0,0,0,0.1); font-weight: normal; transition: 0.5s;}
.page:link { color: #666; text-transform: uppercase;}
.page:visited { color: #666;} 
.page_ding { background: #333; font-size: 18px; color: #fff; padding: 13px 18px; margin: 0 5px; border: 1px solid rgba(0,0,0,0.05);}
.page:hover { background: #0050a3; color: #fff; text-decoration: none;}

.two { height: 30px; margin: 0 auto; line-height: 30px; margin-top: 20px; border-top: 1px dashed #d1d1d1;}
.two .twol { float: left; padding-left: 15px; font-size: 13px;}
.two a { padding-left: 15px;}
.two a:hover { color: #373737; text-decoration: underline;}
.two .twor { float: right; padding-right: 15px; font-size: 13px;}

@media screen and ( max-width: 1920px ) {}
@media screen and ( max-width: 1680px ) {}
@media screen and ( max-width: 1440px ) {}
@media screen and ( max-width: 1366px ) {}
@media screen and ( max-width: 1280px ) {}
@media screen and ( max-width: 1024px ) {}
@media screen and ( max-width: 768px ) {
    .container { width: 98%;}
}
@media screen and ( max-width: 414px ) {
    .menu { height: auto; border-bottom: none;}
    .menu ul { width: 100%;}
    .menu li { width: 49.7%; height: 30px; line-height: 30px; font-size: 14px; margin: 1px 0 0 1px; background: #0050a3;}
    .menu li a { color: #fff;}
    .menu li a.on:before, .menu li:hover a:before { width: 0;}

    .c_main h3 { margin-bottom: .5em;}
    
    .pro, .case { padding: 1px 0 1em 0;}
    .t_left, .pro .pror, .case .caser { width: 100%;}
    .t_left .proll li { float: left; width: 49.7%; line-height: 30px; background: #0050a3; margin: 1px 0 0 1px; text-align: center;}
    .t_left .proll li:after { opacity: 0;}
    .t_left .proll li a { padding-left: 0; font-size: 14px;}
    .t_left .proll li:before, .t_left .proll li:before { width: 0;}

    .pro .pror, .case .caser { margin-top: .5em;}
    .pro .pror li, .case .caser li { width: 48.4%; margin: 0 .2em .4em .2em;}
    .pro .pror li.mr0 { margin-right: .2em;}
    
    .news { padding: .5em 0 1em 0;}
    .news .newl li { padding: .5em; margin-bottom: .5em;}
    .news .newl li a h5, .news .newl li a h5 a { margin-bottom: .5rem;}
    .news .newl li a p { font-size: 0.9375rem; color: #6e6e6e; line-height: 1.5rem; margin: .5rem 0 .5rem;}

    .box_page { background: #fff; margin: 0; overflow: hidden; padding: 30px 0; text-align: center;}
    .page { background: #fff; font-size: 18px; padding: 10px; border-radius: 0px; color: #666; margin: 0 5px;
    	border: 1px solid rgba(0,0,0,0.1); font-weight: normal; transition: 0.5s;}
    .page:link { color: #666; text-transform: uppercase;}
    .page:visited { color: #666;} 
    .page_ding { background: #333; font-size: 18px; color: #fff; padding: 10px; margin: 0 5px;
    	border: 1px solid rgba(0,0,0,0.05);}
    .page:hover { background: #e84d96; color: #fff; text-decoration: none;}
    .two .twol { padding-left: 0;}
    .two .twor { float: left;}

    .proll { margin-bottom: .2em;}

    .position, .t_left .proln, .n_tit, .t_left .proll li:nth-child(1) { display: none;}
}
@media screen and ( max-width: 411px ) {}
@media screen and ( max-width: 400px ) {}
@media screen and ( max-width: 375px ) {}
@media screen and ( max-width: 360px ) {}
@media screen and ( max-width: 320px ) {}