#index .banner {
	width:100%;
	height:620px
}
#index .banner .swiper-container, #index .banner .swiper-wrapper {
	height:100%
}
#index .banner .swiper-slide {
	height:100%;
	overflow:hidden;
	background-size:cover;
	background-position:center
}
#index .banner .swiper-slide img {
	height:100%;
	width:auto;
	opacity:0
}
#index .floor-top {
	display:flex;
	justify-content:space-between;
	align-items:flex-end
}
#index .floor-top .tab {
	display:flex
}
#index .floor-top .tab a {
	margin-left:55px;
	font-size:18px;
	transition:all 0.3s
}
#index .floor-top .tab a:hover, #index .floor-top .tab a.active {
	color:#01327e
}
#index .mod-title {
	display:inline-block
}
#index .mod-title i {
	display:block;
	width:40px;
	height:4px;
	background-color:#01327e
}
#index .mod-title .cn {
	display:block;
	width:100%;
	font-size:26px;
	font-weight:bold;
	line-height:26px;
	margin-top:24px;
	white-space:nowrap
}
#index .mod-title .en {
	display:block;
	width:100%;
	font-size:20px;
	font-family:'Arial';
	text-transform:uppercase;
	line-height:20px;
	margin-top:12px;
	white-space:nowrap
}
#index .more {
	display:inline-flex;
	align-items:center;
	font-family:'DIN';
	font-size:14px;
	transition:all 0.3s
}
#index .more i {
	margin-left:6px;
	font-weight:bold;
	height:14px;
	line-height:14px;
	transition:all 0.3s
}
#index .more:hover i {
	transform:rotate(90deg)
}
#index .floor1 {
	width:100%;
	padding:60px 0 70px;
	background-color:#fff
}
#index .floor1 .items {
	width:100%;
	margin-top:40px;
	display:flex;
	justify-content:space-between
}
#index .floor1 .items .item {
	display:block;
	width:24%;
	background-color:#f2f4f5;
	border:1px solid #f2f4f5;
	transition:all 0.3s
}
#index .floor1 .items .item .img {
	width:100%;
	height:auto
}
#index .floor1 .items .item .img img {
	width:100%;
	height:auto
}
#index .floor1 .items .item .text {
	width:100%;
	padding:25px 30px
}
#index .floor1 .items .item .text .title {
	font-size:20px;
	line-height:24px;
	margin-bottom:0px
}
#index .floor1 .items .item .text .desc-line {
	line-height:16px;
	color:#888;
	margin-top:10px
}
#index .floor1 .items .item:hover {
	background-color:#fff;
	border-color:#01327e
}
#index .floor2 {
	width:100%;
	padding:60px 0 70px;
	background-color:#ebedef
}
#index .floor2 .blocks {
	width:100%
}
#index .floor2 .items {
	width:100%;
	margin-top:40px;
	display:none;
	justify-content:space-between
}
#index .floor2 .items.active {
	display:flex
}
#index .floor2 .items .item {
	display:inline-flex;
	align-items:center;
	width:24%;
	height:180px;
	background-color:#fff;
	overflow:hidden
}
#index .floor2 .items .item .img {
	width:180px;
	min-width:180px
}
#index .floor2 .items .item .img img {
	width:100%;
	height:180px
}
#index .floor2 .items .item .text {
	width:calc(100% - 180px);
	padding:25px 30px
}
#index .floor2 .items .item .text .title {
	font-size:20px;
	line-height:24px;
	margin-bottom:40px
}
#index .floor2 .items .item .text .desc-line {
	line-height:16px;
	color:#888;
	margin-top:10px
}
#index .floor2 .items .item:hover {
	background-color:#fff;
	border-color:#01327e
}
#index .floor3 {
	width:100%;
	padding:60px 0 50px;
	background-color:#fff
}
#index .floor3 .items {
	width:100%;
	margin-top:20px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between
}
#index .floor3 .items .item {
	width:32.5%;
	margin-left:1.25%;
	margin-bottom:20px;
	position:relative
}
#index .floor3 .items .item:nth-child(3n+1) {
margin-left:0
}
#index .floor3 .items .item .img {
	width:100%;
	height:auto
}
#index .floor3 .items .item .img img {
	width:100%;
	height:auto;
	
}
#index .floor3 .items .item i.mask {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
#index .floor3 .items .item .con {
	width:100%;
	text-align:center;
	left:0;
	transition:all 0.3s
}
#index .floor3 .items .item .con i {
	display:block;
	font-size:58px;
	margin:0 auto
}
#index .floor3 .items .item .con span {
	font-size:20px;
	margin-top:20px;
	line-height:40px
}
#index .floor3 .items .item:hover .img img {
	-webkit-filter:grayscale(0);
	-moz-filter:grayscale(0);
	-ms-filter:grayscale(0);
	-o-filter:grayscale(0);
	filter:grayscale(0);
	filter:gray
}
#index .floor3 .items .item:hover i.mask {
	background-color:rgba(0, 0, 0, 0.3)
}
#index .floor3 .items .item:hover .con {
	opacity:1
}
#index .about {
	width:100%;
	position:relative;
	padding:60px 0 20px;
	background-color:#ebedef
}
#index .about .img {
	width:100%;
	padding-left:calc((100% - 1660px) / 2)
}
#index .about .img img {
	width:100%;
	height:auto
}
#index .about .texts {
	width:40.6%;
	padding:70px 110px 80px 0;
	padding-left:calc((100% - 1660px) / 2);
	position:absolute;
	top:calc(50% + 20px);
	left:0;
	z-index:3;
	transform:translateY(-50%);
	background-color:#fff
}
#index .about .texts .logo {
	height:40px
}
#index .about .texts .logo img {
	height:40px
}
#index .about .texts .name {
	font-size:24px;
	font-weight:bold;
	margin-top:24px
}
#index .about .texts .desc {
	font-size:14px;
	line-height:28px;
	margin-top:24px
}
#index .thumb {
	width:100%;
	padding:0 0 120px;
	background-color:#ebedef;
	position:relative
}
#index .thumb .swiper {
	width:100%;
	height:auto;
	position:relative;
	z-index:1
}
#index .thumb .swiper .swiper-slide img {
	width:100%;
	height:auto;
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-ms-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);
	filter:gray;
	transform:all 0.3s
}
#index .thumb .swiper .swiper-slide.swiper-slide-active img {
	-webkit-filter:grayscale(0);
	-moz-filter:grayscale(0);
	-ms-filter:grayscale(0);
	-o-filter:grayscale(0);
	filter:grayscale(0);
	filter:gray
}
#index .thumb .bar {
	width:94%;
	max-width:800px;
	height:100px;
	overflow:hidden;
	position:absolute;
	left:50%;
	bottom:60px;
	z-index:3;
	transform:translateX(-50%);
	background-color:#fff;
	padding:20px 30px 20px 40px;
	display:flex;
	justify-content:space-between;
	align-items:center
}
#index .thumb .bar .t-swiper {
	width:calc(100% - 130px);
	height:100%
}
#index .thumb .bar .t-swiper .swiper-slide {
	height:60px
}
#index .thumb .bar .t-swiper .swiper-slide .flex {
	display:flex;
	align-items:center
}
#index .thumb .bar .t-swiper .swiper-slide .flex .icon {
	width:60px;
	height:60px;
	color:#01327e
}
#index .thumb .bar .t-swiper .swiper-slide .flex .icon i {
	font-size:60px;
	height:60px
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text {
	margin-left:20px
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text .big {
	font-size:20px;
	line-height:20px;
	font-weight:bold
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text .small {
	line-height:14px;
	margin-top:10px
}
#index .thumb .bar .navigation {
	width:130px;
	display:flex;
	justify-content:space-between;
	align-items:center
}
#index .thumb .bar .navigation i {
	font-size:20px;
	transition:all 0.3s
}
#index .thumb .bar .navigation i:hover {
	color:#01327e
}
#index .thumb .bar .navigation .c-page {
	font-size:20px
}
#index .thumb .bar .navigation .c-page #current {
	font-size:30px;
	color:#01327e
}
#index .study {
	width:100%;
	padding:60px 0 40px;
	background-color:#fff
}
#index .study .items {
	width:100%;
	margin-top:40px;
	display:flex;
	justify-content:space-between
}
#index .study .items .mod {
	width:100%;
	height:40px;
	padding:0 20px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	background-color:#01327e;
	color:#fff
}
#index .study .items .mod>span {
	font-size:18px
}
#index .study .items .mod .more {
	display:inline-flex;
	align-items:center;
	font-family:'DIN';
	font-weight:bold;
	font-size:14px;
	color:#fff;
	transition:all 0.3s
}
#index .study .items .mod .more i {
	margin-left:6px;
	height:14px;
	line-height:14px;
	transition:all 0.3s
}
#index .study .items .mod .more:hover i {
	transform:rotate(90deg)
}
#index .study .items>.item {
	width:36%;
	margin-right:3.2%
}
#index .study .items>.item ul {
	margin-top:20px
}
#index .study .items>.item li {
	width:100%;
	height:50px;
	border-bottom:1px solid #f2f4f5;
	line-height:50px
}
#index .study .items>.item li a {
	display:block;
	width:100%;
	transition:all 0.3s
}
#index .study .items>.item li a:hover {
	color:#01327e
}
#index .study .items>.shorts {
	width:21.6%
}
#index .study .items>.shorts .type1 {
	height:160px
}
#index .study .items>.shorts .type1 li {
	height:50px
}
#index .study .items>.shorts .type1 li img {
	width:24px
}
#index .study .items>.shorts .type1 li a {
	width:calc(100% - 36px)
}
#index .study .items>.shorts .type2 {
	margin-top:40px
}
#index .study .items>.shorts .type2 .cover {
	width:100%;
	height:170px
}
#index .study .items>.shorts .type2 .cover a {
	display:block;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:center;
	background-image:url(../img/68.png)
}
#index .study .items>.shorts .type2 .cover a img {
	display:none
}
#index .study .items>.shorts .type2 li {
	height:70px;
	margin-top:10px
}
#index .study .items>.shorts .type2 li img {
	width:50px
}
#index .study .items>.shorts .type2 li a {
	width:calc(100% - 62px)
}
#index .study .items>.shorts .type2 li:first-child {
	margin-top:0
}
#index .study .items>.shorts ul {
	margin-top:20px
}
#index .study .items>.shorts li {
	width:100%;
	border-bottom:1px solid #f2f4f5;
	display:flex;
	align-items:center;
	overflow:hidden
}
#index .study .items>.shorts li img {
	flex-shrink:0;
	margin-right:12px
}
#index .study .items>.shorts li .text {
	width:100%
}
#index .study .items>.shorts li a {
	display:block;
	transition:all 0.3s
}
#index .study .items>.shorts li a:hover {
	color:#01327e
}
#index .news {
	width:100%;
	padding:60px 0 40px;
	background-color:#ebedef
}
#index .news .news-block {
	width:100%;
	margin-top:40px;
	display:flex;
	align-items:stretch;
	justify-content:space-between
}
#index .news .news-block .img {
	width:38.5%;
	background-position:center;
	background-size:cover
}
#index .news .news-block ul {
	width:60%;
	background-color:#fff;
	padding:0 90px
}
#index .news .news-block ul li {
	width:100%;
	padding:30px 0 30px;
	border-bottom:1px solid #f2f4f5
}
#index .news .news-block ul li a {
	display:flex;
	align-items:center
}
#index .news .news-block ul li a .date {
	width:70px;
	text-align:center;
	white-space:nowrap;
	transition:all 0.3s;
	flex-shrink:0
}
#index .news .news-block ul li a .date .day {
	font-size:56px;
	font-weight:bold;
	font-family:'DIN';
	line-height:56px
}
#index .news .news-block ul li a .date .mon {
	font-size:16px;
	font-family:'DIN'
}
#index .news .news-block ul li a .text {
	width:100%;
	margin-left:40px
}
#index .news .news-block ul li a .text .title {
	font-size:18px;
	font-weight:bold;
	transition:all 0.3s
}
#index .news .news-block ul li a .text .desc {
	width:100%;
	line-height:28px;
	color:#888;
	margin-top:10px;
	transition:all 0.3s
}
#index .news .news-block ul li a:hover .date, #index .news .news-block ul li a.active .date {
	color:#01327e
}
#index .news .news-block ul li a:hover .text .title, #index .news .news-block ul li a.active .text .title {
	color:#01327e
}
#index .news .news-block ul li a:hover .text .desc, #index .news .news-block ul li a.active .text .desc {
	color:#333
}
#index .news .case-block {
	width:100%;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap
}
#index .news .case-block .item {
	display:block;
	width:calc(50% - 10px);
	margin-left:20px;
	margin-top:20px;
	background-color:#fff;
	padding:40px 30px 30px;
	border-bottom:1px solid #fff;
	transition:all 0.3s
}
#index .news .case-block .item .title {
	font-size:18px;
	font-weight:bold;
	transition:all 0.3s
}
#index .news .case-block .item .desc {
	width:100%;
	line-height:28px;
	color:#888;
	margin-top:10px;
	transition:all 0.3s
}
#index .news .case-block .item:hover {
	border-color:#01327e
}
#index .news .case-block .item:hover .title {
	color:#01327e
}
#index .news .case-block .item:hover .desc {
	color:#333
}
#index .news .case-block .item:nth-child(2n+1) {
margin-left:0
}
#index .contact {
	width:100%;
	background-image:url(../img/22.jpg);
	background-position:center;
	background-size:cover;
	padding:140px 0 120px;
	text-align:center
}
#index .contact .big {
	font-size:48px;
	font-weight:bold;
	color:#fff
}
#index .contact .small {
	font-size:32px;
	font-weight:bold;
	color:#fff;
	margin-top:10px
}
#index .contact .btn {
	display:block;
	width:200px;
	height:50px;
	background-color:#fff;
	border-radius:25px;
	line-height:50px;
	text-align:center;
	font-size:16px;
	color:#01327e;
	margin:50px auto 0
}
#about .about {
	display:flex;
	align-items:stretch;
	background-color:#fff
}
#about .about .texts {
}
#about .about .texts .slogen {
	font-size:28px;
	font-weight:bold;
	text-align:center;
	padding:30px 0 0 0
}
#about .about .texts .content {
	width:100%;
	overflow-x:hidden;
	overflow-y:auto;
	font-size:16px;
	line-height:32px;
	margin-top:30px;
	-webkit-overflow-scrolling:touch
}
#about .about .texts .content img {
	max-width:100%
}
#about .about .texts .content::-webkit-scrollbar {
width:6px;
height:6px;
background-color:#f5f5f5
}
#about .about .texts .content::-webkit-scrollbar-track {
border-radius:3px;
background-color:#f5f5f5
}
#about .about .texts .content::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#ddd
}
#about .about .texts .items {
	width:100%;
	display:flex;
	justify-content:space-between;
	margin-top:60px
}
#about .about .texts .items .item {
	color:#01327e
}
#about .about .texts .items .item .en {
	font-size:16px;
	text-transform:uppercase
}
#about .about .texts .items .item .num {
	font-size:80px;
	font-family:'DIN';
	line-height:70px
}
#about .about .texts .items .item .desc {
	font-size:16px;
	margin-top:10px
}
#about .about .img {
	width:47%;
	flex-shrink:0;
	background-image:url(../img/33.png);
	background-size:cover;
	background-position:center;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center
}
#about .about .img i.play {
	display:block;
	width:54px;
	height:54px;
	background-image:url(../img/34.png);
	background-size:100%;
	cursor:pointer;
	transition:all 0.3s
}
#about .about .img i.play:hover {
	transform:scale(1.1)
}
#about .dev {
	width:100%;
	height:480px;
	display:flex;
	align-items:stretch;
	border-top:1px solid #ddd
}
#about .dev .imgs {
	width:600px;
	height:480px;
	position:relative;
	flex-shrink:0
}
#about .dev .imgs .swiper {
	width:100%;
	height:100%
}
#about .dev .imgs .swiper .swiper-container {
	height:100%
}
#about .dev .imgs .swiper .swiper-container .swiper-wrapper {
	height:100%
}
#about .dev .imgs .swiper .swiper-container .swiper-wrapper .swiper-slide {
	height:100%;
	background-position:center;
	background-size:cover
}
#about .dev .imgs .btns {
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
	width:70px;
	height:140px;
	z-index:3
}
#about .dev .imgs .btns a {
	display:block;
	width:70px;
	height:70px;
	text-align:center;
	line-height:70px
}
#about .dev .imgs .btns a i {
	font-size:24px
}
#about .dev .imgs .btns a.prev {
	background-color:#fff;
	color:#01327e
}
#about .dev .imgs .btns a.next {
	background-color:#01327e;
	color:#fff
}
#about .dev .years {
	width:calc(100% - 480px);
	height:480px;
	background-color:#fff;
	overflow:hidden
}
#about .dev .years .swiper-container {
	height:100%
}
#about .dev .years .swiper-container .swiper-wrapper {
	height:100%
}
#about .dev .years .swiper-container .swiper-wrapper .swiper-slide {
	width:420px;
	height:100%;
	padding:100px 70px 60px 80px;
	border-right:1px solid #ddd
}
#about .dev .years .num {
	font-size:40px;
	font-family:'DIN';
	transition:all 0.3s
}
#about .dev .years i {
	display:block;
	width:40px;
	height:2px;
	margin-top:25px;
	background-color:#333;
	transition:all 0.3s
}
#about .dev .years .content {
	width:100%;
	height:200px;
	overflow-y:auto;
	font-size:16px;
	line-height:32px;
	margin-top:50px;
	-webkit-overflow-scrolling:touch
}
#about .dev .years .content::-webkit-scrollbar {
width:6px;
height:6px;
background-color:#f5f5f5
}
#about .dev .years .content::-webkit-scrollbar-track {
border-radius:3px;
background-color:#f5f5f5
}
#about .dev .years .content::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#ddd
}
#about .dev .years .content img {
	max-width:100%
}
#about .dev .years .swiper-slide-active .num {
	color:#01327e
}
#about .dev .years .swiper-slide-active i {
	background-color:#01327e
}
#about .advantage {
	width:100%;
	padding:60px 0;
	background-color:#f2f4f5
}
#about .advantage .item {
	width:100%;
	height:360px;
	display:flex;
	justify-content:space-between;
	margin-bottom:10px
}
#about .advantage .item .swiper {
	width:42.25%;
	height:360px
}
#about .advantage .item .swiper .swiper-slide {
	height:360px;
	background-position:center;
	background-size:cover
}
#about .advantage .item .texts {
	width:57.75%;
	height:100%;
	padding:90px 110px;
	background-color:#fff
}
#about .advantage .item .texts .title {
	font-size:30px;
	font-weight:bold
}
#about .advantage .item .texts .desc {
	font-size:16px;
	line-height:32px;
	margin-top:20px
}
#about .advantage .item:nth-child(2n) {
flex-direction:row-reverse
}
#about .honor {
	width:100%;
	padding:90px 0
}
#about .honor .swiper-slide {
	width:26.4%
}
#about .honor .swiper-slide img {
	width:100%
}
#about .team {
	width:100%
}
#about .team img {
	width:100%
}
#contact .contact {
	background-color:#f2f4f5;
	width:100%
}
#contact .contact .main {
	display:flex;
	align-items:stretch
}
#contact .contact .main .texts {
	width:50%;
	background-color:#fff;
	padding:60px 5%;
	overflow:hidden
}
#contact .contact .main .texts .big {
	font-size:48px;
	line-height:48px;
	font-family:'DIN'
}
#contact .contact .main .texts .name {
	font-size:18px;
	margin-top:25px
}
#contact .contact .main .texts .icon-line {
	display:flex;
	align-items:center;
	margin-top:20px
}
#contact .contact .main .texts .icon-line i {
	font-size:20px;
	flex-shrink:0
}
#contact .contact .main .texts .icon-line span {
	font-size:14px;
	margin-left:15px
}
#contact .contact .main .texts .way {
	margin-top:30px
}
#contact .contact .main .texts .way .title {
	font-size:18px
}
#contact .contact .main .texts .way .items p, #contact .contact .main .texts .way .items a {
	font-size:16px;
	display:inline-block;
	margin-right:15px
}
#contact .contact .main .texts .way .items p span, #contact .contact .main .texts .way .items a span {
	font-family:'DIN'
}
#contact .contact .main .texts .wechat {
	width:100%;
	margin-top:70px;
	display:flex;
	align-items:stretch
}
#contact .contact .main .texts .wechat .img {
	width:120px;
	height:120px
}
#contact .contact .main .texts .wechat .img img {
	width:100%;
	height:100%
}
#contact .contact .main .texts .wechat .rights {
	width:calc(100% - 120px);
	margin-left:16px;
	position:relative
}
#contact .contact .main .texts .wechat .rights .big {
	font-size:18px;
	font-weight:bold;
	line-height:24px
}
#contact .contact .main .texts .wechat .rights .desc {
	font-size:16px;
	margin-top:10px
}
#contact .contact .main .texts .wechat .rights .small {
	margin-top:10px;
	width:100%
}
#contact .contact .main #map {
	width:50%
}
#contact .feed {
	width:100%;
	background-color:#f2f4f5;
	padding-top:10px;
	padding-bottom:100px
}
#contact .feed .main {
	background-color:#fff;
	padding:60px 55px
}
#contact .feed .main .title {
	width:100%;
	text-align:center;
	font-size:24px;
	line-height:24px
}
#contact .feed .main .form {
	width:100%;
	margin-top:40px
}
#contact .feed .main .form .input-line {
	width:100%;
	display:flex;
	justify-content:space-between
}
#contact .feed .main .form .input-line input {
	width:24.5%;
	height:50px;
	padding:0 20px;
	border:1px solid #ddd
}
#contact .feed .main .form .textarea {
	width:100%;
	height:200px;
	margin-top:20px
}
#contact .feed .main .form .textarea textarea {
	width:100%;
	height:100%;
	padding:10px 20px;
	border:1px solid #ddd;
	resize:none
}
#contact .feed .main .form .bot-line {
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:20px
}
#contact .feed .main .form .bot-line .yzm {
	display:inline-flex
}
#contact .feed .main .form .bot-line .yzm input {
	width:200px;
	height:50px;
	padding:0 20px;
	border:1px solid #ddd
}
#contact .feed .main .form .bot-line .yzm img {
	width:150px;
	height:50px;
	margin-left:10px
}
#contact .feed .main .form .bot-line .sub-btn {
	width:240px;
	height:40px
}
#contact .feed .main .form .bot-line .sub-btn .btn {
	width:240px;
	height:40px;
	line-height:40px;
	text-align:center;
	border:1px solid #333;
	border-radius:20px;
	background-color:transparent;
	color:#333
}
#notice .contents {
	width:100%;
	background-color:#f2f4f5;
	padding-bottom:100px
}
#notice .contents .main {
	padding:10px 110px 90px;
	background-color:#fff
}
#notice .contents .main .item {
	width:100%;
	margin-top:60px
}
#notice .contents .main .item .mod {
	height:24px;
	line-height:24px;
	font-size:24px;
	border-left:4px solid #01327e;
	color:#01327e;
	padding-left:10px;
	margin-bottom:20px
}
#notice .contents .main .item .content {
	font-size:14px;
	line-height:24px
}
#notice .contents .main .item .content img {
	max-width:100%
}
#news {
	background-color:#f2f4f5
}
#news .list {
	width:100%;
	background-color:#fff
}
#news .list .item {
	width:100%;
	height:260px;
	padding:30px 0;
	transition:all 0.3s
}
#news .list .item .main {
	width:94%
}
#news .list .item a {
	display:flex;
	align-items:center;
	width:100%;
	height:100%
}
#news .list .item .img {
	width:320px;
	height:200px;
	flex-shrink:0
}
#news .list .item .img img {
	width:100%;
	height:100%
}
#news .list .item .date {
	width:70px;
	text-align:center;
	white-space:nowrap;
	transition:all 0.3s;
	flex-shrink:0;
	margin:0 30px 0 70px
}
#news .list .item .date .day {
	font-size:56px;
	font-weight:bold;
	font-family:'DIN';
	line-height:56px
}
#news .list .item .date .mon {
	font-size:16px;
	font-family:'DIN'
}
#news .list .item .texts {
	width:calc(100% - 730px)
}
#news .list .item .texts .title {
	font-size:28px;
	font-weight:bold;
	transition:all 0.3s
}
#news .list .item .texts .desc {
	line-height:28px;
	margin-top:10px
}
#news .list .item .btn {
	width:100px;
	height:30px;
	border-radius:15px;
	line-height:30px;
	text-align:center;
	background-color:#01327e;
	color:#fff;
	font-family:'DIN';
	opacity:0;
	transition:all 0.3s;
	margin-left:140px
}
#news .list .item:hover {
	background-color:#d3eeff
}
#news .list .item:hover .date {
	color:#01327e
}
#news .list .item:hover .texts .title {
	color:#01327e
}
#news .list .item:hover .btn {
	opacity:1
}
#news .load-more {
	margin-top:60px;
	margin-bottom:100px
}
#news .study-tip {
	margin-bottom:30px;
	width:100%;
	background-color:#f2f4f5
}
#news .study-tip .main {
	background-color:#fff;
	padding:25px 35px;
	font-size:14px;
	line-height:24px
}
#news .detail {
	width:100%;
	margin-bottom:100px
}
#news .detail .main {
	background-color:#fff;
	padding:70px 110px 50px
}
#news .detail .main .title {
	text-align:center;
	font-size:24px
}
#news .detail .main .date {
	text-align:center;
	margin-top:17px
}
#news .detail .main .date span {
	margin:0 10px
}
#news .detail .main .content {
	margin-top:35px;
	padding:40px 0 20px;
	line-height:24px;
	border-top:1px solid #ddd
}
#news .detail .main .content img {
	max-width:100%
}
#news .detail .main .content iframe {
	width:100%;
	min-height:500px
}
#news .detail .main .prod {
	width:100%;
	display:flex;
	padding:0 0 30px 0
}
#news .detail .main .prod p {
	height:20px;
	line-height:20px;
	margin-top:10px;
	white-space:nowrap;
	flex-shrink:0
}
#news .detail .main .prod .items {
	overflow:hidden;
	width:100%
}
#news .detail .main .prod .items a {
	float:left;
	margin-left:20px;
	margin-top:10px
}
#news .detail .main .prev-next {
	width:100%;
	padding:25px 0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-top:1px solid #ddd
}
#news .detail .main .prev-next .lefts {
	width:80%
}
#news .detail .main .prev-next .lefts a {
	margin:10px 0;
}
#news .detail .main .prev-next .back {
	display:block;
	width:100px;
	height:30px;
	border-radius:15px;
	line-height:30px;
	text-align:center;
	background-color:#d3eeff;
	color:#01327e
}
#study {
	background-color:#f2f4f5
}
#study .study-tip {
	width:100%;
	background-color:#f2f4f5
}
#study .study-tip .main {
	background-color:#fff;
	padding:25px 35px;
	font-size:14px;
	line-height:24px
}
#study .tab {
	width:100%;
	display:flex;
	justify-content:center
}
#study .tab .item {
	display:block;
	width:33%;
	max-width:260px;
	height:50px;
	line-height:50px;
	text-align:center;
	background-color:#d3eeff;
	position:relative;
	margin:0 5px;
	white-space:nowrap
}
#study .tab .item::after {
content:'';
display:block;
width:10px;
height:10px;
transform:rotate(-45deg) translate(-50%, 20%);
background-color:transparent;
position:absolute;
bottom:0;
left:50%
}
#study .tab .item.active, #study .tab .item:hover {
	background-color:#014193;
	color:#fff
}
#study .tab .item.active::after, #study .tab .item:hover::after {
background-color:#014193
}
#sample {
	margin-top:20px
}
#sample .main {
	overflow:hidden
}
#sample .item {
	display:flex;
	align-items:center;
	width:32.5%;
	background-color:#fff;
	float:left;
	margin-left:1.25%;
	margin-bottom:20px;
	padding:20px 10px
}
#sample .item .img {
	width:120px;
	height:80px;
	flex-shrink:0
}
#sample .item .img img {
	width:100%;
	height:100%
}
#sample .item .rights {
	width:calc(100% - 120px);
	padding-left:30px
}
#sample .item .rights .date {
	color:#888;
	font-family:'DIN'
}
#sample .item .rights .name {
	display:block;
	font-size:16px;
	line-height:18px;
	margin-top:5px
}
#sample .item .rights .btn {
	display:inline-block;
	width:100px;
	height:30px;
	border-radius:15px;
	line-height:30px;
	text-align:center;
	background-color:#d3eeff;
	color:#01327e;
	font-family:'DIN';
	margin-top:12px
}
#sample .item:nth-child(3n+1) {
margin-left:0
}
#sample .load-more {
	margin-top:40px;
	margin-bottom:100px
}
#explan {
	margin-top:20px;
	margin-bottom:100px
}
#explan .main {
	background-color:#fff
}
#explan .main .item {
	width:100%;
	padding:0 120px;
	border-bottom:1px solid #f2f4f5
}
#explan .main .item .tops {
	width:100%;
	height:90px;
	display:flex;
	justify-content:space-between;
	align-items:center
}
#explan .main .item .tops .title {
	font-size:18px
}
#explan .main .item .tops .btn {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100px;
	height:30px;
	border-radius:15px;
	background-color:#d3eeff;
	transition:all 0.3s
}
#explan .main .item .tops .btn::before {
content:'展开';
display:inline-block;
color:#01327e;
transition:all 0.3s
}
#explan .main .item .tops .btn i {
	color:#01327e;
	font-size:12px;
	margin-left:8px;
	transition:all 0.3s
}
#explan .main .item .tops .btn.active {
	background-color:#01327e
}
#explan .main .item .tops .btn.active::before {
content:'收起';
color:#fff
}
#explan .main .item .tops .btn.active i {
	color:#fff;
	transform:rotate(-180deg)
}
#explan .main .item .bots {
	display:none;
	padding:45px 40px;
	background-color:#f2f4f5;
	line-height:24px;
	margin-bottom:20px
}
#explan .main .item .bots img {
	max-width:100%
}
#ques {
	margin-top:20px;
	margin-bottom:100px
}
#ques .main {
	background-color:#fff;
	padding:80px 120px 70px
}
#ques .main .list {
	width:100%;
	margin-top:30px
}
#ques .main .list a {
	display:block;
	width:100%;
	height:80px;
	line-height:80px;
	border-bottom:1px solid #ddd;
	overflow:hidden
}
#ques .main .list a .date {
	width:140px;
	color:#888;
	font-family:'DIN';
	float:left
}
#ques .main .list a .title {
	font-size:18px;
	width:calc(100% - 180px);
	float:left;
	transition:all 0.3s
}
#ques .main .list a i {
	font-size:18px;
	color:#ddd;
	float:right;
	transition:all 0.3s
}
#ques .main .list a:hover .title {
	color:#014193
}
#ques .main .list a:hover i {
	color:#014193
}
#ques .load-more {
	margin-top:60px
}
#gall {
	margin-top:20px;
	margin-bottom:100px
}
#gall .main {
	background-color:#fff;
	padding:40px 110px;
	height:860px
}
#calc {
	margin-top:20px;
	margin-bottom:100px
}
#calc .main {
	background-color:#fff;
	padding:80px 120px
}
#calc .main .calc-lines {
	margin-top:60px
}
#calc .main .calc-line {
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	margin-bottom:30px
}
#calc .main .calc-line .item {
	width:47.5%
}
#calc .main .calc-line .item .title {
	width:100%;
	height:50px;
	line-height:50px;
	padding:0 30px;
	background-color:#d3eeff;
	font-size:18px
}
#calc .main .calc-line .item .tops {
	width:100%;
	height:45px;
	border-bottom:1px solid #ddd;
	line-height:45px;
	font-size:16px;
	font-weight:500;
	margin-top:20px
}
#calc .main .calc-line .item .block {
	margin:20px 0
}
#calc .main .calc-line .item .block .input {
	width:100%
}
#calc .main .calc-line .item .block .input .label {
	width:100%;
	font-size:14px
}
#calc .main .calc-line .item .block .input input {
	width:100%;
	height:40px;
	border:1px solid #ddd;
	margin-top:8px;
	padding:0 10px
}
#calc .main .calc-line .item .block .input input[readonly] {
	background-color:#f2f4f5;
	border-color:#f2f4f5;
	color:#01327e
}
#calc .main .calc-line .item .block .input select {
	width:100%;
	height:40px;
	border:1px solid #ddd;
	margin-top:8px;
	padding:0 10px
}
#calc .main .calc-line .item .block1 {
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:stretch
}
#calc .main .calc-line .item .block1 .left {
	width:45%
}
#calc .main .calc-line .item .block1 .left .img {
	width:100%
}
#calc .main .calc-line .item .block1 .left .img img {
	width:100%
}
#calc .main .calc-line .item .block1 .left .inputs {
	width:100%;
	display:flex;
	justify-content:space-between;
	margin-top:29px
}
#calc .main .calc-line .item .block1 .left .inputs .input {
	width:45%;
	max-width:100px
}
#calc .main .calc-line .item .block1 .right {
	width:45%;
	display:flex;
	flex-direction:column;
	justify-content:flex-end
}
#calc .main .calc-line .item .block1 .right .input {
	margin-top:35px
}
#calc .main .calc-line .item .block2 {
	width:100%;
	display:flex;
	justify-content:space-between
}
#calc .main .calc-line .item .block2 .input {
	width:45%
}
#calc .main .calc-line .item .block2 .icon {
	width:10%;
	text-align:center;
	display:inline-flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:center
}
#calc .main .calc-line .item .block2 .icon span {
	height:40px;
	line-height:40px;
	text-align:center
}
#calc .main .calc-line .item .block3 {
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:stretch
}
#calc .main .calc-line .item .block3 .left {
	width:45%
}
#calc .main .calc-line .item .block3 .left .img {
	width:100%
}
#calc .main .calc-line .item .block3 .left .img img {
	width:100%
}
#calc .main .calc-line .item .block3 .left .inputs {
	width:100%;
	display:flex;
	justify-content:space-between;
	margin-top:29px
}
#calc .main .calc-line .item .block3 .left .inputs .input {
	width:45%;
	max-width:100px
}
#calc .main .calc-line .item .block3 .right {
	width:45%;
	display:flex;
	flex-direction:column
}
#calc .main .calc-line .item .block3 .right .input {
	margin-bottom:20px
}
#calc .main .calc-line .item .block4 {
	width:100%
}
#calc .main .calc-line .item .block4 .img {
	width:100%
}
#calc .main .calc-line .item .block4 .img img {
	width:100%
}
#calc .main .calc-line .item .block4 .inputs {
	width:100%;
	display:flex;
	margin-top:29px
}
#calc .main .calc-line .item .block4 .inputs .input {
	width:30%;
	max-width:100px;
	margin-left:5%
}
#calc .main .calc-line .item .block4 .inputs .input:first-child {
	margin-left:0
}
#calc .main .calc-line .item .block5 {
	width:100%;
	display:flex
}
#calc .main .calc-line .item .block5 .input {
	width:30%;
	margin-left:5%
}
#calc .main .calc-line .item .block5 .input:nth-child(3n+1) {
margin-left:0
}
#calc .main .table {
	width:100%;
	margin-top:60px
}
#calc .main .table table {
	width:100%;
	border:1px solid #ddd
}
#calc .main .table table th {
	height:50px;
	background-color:#d3eeff;
	font-size:16px;
	text-align:center;
	padding:0 10px
}
#calc .main .table table td {
	padding:10px 20px;
	white-space:normal;
	word-break:break-all
}
#calc .main .table table td .goods {
	display:flex;
	align-items:center
}
#calc .main .table table td .goods img {
	width:60px;
	height:60px
}
#calc .main .table table td .goods span {
	margin-left:20px
}
#calc .main .table table tbody tr {
	transition:all 0.3s
}
#calc .main .table table tbody tr:hover {
	background-color:#f4fbff
}
{
	background-color:#f2f4f5
}
 .cate {
	width:100%;
	background-color:#f2f4f5
}
.cate .main {
	background-color:#fff
}
.cate .main .tops {
	display:flex;
	width:100%;
	background-color:#01327e;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch
}
.cate .main .tops::-webkit-scrollbar {
width:6px;
height:6px;
background-color:#f5f5f5
}
.cate .main .tops::-webkit-scrollbar-track {
border-radius:3px;
background-color:#f5f5f5
}
.cate .main .tops::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#ddd
}
.cate .main .tops .scroll {
}
.cate .main .tops .scroll a {
	display:inline-block;
	white-space:nowrap;
	padding:0 18px;
	height:60px;
	line-height:60px;
	color:#fff;
	transition:all 0.3s
}
.cate .main .tops .scroll a:hover, .cate .main .tops .scroll a.active {
	background-color:#fff;
	color:#01327e
}
.cate .main .tops .scroll a:first-child {
}
.cate .main .tops .scroll a:last-child {
	margin-right:20px
}
.cate .main .bots {
	width:100%;
	display:block
}
.cate .main .bots .scroll {
	display:none;
	padding:20px 10px
}
.cate .main .bots .scroll a {
	display:inline-block;
	white-space:nowrap;
	margin-left:20px;
	height:30px;
	line-height:30px;
	transition:all 0.3s
}
.cate .main .bots .scroll a:hover, .cate .main .bots .scroll a.active {
	color:#01327e
}
.cate .main .bots .scroll a:last-child {
	margin-right:40px
}
.cate .main .bots .scroll.flex {
	display:flex !important
}
.cate .main .bots .scroll.block {
	display:block !important
}
.prod-tip {
	width:100%;
	background-color:#f2f4f5;
	margin-top:20px
}
.prod-tip .main {
	background-color:#fff;
	padding:25px 35px;
	font-size:14px;
	line-height:24px
}
.prod-list {
	width:100%;
	background-color:#f2f4f5
}
.prod-list .item {
	width:100%;
	padding:20px;
	background-color:#fff;
	margin-top:10px;
	display:flex
}
.prod-list .item .img {
	width:240px;
	height:240px;
	flex-shrink:0
}
.prod-list .item .img img {
	width:100%;
	height:100%
}
.prod-list .item .rights {
	width:calc(100% - 270px);
	margin-left:30px
}
.prod-list .item .rights .title {
	font-size:20px;
	margin-top:15px
}
.prod-list .item .rights .desc {
	font-size:14px;
	line-height:24px;
	margin-top:10px
}
.prod-list .item .rights .bots {
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	margin-top:40px
}
.prod-list .item .rights .bots .labels {
	width:calc(100% - 100px);
	overflow:hidden
}
.prod-list .item .rights .bots .labels .label {
	float:left;
	margin-right:80px;
	margin-top:5px
}
.prod-list .item .rights .bots .more {
	display:block;
	width:100px;
	height:30px;
	line-height:30px;
	text-align:center;
	background-color:#d3eeff;
	border-radius:15px;
	color:#01327e
}
.prod-list .item .rights .contact {
	width:100%;
	border-top:1px solid #ddd;
	margin-top:15px
}
.prod-list .item .rights .contact .tact-item {
	margin-top:20px;
	display:inline-flex;
	align-items:center;
	flex-wrap:wrap;
	margin-right:50px
}
.prod-list .item .rights .contact .tact-item .qq {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100px;
	height:30px;
	background-color:#cc0001;
	border-radius:15px;
	white-space:nowrap;
	flex-shrink:0;
	margin-right:10px
}
.prod-list .item .rights .contact .tact-item .qq.ismobile {
	display:none
}
.prod-list .item .rights .contact .tact-item .qq i {
	font-size:16px;
	color:#fff
}
.prod-list .item .rights .contact .tact-item .qq span {
	font-size:12px;
	margin-left:6px;
	color:#fff
}
.prod-list .item .rights .contact .tact-item .name {
	margin-right:10px;
	height:30px;
	line-height:30px;
	white-space:nowrap;
	flex-shrink:0
}
.prod-list .item .rights .contact .tact-item .name img {
	height:100%
}
.prod-list .item .rights .contact .tact-item .name span {
	margin-left:4px
}
.prod-list .item .rights .contact .tact-item .tel {
	font-size:18px;
	height:30px;
	line-height:30px;
	font-family:'DIN';
	white-space:nowrap;
	flex-shrink:0
}
.prod-list .item .rights .contact .tact-item .tel span {
	margin-right:10px
}
.hot {
	width:100%;
	margin-top:30px;
	margin-bottom:20px
}
.hot .main {
	display:flex
}
.hot .label {
	flex-shrink:0;
	white-space:nowrap;
	margin-top:10px;
	height:16px;
	line-height:16px
}
.hot .links {
	width:100%;
	overflow:hidden
}
.hot .links a {
	float:left;
	padding:0 14px;
	height:16px;
	line-height:16px;
	border-right:1px solid #333;
	margin-top:10px
}
.prob {
	width:100%;
	margin-top:20px;
	margin-bottom:100px
}
.prob .main {
	background-color:#fff
}
.prob .tops {
	width:100%;
	height:50px;
	padding:0 20px;
	line-height:50px;
	background-color:#d3eeff;
	font-size:16px
}
.prob .list {
	width:100%;
	overflow:hidden;
	padding:20px
}
.prob .list a {
	display:block;
	float:left;
	width:48%;
	height:34px;
	line-height:34px;
	margin-top:8px;
	border-bottom:1px solid #f2f4f5;
	padding:0 10px;
	margin-left:4%;
	transition:all 0.3s
}
.prob .list a:nth-child(2n+1) {
margin-left:0
}
.prob .list a:hover {
	color:#01327e
}
#prod_detail .main {
	padding:40px 110px 20px;
	background-color:#fff;
	display:flex
}
#prod_detail .main .gallary {
	width:405px;
	flex-shrink:0
}
#prod_detail .main .gallary .view {
	width:405px;
	height:405px;
	border:1px solid #ddd
}
#prod_detail .main .gallary .view img {
	width:100%;
	height:100%;
	cursor:pointer
}
#prod_detail .main .gallary .thumb {
	width:100%;
	margin-top:10px;
	height:100px;
	display:flex
}
#prod_detail .main .gallary .thumb .btn {
	width:30px;
	height:100%;
	background-color:#f2f4f5;
	color:#fff;
	display:flex;
	flex-shrink:0;
	align-items:center;
	justify-content:center;
	transition:all 0.3s
}
#prod_detail .main .gallary .thumb .btn i {
	font-size:12px
}
#prod_detail .main .gallary .thumb .btn:hover {
	background-color:#ebf7ff;
	color:#01327e
}
#prod_detail .main .gallary .thumb .swiper {
	width:calc(100% - 60px);
	padding:0 10px
}
#prod_detail .main .gallary .thumb .swiper .swiper-slide {
	width:100px;
	height:100px;
	border:1px solid #ddd;
	cursor:pointer
}
#prod_detail .main .gallary .thumb .swiper .swiper-slide img {
	width:100%;
	height:100%
}
#prod_detail .main .info {
	width:calc(100% - 405px);
	padding-left:50px
}
#prod_detail .main .info .title {
	width:100%;
	font-size:24px;
	font-weight:bold
}
#prod_detail .main .info .num {
	width:100%;
	position:relative;
	margin-top:10px
}
#prod_detail .main .info .num .view-num {
	color:#888;
	float:left
}
#prod_detail .main .info .num .share-btn {
	display:flex;
	align-items:center;
	width:100px;
	height:24px;
	float:right
}
#prod_detail .main .info .num .share-btn i {
	font-size:20px
}
#prod_detail .main .info .num .share-btn span {
	margin-left:10px
}
#prod_detail .main .info .num .share-block {
	display:none;
	width:77px;
	height:30px;
	line-height:30px;
	position:absolute;
	top:-30px;
	right:0;
	z-index:2
}
#prod_detail .main .info .num .share-block .bdsharebuttonbox {
	width:100%;
	height:100%;
	text-align:right
}
#prod_detail .main .info .title-line {
	width:100%;
	height:40px;
	background-color:#ebf7ff;
	padding:0 20px;
	font-size:18px;
	color:#01327e;
	line-height:40px;
	margin-top:18px
}
#prod_detail .main .info .desc {
	width:100%;
	height:155px;
	overflow-y:auto;
	margin-top:20px;
	line-height:24px
}
#prod_detail .main .info .btns {
	width:100%;
	max-width:500px;
	overflow:hidden
}
#prod_detail .main .info .btns a {
	display:block;
	width:32%;
	height:40px;
	line-height:40px;
	text-align:center;
	border:1px solid #ddd;
	transition:all 0.3s;
	float:left;
	margin-left:2%;
	margin-bottom:10px
}
#prod_detail .main .info .btns a:nth-child(3n+1) {
margin-left:0
}
#prod_detail .main .info .btns a:hover {
	background-color:#01327e;
	border-color:#01327e;
	color:#fff
}
#prod_detail .main .info>.bot {
	width:100%;
	overflow:hidden;
	border-top:1px solid #ddd;
	padding-top:20px;
	display:flex;
	align-items:flex-start
}
#prod_detail .main .info .contact {
	width:100%;
	float:left
}
#prod_detail .main .info .contact .tact-item {
	margin-top:14px;
	display:inline-flex;
	align-items:center;
	flex-wrap:wrap
}
#prod_detail .main .info .contact .tact-item .qq {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100px;
	height:30px;
	background-color:#cc0001;
	border-radius:15px;
	white-space:nowrap;
	flex-shrink:0;
	margin-right:10px
}
#prod_detail .main .info .contact .tact-item .qq.ismobile {
	display:none
}
#prod_detail .main .info .contact .tact-item .qq i {
	font-size:16px;
	color:#fff
}
#prod_detail .main .info .contact .tact-item .qq span {
	font-size:12px;
	margin-left:6px;
	color:#fff
}
#prod_detail .main .info .contact .tact-item .name {
	margin-right:10px;
	height:30px;
	line-height:30px;
	white-space:nowrap;
	flex-shrink:0
}
#prod_detail .main .info .contact .tact-item .name img {
	height:100%
}
#prod_detail .main .info .contact .tact-item .name span {
	margin-left:4px
}
#prod_detail .main .info .contact .tact-item .tel {
	font-size:18px;
	height:30px;
	line-height:30px;
	font-family:'DIN';
	white-space:nowrap;
	flex-shrink:0
}
#prod_detail .main .info .contact .tact-item .tel span {
	margin-right:10px
}
#prod_detail .main .info .prev-next {
	padding-left:10%;
	display:inline-flex;
	float:right;
	flex-wrap:wrap
}
#prod_detail .main .info .prev-next a {
	width:100%;
	display:block;
	height:30px;
	line-height:30px;
	margin-top:14px;
	white-space:normal
}
#contents {
	margin-top:10px
}
#contents .main {
	overflow:hidden
}
#contents .scroll {
	width:calc(100% - 240px);
	float:left
}
#contents .scroll .scroll-item {
	margin-bottom:10px;
	background-color:#fff;
	padding:20px 110px 30px
}
#contents .scroll .title-line {
	width:100%;
	height:50px;
	background-color:#ebf7ff;
	padding:0 20px;
	font-size:18px;
	color:#01327e;
	line-height:50px
}
#contents .scroll .title-line a {
	display:block;
	width:100px;
	height:30px;
	line-height:30px;
	text-align:center;
	background-color:#01327e;
	color:#fff;
	border-radius:15px;
	float:right;
	margin-top:10px;
	font-size:14px
}
#contents .scroll .content {
	width:100%;
	padding:20px 0
}
#contents .scroll .content img {
	max-width:100%
}
#contents .scroll .down-list {
	width:100%;
	overflow:hidden
}
#contents .scroll .down-list .item {
	display:block;
	float:left;
	margin-left:2%;
	width:32%;
	margin-top:10px
}
#contents .scroll .down-list .item .img {
	width:100%;
	border:1px solid #ddd;
	transition:all 0.3s
}
#contents .scroll .down-list .item .img img {
	width:100%
}
#contents .scroll .down-list .item .img:hover {
	border-color:#01327e
}
#contents .scroll .down-list .item .title {
	font-size:14px;
	margin-top:6px
}
#contents .scroll .down-list .item:nth-child(3n+1) {
margin-left:0
}
#contents .scroll .case-list .item {
	display:block;
	width:100%;
	padding:20px;
	border:1px solid #d3eeff;
	margin-top:10px
}
#contents .scroll .case-list .item .title {
	font-size:18px
}
#contents .scroll .case-list .item .desc {
	line-height:28px
}
#contents .scroll .prob-list .item {
	display:block;
	width:100%;
	padding:20px 0;
	border-bottom:1px solid #d3eeff;
	margin-top:10px
}
#contents .scroll .prob-list .item .title {
	font-size:18px
}
#contents .scroll .prob-list .item .desc {
	line-height:28px
}
#contents .scroll .recom {
	width:100%;
	margin-top:10px;
	margin-bottom:100px
}
#contents .scroll .recom .title-line {
	width:100%;
	text-align:center;
	background-color:#d3eeff
}
#contents .scroll .recom .list {
	width:100%;
	overflow:hidden;
	margin-top:10px
}
#contents .scroll .recom .list .item {
	display:block;
	width:23.5%;
	margin-left:2%;
	margin-bottom:15px;
	float:left
}
#contents .scroll .recom .list .item .img {
	width:100%
}
#contents .scroll .recom .list .item .img img {
	width:100%
}
#contents .scroll .recom .list .item .title {
	width:100%;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:16px;
	background-color:#d3eeff
}
#contents .scroll .recom .list .item:nth-child(4n+1) {
margin-left:0
}
#contents .target {
	width:240px;
	border-left:1px solid #f2f4f5;
	background-color:#fff;
	float:right;
	padding:30px 60px
}
#contents .target .item {
	position:relative;
	display:flex;
	align-items:center;
	white-space:nowrap;
	margin-top:24px
}
#contents .target .item .icon {
	width:16px;
	height:16px;
	position:relative;
	flex-shrink:0
}
#contents .target .item .icon i {
	font-size:16px;
	position:absolute;
	top:0;
	left:0;
	transition:all 0.3s
}
#contents .target .item .icon .gray {
	z-index:1;
	opacity:1;
	color:#ddd
}
#contents .target .item .icon .blue {
	z-index:2;
	opacity:0;
	color:#01327e
}
#contents .target .item span {
	margin-left:13px
}
#contents .target .item:hover .icon .gray, #contents .target .item.active .icon .gray {
	opacity:0
}
#contents .target .item:hover .icon .blue, #contents .target .item.active .icon .blue {
	opacity:1
}
#contents .target .item:first-child {
	margin-top:0
}
#contents .target.s_fixed {
	position:fixed;
	top:210px;
	z-index:3
}
#search .search-box {
	width:100%;
	margin:40px 0 30px;
	height:54px;
	position:relative;
	z-index:9
}
#search .search-box .main {
	height:100%
}
#search .search-box .left {
	width:540px;
	max-width:38.57%;
	height:100%;
	display:inline-block;
	float:left;
	border:1px solid #e6e6e6;
	border-radius:2px
}
#search .search-box .left .select {
	display:inline-block;
	float:left;
	width:90px;
	height:100%;
	padding:0 10px 0 0;
	position:relative
}
#search .search-box .left .select>span {
	display:block;
	width:100%;
	height:100%;
	line-height:54px;
	font-size:18px;
	padding:0 14px 0 14px;
	background-image:url("../img/67.png");
	background-position:right center;
	background-repeat:no-repeat;
	cursor:pointer
}
#search .search-box .left .select .sub {
	width:100%;
	position:absolute;
	top:55px;
	left:0;
	border:1px solid #e6e6e6;
	background-color:#fff;
	z-index:99;
	display:none
}
#search .search-box .left .select .sub span {
	display:block;
	width:100%;
	text-align:center;
	height:30px;
	line-height:30px;
	transition:all 0.3s;
	cursor:pointer
}
#search .search-box .left .select .sub span:hover, #search .search-box .left .select .sub span.active {
	background-color:#01327e;
	color:#fff
}
#search .search-box .left .input {
	display:inline-block;
	float:left;
	width:calc(100% - 90px);
	height:100%;
	border-left:1px solid #e6e6e6
}
#search .search-box .left .input input {
	width:100%;
	height:100%;
	padding:0 10px;
	border:none;
	background-color:#fff;
	border-radius:0;
	font-size:18px
}
#search .search-box .btn {
	display:inline-block;
	float:left
}
#search .search-box .btn button {
	width:117px;
	height:54px;
	background-color:#01327e;
	border:none;
	color:#fff;
	font-size:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer
}
#search .search-box .btn button span {
	display:inline-block;
	line-height:18px
}
#search .search-box .btn button i {
	display:inline-block;
	width:24px;
	height:24px;
	background-image:url("../img/66.png");
	background-size:100% 100%;
	margin-left:5px
}
#search .search-result {
	width:100%;
	padding-bottom:50px
}
#search .search-result .item {
	width:100%;
	padding:24px 0;
	border-bottom:1px solid #e6e6e6
}
#search .search-result .item .title {
	width:100%;
	line-height:16px;
	font-size:16px;
	display:flex;
	align-items:center
}
#search .search-result .item .title i {
	display:inline-block;
	width:4px;
	height:4px;
	background-color:#01327e;
	margin-right:10px
}
#search .search-result .item .title p {
	display:inline-block;
	width:calc(100% - 14px)
}
#search .search-result .item .date {
	width:100%;
	font-size:14px;
	line-height:14px;
	color:#999;
	margin-top:10px;
	padding-left:14px
}
#search .search-result .pages {
	margin-top:50px
}
#search .load-more {
	margin-bottom:100px
}
@media screen and (max-width: 1440px) {
#about .about .texts {
padding-left:calc(6vw / 2)
}
#calc .main .calc-line .item .block .input .label {
height:40px
}
}
@media screen and (max-width: 1366px) {
#sample {
margin-top:20px
}
#sample .item {
display:flex;
align-items:center;
width:49%;
background-color:#fff;
float:left;
margin-left:2%;
margin-bottom:20px;
padding:20px 10px
}
#sample .item .img {
width:120px;
height:80px;
flex-shrink:0
}
#sample .item .img img {
width:100%;
height:100%
}
#sample .item .rights {
width:calc(100% - 120px);
padding-left:30px
}
#sample .item .rights .date {
color:#888;
font-family:'DIN'
}
#sample .item .rights .name {
display:block;
font-size:16px;
line-height:18px;
margin-top:5px
}
#sample .item .rights .btn {
display:inline-block;
width:100px;
height:30px;
border-radius:15px;
line-height:30px;
text-align:center;
background-color:#d3eeff;
color:#01327e;
font-family:'DIN';
margin-top:12px
}
#sample .item:nth-child(3n+1) {
margin-left:2%
}
#sample .item:nth-child(2n+1) {
margin-left:0
}
#sample .load-more {
margin-top:40px;
margin-bottom:60px
}
#news .list {
width:100%;
background-color:#fff
}
#news .list .item {
width:100%;
height:260px;
padding:30px 0;
transition:all 0.3s
}
#news .list .item .main {
width:94%
}
#news .list .item a {
display:flex;
align-items:center;
width:100%;
height:100%
}
#news .list .item .img {
width:320px;
height:200px;
flex-shrink:0
}
#news .list .item .img img {
width:100%;
height:100%
}
#news .list .item .date {
width:70px;
text-align:center;
white-space:nowrap;
transition:all 0.3s;
flex-shrink:0;
margin:0 30px 0 70px
}
#news .list .item .date .day {
font-size:56px;
font-weight:bold;
font-family:'DIN';
line-height:56px
}
#news .list .item .date .mon {
font-size:16px;
font-family:'DIN'
}
#news .list .item .texts {
width:calc(100% - 670px)
}
#news .list .item .texts .title {
font-size:28px;
font-weight:bold;
transition:all 0.3s
}
#news .list .item .texts .desc {
line-height:28px;
margin-top:10px
}
#news .list .item .btn {
width:100px;
height:30px;
border-radius:15px;
line-height:30px;
text-align:center;
background-color:#01327e;
color:#fff;
font-family:'DIN';
opacity:0;
transition:all 0.3s;
margin-left:80px
}
#news .list .item:hover {
background-color:#d3eeff
}
#news .list .item:hover .date {
color:#01327e
}
#news .list .item:hover .texts .title {
color:#01327e
}
#news .list .item:hover .btn {
opacity:1
}
#news .load-more {
margin-top:60px;
margin-bottom:60px
}
#calc {
margin-top:20px;
margin-bottom:60px
}
#calc .main {
background-color:#fff;
padding:60px 60px
}
#calc .main .calc-lines {
margin-top:60px
}
#calc .main .calc-line {
display:flex;
justify-content:space-between;
align-items:stretch;
margin-bottom:30px
}
#calc .main .calc-line .item {
width:47.5%
}
#calc .main .calc-line .item .title {
width:100%;
height:50px;
line-height:50px;
padding:0 30px;
background-color:#d3eeff;
font-size:18px
}
#calc .main .calc-line .item .tops {
width:100%;
height:45px;
border-bottom:1px solid #ddd;
line-height:45px;
font-size:16px;
font-weight:500;
margin-top:20px
}
#calc .main .calc-line .item .block {
margin:20px 0
}
#calc .main .calc-line .item .block .input {
width:100%
}
#calc .main .calc-line .item .block .input .label {
width:100%;
font-size:14px
}
#calc .main .calc-line .item .block .input input {
width:100%;
height:40px;
border:1px solid #ddd;
margin-top:8px;
padding:0 10px
}
#calc .main .calc-line .item .block .input input[readonly] {
background-color:#f2f4f5;
border-color:#f2f4f5;
color:#01327e
}
#calc .main .calc-line .item .block .input select {
width:100%;
height:40px;
border:1px solid #ddd;
margin-top:8px;
padding:0 10px
}
#calc .main .calc-line .item .block1 {
width:100%;
display:flex;
justify-content:space-between;
align-items:stretch
}
#calc .main .calc-line .item .block1 .left {
width:45%
}
#calc .main .calc-line .item .block1 .left .img {
width:100%
}
#calc .main .calc-line .item .block1 .left .img img {
width:100%
}
#calc .main .calc-line .item .block1 .left .inputs {
width:100%;
display:flex;
justify-content:space-between;
margin-top:29px
}
#calc .main .calc-line .item .block1 .left .inputs .input {
width:45%;
max-width:100px
}
#calc .main .calc-line .item .block1 .right {
width:45%;
display:flex;
flex-direction:column;
justify-content:flex-end
}
#calc .main .calc-line .item .block1 .right .input {
margin-top:35px
}
#calc .main .calc-line .item .block2 {
width:100%;
display:flex;
justify-content:space-between
}
#calc .main .calc-line .item .block2 .input {
width:45%
}
#calc .main .calc-line .item .block2 .icon {
width:10%;
text-align:center
}
#calc .main .calc-line .item .block3 {
width:100%;
display:flex;
justify-content:space-between;
align-items:stretch
}
#calc .main .calc-line .item .block3 .left {
width:45%
}
#calc .main .calc-line .item .block3 .left .img {
width:100%
}
#calc .main .calc-line .item .block3 .left .img img {
width:100%
}
#calc .main .calc-line .item .block3 .left .inputs {
width:100%;
display:flex;
justify-content:space-between;
margin-top:29px
}
#calc .main .calc-line .item .block3 .left .inputs .input {
width:45%;
max-width:100px
}
#calc .main .calc-line .item .block3 .right {
width:45%;
display:flex;
flex-direction:column
}
#calc .main .calc-line .item .block3 .right .input {
margin-bottom:20px
}
#calc .main .calc-line .item .block4 {
width:100%
}
#calc .main .calc-line .item .block4 .img {
width:100%
}
#calc .main .calc-line .item .block4 .img img {
width:100%
}
#calc .main .calc-line .item .block4 .inputs {
width:100%;
display:flex;
margin-top:29px
}
#calc .main .calc-line .item .block4 .inputs .input {
width:30%;
max-width:100px;
margin-left:5%
}
#calc .main .calc-line .item .block4 .inputs .input:first-child {
margin-left:0
}
#calc .main .calc-line .item .block5 {
width:100%;
display:flex
}
#calc .main .calc-line .item .block5 .input {
width:30%;
margin-left:5%
}
#calc .main .calc-line .item .block5 .input:nth-child(3n+1) {
margin-left:0
}
#calc .main .table {
width:100%;
margin-top:60px
}
#calc .main .table table {
width:100%;
border:1px solid #ddd
}
#calc .main .table table th {
height:50px;
background-color:#d3eeff;
font-size:16px;
text-align:center;
padding:0 10px
}
#calc .main .table table td {
padding:10px 20px
}
#calc .main .table table td .goods {
display:flex;
align-items:center
}
#calc .main .table table td .goods img {
width:60px;
height:60px
}
#calc .main .table table td .goods span {
margin-left:20px
}
#calc .main .table table tbody tr {
transition:all 0.3s
}
#calc .main .table table tbody tr:hover {
background-color:#f4fbff
}
#index .banner {
width:100%;
height:460px
}
#index .banner .swiper-slide {
height:100%;
overflow:hidden;
background-size:cover;
background-position:center
}
#index .banner .swiper-slide img {
height:auto;
width:auto;
opacity:0
}
#index .floor-top {
display:flex;
justify-content:space-between;
align-items:flex-end
}
#index .floor-top .tab {
display:flex
}
#index .floor-top .tab a {
margin-left:55px;
font-size:18px;
transition:all 0.3s
}
#index .floor-top .tab a:hover, #index .floor-top .tab a.active {
color:#01327e
}
#index .mod-title {
display:inline-block
}
#index .mod-title i {
display:block;
width:40px;
height:4px;
background-color:#01327e
}
#index .mod-title .cn {
display:block;
width:100%;
font-size:26px;
font-weight:bold;
line-height:26px;
margin-top:24px;
white-space:nowrap
}
#index .mod-title .en {
display:block;
width:100%;
font-size:20px;
font-family:'Arial';
text-transform:uppercase;
line-height:20px;
margin-top:12px;
white-space:nowrap
}
#index .more {
display:inline-flex;
align-items:center;
font-family:'DIN';
font-weight:bold;
font-size:14px;
transition:all 0.3s
}
#index .more i {
margin-left:6px;
height:14px;
line-height:14px;
transition:all 0.3s
}
#index .more:hover i {
transform:rotate(90deg)
}
#index .floor1 {
width:100%;
padding:60px 0 70px;
background-color:#fff
}
#index .floor1 .items {
width:100%;
margin-top:40px;
display:flex;
justify-content:space-between
}
#index .floor1 .items .item {
display:block;
width:24%;
background-color:#f2f4f5;
border:1px solid #f2f4f5;
transition:all 0.3s
}
#index .floor1 .items .item .img {
width:100%;
height:auto
}
#index .floor1 .items .item .img img {
width:100%;
height:auto
}
#index .floor1 .items .item .text {
width:100%;
padding:25px 30px
}
#index .floor1 .items .item .text .title {
font-size:20px;
line-height:24px;
margin-bottom:20px
}
#index .floor1 .items .item .text .desc-line {
line-height:16px;
color:#888;
margin-top:10px
}
#index .floor1 .items .item:hover {
background-color:#fff;
border-color:#01327e
}
#index .floor2 {
width:100%;
padding:60px 0 70px;
background-color:#ebedef
}
#index .floor2 .blocks {
width:100%
}
#index .floor2 .items {
width:100%;
margin-top:40px;
display:none;
justify-content:space-between
}
#index .floor2 .items.active {
display:flex
}
#index .floor2 .items .item {
display:inline-flex;
align-items:center;
width:32.5%;
background-color:#fff
}
#index .floor2 .items .item .img {
height:180px;
width:180px;
flex-shrink:0
}
#index .floor2 .items .item .img img {
height:180px;
width:180px
}
#index .floor2 .items .item .text {
width:calc(100% - 180px);
padding:20px 20px
}
#index .floor2 .items .item .text .title {
font-size:16px;
line-height:24px;
margin-bottom:20px
}
#index .floor2 .items .item .text .desc-line {
line-height:14px;
color:#888;
margin-top:10px
}
#index .floor2 .items .item:hover {
background-color:#fff;
border-color:#01327e
}
#index .floor3 {
width:100%;
padding:60px 0 50px;
background-color:#fff
}
#index .floor3 .items {
width:100%;
margin-top:40px;
display:flex;
flex-wrap:wrap;
justify-content:space-between
}
#index .floor3 .items .item {
width:32.5%;
margin-left:1.25%;
margin-bottom:20px;
position:relative
}
#index .floor3 .items .item:nth-child(3n+1) {
margin-left:0
}
#index .floor3 .items .item .img {
width:100%;
height:auto;
max-height:240px
}
#index .floor3 .items .item .img img {
width:100%;
height:auto;
max-height:240px

}
#index .floor3 .items .item i.mask {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-color:transparent;
transition:all 0.3s
}
#index .floor3 .items .item .con {
width:100%;
text-align:center;
left:0;
}
#index .floor3 .items .item .con i {
display:block;
font-size:58px;
margin:0 auto
}
#index .floor3 .items .item .con span {
font-size:20px;
margin-top:20px
}
#index .floor3 .items .item:hover .img img {
-webkit-filter:grayscale(0);
-moz-filter:grayscale(0);
-ms-filter:grayscale(0);
-o-filter:grayscale(0);
filter:grayscale(0);
filter:gray
}
#index .floor3 .items .item:hover i.mask {
background-color:rgba(0, 0, 0, 0.3)
}
#index .floor3 .items .item:hover .con {
opacity:1
}
#index .about {
width:100%;
position:relative;
padding:60px 0 20px;
background-color:#ebedef
}
#index .about .img {
width:100%;
padding-left:calc((100% - 1660px) / 2)
}
#index .about .img img {
width:100%;
height:auto
}
#index .about .texts {
width:40.6%;
padding:40px 70px 40px 40px;
padding-left:40px;
position:absolute;
top:calc(50% + 20px);
left:0;
z-index:3;
transform:translateY(-50%);
background-color:#fff
}
#index .about .texts .logo {
height:40px
}
#index .about .texts .logo img {
height:40px
}
#index .about .texts .name {
font-size:24px;
font-weight:bold;
margin-top:24px
}
#index .about .texts .desc {
font-size:14px;
line-height:28px;
margin-top:24px
}
#index .thumb {
width:100%;
padding:0 0 120px;
background-color:#ebedef;
position:relative
}
#index .thumb .swiper {
width:100%;
height:auto;
position:relative;
z-index:1
}
#index .thumb .swiper .swiper-slide img {
width:100%;
height:auto;
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:gray;
transform:all 0.3s
}
#index .thumb .swiper .swiper-slide.swiper-slide-active img {
-webkit-filter:grayscale(0);
-moz-filter:grayscale(0);
-ms-filter:grayscale(0);
-o-filter:grayscale(0);
filter:grayscale(0);
filter:gray
}
#index .thumb .bar {
width:94%;
max-width:800px;
height:100px;
overflow:hidden;
position:absolute;
left:50%;
bottom:60px;
z-index:3;
transform:translateX(-50%);
background-color:#fff;
padding:20px 30px 20px 40px;
display:flex;
justify-content:space-between;
align-items:center
}
#index .thumb .bar .t-swiper {
width:calc(100% - 130px);
height:100%
}
#index .thumb .bar .t-swiper .swiper-slide {
height:60px
}
#index .thumb .bar .t-swiper .swiper-slide .flex {
display:flex;
align-items:center
}
#index .thumb .bar .t-swiper .swiper-slide .flex .icon {
width:60px;
height:60px;
color:#01327e
}
#index .thumb .bar .t-swiper .swiper-slide .flex .icon i {
font-size:60px;
height:60px
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text {
margin-left:20px
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text .big {
font-size:20px;
line-height:20px;
font-weight:bold
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text .small {
line-height:14px;
margin-top:10px
}
#index .thumb .bar .navigation {
width:130px;
display:flex;
justify-content:space-between;
align-items:center
}
#index .thumb .bar .navigation i {
font-size:20px;
transition:all 0.3s
}
#index .thumb .bar .navigation i:hover {
color:#01327e
}
#index .thumb .bar .navigation .c-page {
font-size:20px
}
#index .thumb .bar .navigation .c-page #current {
font-size:30px;
color:#01327e
}
#index .study {
width:100%;
padding:60px 0 40px;
background-color:#fff
}
#index .study .items {
width:100%;
margin-top:40px;
display:flex;
justify-content:space-between
}
#index .study .items .mod {
width:100%;
height:40px;
padding:0 20px;
display:flex;
justify-content:space-between;
align-items:center;
background-color:#01327e;
color:#fff
}
#index .study .items .mod>span {
font-size:18px
}
#index .study .items .mod .more {
display:inline-flex;
align-items:center;
font-family:'DIN';
font-weight:bold;
font-size:14px;
color:#fff;
transition:all 0.3s
}
#index .study .items .mod .more i {
margin-left:6px;
height:14px;
line-height:14px;
transition:all 0.3s
}
#index .study .items .mod .more:hover i {
transform:rotate(90deg)
}
#index .study .items>.item {
width:36%;
margin-right:3.2%
}
#index .study .items>.item ul {
margin-top:20px
}
#index .study .items>.item li {
width:100%;
height:50px;
border-bottom:1px solid #f2f4f5;
line-height:50px
}
#index .study .items>.item li a {
display:block;
width:100%;
transition:all 0.3s
}
#index .study .items>.item li a:hover {
color:#01327e
}
#index .study .items>.shorts {
width:21.6%
}
#index .study .items>.shorts .type1 li {
height:50px
}
#index .study .items>.shorts .type1 li img {
width:24px
}
#index .study .items>.shorts .type1 li a {
width:calc(100% - 36px)
}
#index .study .items>.shorts .type2 {
margin-top:40px
}
#index .study .items>.shorts .type2 li {
height:70px;
margin-top:10px
}
#index .study .items>.shorts .type2 li img {
width:50px
}
#index .study .items>.shorts .type2 li a {
width:calc(100% - 62px)
}
#index .study .items>.shorts .type2 li:first-child {
margin-top:0
}
#index .study .items>.shorts ul {
margin-top:20px
}
#index .study .items>.shorts li {
width:100%;
border-bottom:1px solid #f2f4f5;
display:flex;
align-items:center;
overflow:hidden
}
#index .study .items>.shorts li img {
flex-shrink:0;
margin-right:12px
}
#index .study .items>.shorts li .text {
width:100%
}
#index .study .items>.shorts li a {
display:block;
transition:all 0.3s
}
#index .study .items>.shorts li a:hover {
color:#01327e
}
#index .news {
width:100%;
padding:60px 0 40px;
background-color:#ebedef
}
#index .news .news-block {
width:100%;
margin-top:40px;
display:flex;
align-items:stretch;
justify-content:space-between
}
#index .news .news-block .img {
width:38.5%;
background-position:center;
background-size:cover
}
#index .news .news-block ul {
width:60%;
background-color:#fff;
padding:0 90px
}
#index .news .news-block ul li {
width:100%;
padding:30px 0 30px;
border-bottom:1px solid #f2f4f5
}
#index .news .news-block ul li a {
display:flex;
align-items:center
}
#index .news .news-block ul li a .date {
width:70px;
text-align:center;
white-space:nowrap;
transition:all 0.3s;
flex-shrink:0
}
#index .news .news-block ul li a .date .day {
font-size:56px;
font-weight:bold;
font-family:'DIN';
line-height:56px
}
#index .news .news-block ul li a .date .mon {
font-size:16px;
font-family:'DIN'
}
#index .news .news-block ul li a .text {
width:100%;
margin-left:40px
}
#index .news .news-block ul li a .text .title {
font-size:18px;
font-weight:bold;
transition:all 0.3s
}
#index .news .news-block ul li a .text .desc {
width:100%;
line-height:28px;
color:#888;
margin-top:10px;
transition:all 0.3s
}
#index .news .news-block ul li a:hover .date, #index .news .news-block ul li a.active .date {
color:#01327e
}
#index .news .news-block ul li a:hover .text .title, #index .news .news-block ul li a.active .text .title {
color:#01327e
}
#index .news .news-block ul li a:hover .text .desc, #index .news .news-block ul li a.active .text .desc {
color:#333
}
#index .news .case-block {
width:100%;
display:flex;
justify-content:space-between;
flex-wrap:wrap
}
#index .news .case-block .item {
display:block;
width:calc(50% - 10px);
margin-left:20px;
margin-top:20px;
background-color:#fff;
padding:40px 30px 30px;
border-bottom:1px solid #fff;
transition:all 0.3s
}
#index .news .case-block .item .title {
font-size:18px;
font-weight:bold;
transition:all 0.3s
}
#index .news .case-block .item .desc {
width:100%;
line-height:28px;
color:#888;
margin-top:10px;
transition:all 0.3s
}
#index .news .case-block .item:hover {
border-color:#01327e
}
#index .news .case-block .item:hover .title {
color:#01327e
}
#index .news .case-block .item:hover .desc {
color:#333
}
#index .news .case-block .item:nth-child(2n+1) {
margin-left:0
}
#index .contact {
width:100%;
background-image:url(../img/22.png);
background-position:center;
background-size:cover;
padding:140px 0 120px;
text-align:center
}
#index .contact .big {
font-size:48px;
font-weight:bold;
color:#fff
}
#index .contact .small {
font-size:32px;
font-weight:bold;
color:#fff;
margin-top:10px
}
#index .contact .btn {
display:block;
width:200px;
height:50px;
background-color:#fff;
border-radius:25px;
line-height:50px;
text-align:center;
font-size:16px;
color:#01327e;
margin:50px auto 0
}
#prod_detail .main {
padding:40px 60px 20px;
display:flex
}
#prod_detail .main .gallary {
width:405px;
flex-shrink:0
}
#prod_detail .main .gallary .view {
width:405px;
height:405px;
border:1px solid #ddd
}
#prod_detail .main .gallary .view img {
width:100%;
height:100%;
cursor:pointer
}
#prod_detail .main .gallary .thumb {
width:100%;
margin-top:10px;
height:100px;
display:flex
}
#prod_detail .main .gallary .thumb .btn {
width:30px;
height:100%;
background-color:#f2f4f5;
color:#fff;
display:flex;
flex-shrink:0;
align-items:center;
justify-content:center;
transition:all 0.3s
}
#prod_detail .main .gallary .thumb .btn i {
font-size:12px
}
#prod_detail .main .gallary .thumb .btn:hover {
background-color:#ebf7ff;
color:#01327e
}
#prod_detail .main .gallary .thumb .swiper {
width:calc(100% - 60px);
padding:0 10px
}
#prod_detail .main .gallary .thumb .swiper .swiper-slide {
width:100px;
height:100px;
border:1px solid #ddd;
cursor:pointer
}
#prod_detail .main .gallary .thumb .swiper .swiper-slide img {
width:100%;
height:100%
}
#prod_detail .main .info {
width:calc(100% - 405px);
padding-left:50px
}
#prod_detail .main .info .title {
width:100%;
font-size:24px;
font-weight:bold
}
#prod_detail .main .info .num {
width:100%;
position:relative;
margin-top:10px
}
#prod_detail .main .info .num .view-num {
color:#888;
float:left
}
#prod_detail .main .info .num .share-btn {
display:flex;
align-items:center;
width:100px;
height:24px;
float:right
}
#prod_detail .main .info .num .share-btn i {
font-size:20px
}
#prod_detail .main .info .num .share-btn span {
margin-left:10px
}
#prod_detail .main .info .num .share-block {
display:none;
width:77px;
height:30px;
line-height:30px;
position:absolute;
top:-30px;
right:0;
z-index:2
}
#prod_detail .main .info .num .share-block .bdsharebuttonbox {
width:100%;
height:100%;
text-align:right
}
#prod_detail .main .info .title-line {
width:100%;
height:40px;
background-color:#ebf7ff;
padding:0 20px;
font-size:18px;
color:#01327e;
line-height:40px;
margin-top:18px
}
#prod_detail .main .info .desc {
width:100%;
height:155px;
overflow-y:auto;
margin-top:20px;
line-height:24px
}
#prod_detail .main .info .btns {
width:100%;
max-width:500px;
overflow:hidden
}
#prod_detail .main .info .btns a {
display:block;
width:32%;
height:40px;
line-height:40px;
text-align:center;
border:1px solid #ddd;
transition:all 0.3s;
float:left;
margin-left:2%;
margin-bottom:10px
}
#prod_detail .main .info .btns a:nth-child(3n+1) {
margin-left:0
}
#prod_detail .main .info .btns a:hover {
background-color:#01327e;
border-color:#01327e;
color:#fff
}
#prod_detail .main .info>.bot {
width:100%;
overflow:hidden;
border-top:1px solid #ddd;
padding-top:20px
}
#prod_detail .main .info .contact {
width:63%;
float:left
}
#prod_detail .main .info .contact .tact-item {
margin-top:14px;
display:inline-flex;
align-items:center;
flex-wrap:wrap
}
#prod_detail .main .info .contact .tact-item .qq {
display:flex;
align-items:center;
justify-content:center;
width:100px;
height:30px;
background-color:#cc0001;
border-radius:15px;
white-space:nowrap;
flex-shrink:0;
margin-right:10px
}
#prod_detail .main .info .contact .tact-item .qq i {
font-size:16px;
color:#fff
}
#prod_detail .main .info .contact .tact-item .qq span {
font-size:12px;
margin-left:6px;
color:#fff
}
#prod_detail .main .info .contact .tact-item .name {
margin-right:10px;
height:30px;
line-height:30px;
white-space:nowrap;
flex-shrink:0
}
#prod_detail .main .info .contact .tact-item .name img {
height:100%
}
#prod_detail .main .info .contact .tact-item .name span {
margin-left:4px
}
#prod_detail .main .info .contact .tact-item .tel {
font-size:18px;
height:30px;
line-height:30px;
font-family:'DIN';
white-space:nowrap;
flex-shrink:0
}
#prod_detail .main .info .contact .tact-item .tel span {
margin-right:10px
}
#prod_detail .main .info .prev-next {
float:right
}
#prod_detail .main .info .prev-next a {
width:100%;
display:block;
height:30px;
line-height:30px;
margin-top:14px
}
#contents {
margin-top:10px
}
#contents .main {
overflow:hidden
}
#contents .scroll {
width:calc(100% - 240px);
float:left
}
#contents .scroll .scroll-item {
margin-bottom:10px;
background-color:#fff;
padding:20px 60px 30px
}
#contents .scroll .title-line {
width:100%;
height:50px;
background-color:#ebf7ff;
padding:0 20px;
font-size:18px;
color:#01327e;
line-height:50px
}
#contents .scroll .title-line a {
display:block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
background-color:#01327e;
color:#fff;
border-radius:15px;
float:right;
margin-top:10px;
font-size:14px
}
#contents .scroll .content {
width:100%;
padding:20px 0
}
#contents .scroll .content img {
max-width:100%
}
#contents .scroll .down-list {
width:100%;
overflow:hidden
}
#contents .scroll .down-list .item {
display:block;
float:left;
margin-left:2%;
width:32%;
margin-top:10px
}
#contents .scroll .down-list .item .img {
width:100%;
border:1px solid #ddd;
transition:all 0.3s
}
#contents .scroll .down-list .item .img img {
width:100%
}
#contents .scroll .down-list .item .img:hover {
border-color:#01327e
}
#contents .scroll .down-list .item .title {
font-size:14px;
margin-top:6px
}
#contents .scroll .down-list .item:nth-child(3n+1) {
margin-left:0
}
#contents .scroll .case-list .item {
display:block;
width:100%;
padding:20px;
border:1px solid #d3eeff;
margin-top:10px
}
#contents .scroll .case-list .item .title {
font-size:18px
}
#contents .scroll .case-list .item .desc {
line-height:28px
}
#contents .scroll .prob-list .item {
display:block;
width:100%;
padding:20px 0;
border-bottom:1px solid #d3eeff;
margin-top:10px
}
#contents .scroll .prob-list .item .title {
font-size:18px
}
#contents .scroll .prob-list .item .desc {
line-height:28px
}
#contents .scroll .recom {
width:100%;
margin-top:10px;
margin-bottom:100px
}
#contents .scroll .recom .title-line {
width:100%;
text-align:center;
background-color:#d3eeff
}
#contents .scroll .recom .list {
width:100%;
overflow:hidden;
margin-top:10px
}
#contents .scroll .recom .list .item {
display:block;
width:23.5%;
margin-left:2%;
float:left
}
#contents .scroll .recom .list .item .img {
width:100%
}
#contents .scroll .recom .list .item .img img {
width:100%
}
#contents .scroll .recom .list .item .title {
width:100%;
height:50px;
line-height:50px;
text-align:center;
font-size:16px;
background-color:#d3eeff
}
#contents .scroll .recom .list .item:nth-child(4n+1) {
margin-left:0
}
#contents .target {
width:240px;
border-left:1px solid #f2f4f5;
background-color:#fff;
float:right;
padding:30px 60px
}
#contents .target .item {
position:relative;
display:flex;
align-items:center;
white-space:nowrap;
margin-top:24px
}
#contents .target .item .icon {
width:16px;
height:16px;
position:relative;
flex-shrink:0
}
#contents .target .item .icon i {
font-size:16px;
position:absolute;
top:0;
left:0;
transition:all 0.3s
}
#contents .target .item .icon .gray {
z-index:1;
opacity:1;
color:#ddd
}
#contents .target .item .icon .blue {
z-index:2;
opacity:0;
color:#01327e
}
#contents .target .item span {
margin-left:13px
}
#contents .target .item:hover .icon .gray, #contents .target .item.active .icon .gray {
opacity:0
}
#contents .target .item:hover .icon .blue, #contents .target .item.active .icon .blue {
opacity:1
}
#contents .target .item:first-child {
margin-top:0
}
#contents .target.s_fixed {
position:absolute;
top:0;
right:0
}
}
@media screen and (max-width: 1200px) {
#about .about {
display:flex;
align-items:stretch;
background-color:#fff
}
#about .about .texts {
width:53%;
padding-left:calc(6vw / 2);
padding-top:50px;
padding-bottom:50px;
padding-right:50px
}
#about .about .texts .slogen {
font-size:24px;
font-weight:bold
}
#about .about .texts .content {
width:100%;
height:px;
overflow-x:hidden;
overflow-y:auto;
font-size:16px;
line-height:32px;
margin-top:30px;
-webkit-overflow-scrolling:touch
}
#about .about .texts .content img {
max-width:100%
}
#about .about .texts .content::-webkit-scrollbar {
width:6px;
height:6px;
background-color:#f5f5f5
}
#about .about .texts .content::-webkit-scrollbar-track {
border-radius:3px;
background-color:#f5f5f5
}
#about .about .texts .content::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#ddd
}
#about .about .texts .items {
width:100%;
display:flex;
justify-content:space-between;
margin-top:40px
}
#about .about .texts .items .item {
color:#01327e
}
#about .about .texts .items .item .en {
font-size:14px;
text-transform:uppercase
}
#about .about .texts .items .item .num {
font-size:50px;
line-height:40px
}
#about .about .texts .items .item .desc {
font-size:14px;
margin-top:10px
}
#about .about .img {
width:47%;
flex-shrink:0;
background-image:url(../img/33.png);
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
justify-content:center
}
#about .about .img i.play {
display:block;
width:54px;
height:54px;
background-image:url(../img/34.png);
background-size:100%;
cursor:pointer;
transition:all 0.3s
}
#about .about .img i.play:hover {
transform:scale(1.1)
}
#about .dev {
width:100%;
height:480px;
display:flex;
align-items:stretch;
border-top:1px solid #ddd
}
#about .dev .imgs {
width:450px;
height:480px;
position:relative;
flex-shrink:0
}
#about .dev .imgs .swiper {
width:100%;
height:100%
}
#about .dev .imgs .swiper .swiper-container {
height:100%
}
#about .dev .imgs .swiper .swiper-container .swiper-wrapper {
height:100%
}
#about .dev .imgs .swiper .swiper-container .swiper-wrapper .swiper-slide {
height:100%;
background-position:center;
background-size:cover
}
#about .dev .imgs .btns {
position:absolute;
top:50%;
right:0;
transform:translateY(-50%);
width:70px;
height:140px;
z-index:3
}
#about .dev .imgs .btns a {
display:block;
width:70px;
height:70px;
text-align:center;
line-height:70px
}
#about .dev .imgs .btns a i {
font-size:24px
}
#about .dev .imgs .btns a.prev {
background-color:#fff;
color:#01327e
}
#about .dev .imgs .btns a.next {
background-color:#01327e;
color:#fff
}
#about .dev .years {
width:calc(100% - 480px);
height:480px;
background-color:#fff;
overflow:hidden
}
#about .dev .years .swiper-container {
height:100%
}
#about .dev .years .swiper-container .swiper-wrapper {
height:100%
}
#about .dev .years .swiper-container .swiper-wrapper .swiper-slide {
width:420px;
height:100%;
padding:70px 70px 60px 80px;
border-right:1px solid #ddd
}
#about .dev .years .num {
font-size:40px;
font-family:'DIN';
transition:all 0.3s
}
#about .dev .years i {
display:block;
width:40px;
height:2px;
margin-top:25px;
background-color:#333;
transition:all 0.3s
}
#about .dev .years .content {
width:100%;
height:200px;
overflow-y:auto;
font-size:16px;
line-height:32px;
margin-top:50px;
-webkit-overflow-scrolling:touch
}
#about .dev .years .content::-webkit-scrollbar {
width:6px;
height:6px;
background-color:#f5f5f5
}
#about .dev .years .content::-webkit-scrollbar-track {
border-radius:3px;
background-color:#f5f5f5
}
#about .dev .years .content::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#ddd
}
#about .dev .years .content img {
max-width:100%
}
#about .dev .years .swiper-slide-active .num {
color:#01327e
}
#about .dev .years .swiper-slide-active i {
background-color:#01327e
}
#about .advantage {
width:100%;
padding:60px 0;
background-color:#f2f4f5
}
#about .advantage .item {
width:100%;
height:360px;
display:flex;
justify-content:space-between;
margin-bottom:10px
}
#about .advantage .item .swiper {
width:42.25%;
height:360px
}
#about .advantage .item .swiper .swiper-slide {
height:360px;
background-position:center;
background-size:cover
}
#about .advantage .item .texts {
width:57.75%;
height:100%;
padding:90px 80px;
background-color:#fff
}
#about .advantage .item .texts .title {
font-size:24px;
font-weight:bold
}
#about .advantage .item .texts .desc {
font-size:16px;
line-height:32px;
margin-top:20px
}
#about .advantage .item:nth-child(2n) {
flex-direction:row-reverse
}
#about .honor {
width:100%;
padding:90px 0
}
#about .honor .swiper-slide {
width:26.4%
}
#about .honor .swiper-slide img {
width:100%
}
#about .team {
width:100%
}
#about .team img {
width:100%
}
}
@media screen and (max-width: 1024px) {
#news .list .item {
width:100%;
height:auto;
padding:30px 0;
transition:all 0.3s
}
#news .list .item .main {
width:94%
}
#news .list .item a {
display:flex;
align-items:center;
width:100%;
height:100%
}
#news .list .item .img {
width:230px;
height:144px;
flex-shrink:0
}
#news .list .item .img img {
width:100%;
height:100%
}
#news .list .item .date {
width:70px;
text-align:center;
white-space:nowrap;
transition:all 0.3s;
flex-shrink:0;
margin:0 30px 0 30px
}
#news .list .item .date .day {
font-size:56px;
font-weight:bold;
font-family:'DIN';
line-height:56px
}
#news .list .item .date .mon {
font-size:16px;
font-family:'DIN'
}
#news .list .item .texts {
width:calc(100% - 490px)
}
#news .list .item .texts .title {
font-size:28px;
font-weight:bold;
transition:all 0.3s
}
#news .list .item .texts .desc {
line-height:28px;
margin-top:10px
}
#news .list .item .btn {
width:100px;
height:30px;
border-radius:15px;
line-height:30px;
opacity:1;
margin-left:30px
}
#news .list .item:hover {
background-color:#d3eeff
}
#news .list .item:hover .date {
color:#01327e
}
#news .list .item:hover .texts .title {
color:#01327e
}
#news .list .item:hover .btn {
opacity:1
}
#news .load-more {
margin-top:40px;
margin-bottom:40px
}
#calc {
margin-top:20px;
margin-bottom:30px
}
#calc .main {
background-color:#fff;
padding:30px 30px
}
#calc .main .calc-lines {
margin-top:60px
}
#calc .main .calc-line {
display:block;
margin-bottom:30px
}
#calc .main .calc-line .item {
width:100%
}
#calc .main .calc-line .item .title {
width:100%;
height:50px;
line-height:50px;
padding:0 30px;
background-color:#d3eeff;
font-size:18px
}
#calc .main .calc-line .item .tops {
width:100%;
height:45px;
border-bottom:1px solid #ddd;
line-height:45px;
font-size:16px;
font-weight:500;
margin-top:20px
}
#calc .main .calc-line .item .block {
margin:20px 0
}
#calc .main .calc-line .item .block .input {
width:100%
}
#calc .main .calc-line .item .block .input .label {
width:100%;
font-size:14px
}
#calc .main .calc-line .item .block .input input {
width:100%;
height:40px;
border:1px solid #ddd;
margin-top:8px;
padding:0 10px
}
#calc .main .calc-line .item .block .input input[readonly] {
background-color:#f2f4f5;
border-color:#f2f4f5;
color:#01327e
}
#calc .main .calc-line .item .block .input select {
width:100%;
height:40px;
border:1px solid #ddd;
margin-top:8px;
padding:0 10px
}
#calc .main .calc-line .item .block1 {
width:100%;
display:block
}
#calc .main .calc-line .item .block1 .left {
width:100%
}
#calc .main .calc-line .item .block1 .left .img {
width:100%
}
#calc .main .calc-line .item .block1 .left .img img {
width:100%
}
#calc .main .calc-line .item .block1 .left .inputs {
width:100%;
display:flex;
justify-content:space-between;
margin-top:29px
}
#calc .main .calc-line .item .block1 .left .inputs .input {
width:45%;
max-width:unset
}
#calc .main .calc-line .item .block1 .right {
width:100%;
display:flex;
flex-direction:column;
justify-content:flex-end
}
#calc .main .calc-line .item .block1 .right .input {
margin-top:35px
}
#calc .main .calc-line .item .block2 {
width:100%;
display:flex;
justify-content:space-between
}
#calc .main .calc-line .item .block2 .input {
width:45%
}
#calc .main .calc-line .item .block2 .icon {
width:10%;
text-align:center
}
#calc .main .calc-line .item .block3 {
width:100%;
display:flex;
justify-content:space-between;
align-items:stretch
}
#calc .main .calc-line .item .block3 .left {
width:45%
}
#calc .main .calc-line .item .block3 .left .img {
width:100%
}
#calc .main .calc-line .item .block3 .left .img img {
width:100%
}
#calc .main .calc-line .item .block3 .left .inputs {
width:100%;
display:flex;
justify-content:space-between;
margin-top:29px
}
#calc .main .calc-line .item .block3 .left .inputs .input {
width:45%;
max-width:100px
}
#calc .main .calc-line .item .block3 .right {
width:45%;
display:flex;
flex-direction:column
}
#calc .main .calc-line .item .block3 .right .input {
margin-bottom:20px
}
#calc .main .calc-line .item .block4 {
width:100%
}
#calc .main .calc-line .item .block4 .img {
width:100%
}
#calc .main .calc-line .item .block4 .img img {
width:100%
}
#calc .main .calc-line .item .block4 .inputs {
width:100%;
display:flex;
margin-top:29px
}
#calc .main .calc-line .item .block4 .inputs .input {
width:30%;
max-width:100px;
margin-left:5%
}
#calc .main .calc-line .item .block4 .inputs .input:first-child {
margin-left:0
}
#calc .main .calc-line .item .block5 {
width:100%;
display:flex
}
#calc .main .calc-line .item .block5 .input {
width:30%;
margin-left:5%
}
#calc .main .calc-line .item .block5 .input:nth-child(3n+1) {
margin-left:0
}
#calc .main .table {
width:100%;
margin-top:60px;
overflow-x:auto
}
#calc .main .table table {
width:auto;
border:1px solid #ddd
}
#calc .main .table table th {
height:50px;
background-color:#d3eeff;
font-size:16px;
text-align:center;
padding:0 10px
}
#calc .main .table table td {
padding:10px 20px
}
#calc .main .table table td .goods {
display:block;
align-items:center
}
#calc .main .table table td .goods img {
width:60px;
height:60px
}
#calc .main .table table td .goods span {
display:block;
margin-left:0
}
#calc .main .table table tbody tr {
transition:all 0.3s
}
#calc .main .table table tbody tr:hover {
background-color:#f4fbff
}
#index .banner {
width:100%;
height:340px
}
#index .banner .swiper-slide {
height:100%;
overflow:hidden;
background-size:cover;
background-position:center
}
#index .banner .swiper-slide img {
height:auto;
width:auto;
opacity:0
}
#index .floor-top {
display:flex;
justify-content:space-between;
align-items:flex-end
}
#index .floor-top .tab {
display:flex
}
#index .floor-top .tab a {
margin-left:55px;
font-size:18px;
transition:all 0.3s
}
#index .floor-top .tab a:hover, #index .floor-top .tab a.active {
color:#01327e
}
#index .mod-title {
display:inline-block
}
#index .mod-title i {
display:block;
width:40px;
height:4px;
background-color:#01327e
}
#index .mod-title .cn {
display:block;
width:100%;
font-size:20px;
font-weight:bold;
line-height:20px;
margin-top:15px;
white-space:nowrap
}
#index .mod-title .en {
display:block;
width:100%;
font-size:16px;
font-family:'Arial';
text-transform:uppercase;
line-height:16px;
margin-top:12px;
white-space:nowrap
}
#index .more {
display:inline-flex;
align-items:center;
font-family:'DIN';
font-weight:bold;
font-size:14px;
transition:all 0.3s
}
#index .more i {
margin-left:6px;
height:14px;
line-height:14px;
transition:all 0.3s
}
#index .more:hover i {
transform:rotate(90deg)
}
#index .floor1 {
width:100%;
padding:30px 0 30px;
background-color:#fff
}
#index .floor1 .items {
width:100%;
margin-top:20px;
display:flex;
justify-content:space-between
}
#index .floor1 .items .item {
display:block;
width:24%;
background-color:#f2f4f5;
border:1px solid #f2f4f5;
transition:all 0.3s
}
#index .floor1 .items .item .img {
width:100%;
height:auto
}
#index .floor1 .items .item .img img {
width:100%;
height:auto
}
#index .floor1 .items .item .text {
width:100%;
padding:20px 20px
}
#index .floor1 .items .item .text .title {
font-size:16px;
line-height:16px;
margin-bottom:10px
}
#index .floor1 .items .item .text .desc-line {
line-height:14px;
color:#888;
margin-top:10px
}
#index .floor1 .items .item:hover {
background-color:#fff;
border-color:#01327e
}
#index .floor2 {
width:100%;
padding:30px 0 30px;
background-color:#ebedef
}
#index .floor2 .blocks {
width:100%
}
#index .floor2 .items {
width:100%;
margin-top:20px;
display:none;
justify-content:space-between
}
#index .floor2 .items.active {
display:block
}
#index .floor2 .items .item {
display:inline-flex;
align-items:center;
width:100%;
height:180px;
background-color:#fff;
overflow:hidden;
margin-bottom:10px
}
#index .floor2 .items .item .img {
width:180px;
min-width:180px
}
#index .floor2 .items .item .img img {
width:100%
}
#index .floor2 .items .item .text {
width:calc(100% - 180px);
padding:25px 30px
}
#index .floor2 .items .item .text .title {
font-size:20px;
line-height:24px;
margin-bottom:40px
}
#index .floor2 .items .item .text .desc-line {
line-height:16px;
color:#888;
margin-top:10px
}
#index .floor2 .items .item:hover {
background-color:#fff;
border-color:#01327e
}
#index .floor3 {
width:100%;
padding:30px 0 30px;
background-color:#fff
}
#index .floor3 .items {
width:100%;
margin-top:40px;
display:flex;
flex-wrap:wrap;
justify-content:space-between
}
#index .floor3 .items .item {
width:32.5%;
margin-left:1.25%;
margin-bottom:20px;
position:relative
}
#index .floor3 .items .item:nth-child(3n+1) {
margin-left:0
}
#index .floor3 .items .item .img {
width:100%;
height:auto
}
#index .floor3 .items .item .img img {
width:100%;
height:auto;
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:gray;
transform:all 0.3s
}
#index .floor3 .items .item i.mask {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-color:transparent;
transition:all 0.3s
}
#index .floor3 .items .item .con {
width:100%;
text-align:center;
position:absolute;
top:50%;
left:0;
margin-top:-40px;
color:#fff;
opacity:0;
transition:all 0.3s
}
#index .floor3 .items .item .con i {
display:block;
font-size:28px;
margin:0 auto
}
#index .floor3 .items .item .con span {
font-size:16px;
margin-top:16px
}
#index .floor3 .items .item:hover .img img {
-webkit-filter:grayscale(0);
-moz-filter:grayscale(0);
-ms-filter:grayscale(0);
-o-filter:grayscale(0);
filter:grayscale(0);
filter:gray
}
#index .floor3 .items .item:hover i.mask {
background-color:rgba(0, 0, 0, 0.3)
}
#index .floor3 .items .item:hover .con {
opacity:1
}
#index .about {
width:100%;
position:relative;
padding:30px 0 30px;
background-color:#ebedef
}
#index .about .img {
width:100%;
padding-left:calc((100% - 1660px) / 2)
}
#index .about .img img {
width:100%;
height:auto
}
#index .about .texts {
width:50%;
padding:20px 20px 20px 20px;
padding-left:20px;
position:absolute;
top:50%;
left:0;
z-index:3;
transform:translateY(-50%);
background-color:#fff
}
#index .about .texts .logo {
height:24px
}
#index .about .texts .logo img {
height:24px
}
#index .about .texts .name {
font-size:18px;
font-weight:bold;
margin-top:10px
}
#index .about .texts .desc {
font-size:14px;
line-height:26px;
margin-top:14px
}
#index .thumb {
width:100%;
padding:0 0 120px;
background-color:#ebedef;
position:relative
}
#index .thumb .swiper {
width:100%;
height:auto;
position:relative;
z-index:1
}
#index .thumb .swiper .swiper-slide img {
width:100%;
height:auto;
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:gray;
transform:all 0.3s
}
#index .thumb .swiper .swiper-slide.swiper-slide-active img {
-webkit-filter:grayscale(0);
-moz-filter:grayscale(0);
-ms-filter:grayscale(0);
-o-filter:grayscale(0);
filter:grayscale(0);
filter:gray
}
#index .thumb .bar {
width:94%;
max-width:800px;
height:80px;
overflow:hidden;
position:absolute;
left:50%;
bottom:60px;
z-index:3;
transform:translateX(-50%);
background-color:#fff;
padding:20px 30px 20px 40px;
display:flex;
justify-content:space-between;
align-items:center
}
#index .thumb .bar .t-swiper {
width:calc(100% - 130px);
height:100%
}
#index .thumb .bar .t-swiper .swiper-slide {
height:60px
}
#index .thumb .bar .t-swiper .swiper-slide .flex {
display:flex;
align-items:center
}
#index .thumb .bar .t-swiper .swiper-slide .flex .icon {
width:40px;
height:40px;
color:#01327e
}
#index .thumb .bar .t-swiper .swiper-slide .flex .icon i {
font-size:40px;
height:40px;
display:block
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text {
margin-left:20px
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text .big {
font-size:18px;
line-height:18px;
font-weight:bold
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text .small {
line-height:14px;
margin-top:10px
}
#index .thumb .bar .navigation {
width:130px;
display:flex;
justify-content:space-between;
align-items:center
}
#index .thumb .bar .navigation i {
font-size:20px;
transition:all 0.3s
}
#index .thumb .bar .navigation i:hover {
color:#01327e
}
#index .thumb .bar .navigation .c-page {
font-size:20px
}
#index .thumb .bar .navigation .c-page #current {
font-size:30px;
color:#01327e
}
#index .study {
width:100%;
padding:30px 0 30px;
background-color:#fff
}
#index .study .items {
width:100%;
margin-top:20px;
display:block;
justify-content:space-between
}
#index .study .items .mod {
width:100%;
height:40px;
padding:0 20px;
display:flex;
justify-content:space-between;
align-items:center;
background-color:#01327e;
color:#fff
}
#index .study .items .mod>span {
font-size:18px
}
#index .study .items .mod .more {
display:inline-flex;
align-items:center;
font-family:'DIN';
font-weight:bold;
font-size:14px;
color:#fff;
transition:all 0.3s
}
#index .study .items .mod .more i {
margin-left:6px;
height:14px;
line-height:14px;
transition:all 0.3s
}
#index .study .items .mod .more:hover i {
transform:rotate(90deg)
}
#index .study .items>.item {
width:100%;
margin-right:0;
margin-bottom:30px
}
#index .study .items>.item ul {
margin-top:20px
}
#index .study .items>.item li {
width:100%;
height:50px;
border-bottom:1px solid #f2f4f5;
line-height:50px
}
#index .study .items>.item li a {
display:block;
width:100%;
transition:all 0.3s
}
#index .study .items>.item li a:hover {
color:#01327e
}
#index .study .items>.shorts {
width:100%
}
#index .study .items>.shorts .type1 {
height:auto
}
#index .study .items>.shorts .type1 li {
height:50px
}
#index .study .items>.shorts .type1 li img {
width:24px
}
#index .study .items>.shorts .type1 li a {
width:calc(100% - 36px)
}
#index .study .items>.shorts .type2 {
margin-top:40px
}
#index .study .items>.shorts .type2 .cover {
width:100%;
height:auto !important
}
#index .study .items>.shorts .type2 .cover a {
display:block;
width:100%;
height:auto !important;
background-size:cover;
background-position:center;
background-image:none
}
#index .study .items>.shorts .type2 .cover a img {
display:block !important;
width:100%
}
#index .study .items>.shorts .type2 li {
height:70px;
margin-top:10px
}
#index .study .items>.shorts .type2 li img {
width:50px
}
#index .study .items>.shorts .type2 li a {
width:calc(100% - 62px)
}
#index .study .items>.shorts .type2 li:first-child {
margin-top:0
}
#index .study .items>.shorts ul {
margin-top:20px
}
#index .study .items>.shorts li {
width:100%;
border-bottom:1px solid #f2f4f5;
display:flex;
align-items:center;
overflow:hidden
}
#index .study .items>.shorts li img {
flex-shrink:0;
margin-right:12px
}
#index .study .items>.shorts li .text {
width:100%
}
#index .study .items>.shorts li a {
display:block;
transition:all 0.3s
}
#index .study .items>.shorts li a:hover {
color:#01327e
}
#index .news {
width:100%;
padding:30px 0 30px;
background-color:#ebedef
}
#index .news .news-block {
width:100%;
margin-top:20px;
display:flex;
align-items:stretch;
justify-content:space-between
}
#index .news .news-block .img {
display:none
}
#index .news .news-block ul {
width:100%;
background-color:#fff;
padding:0 30px
}
#index .news .news-block ul li {
width:100%;
padding:15px 0 15px;
border-bottom:1px solid #f2f4f5
}
#index .news .news-block ul li a {
display:flex;
align-items:center
}
#index .news .news-block ul li a .date {
width:70px;
text-align:center;
white-space:nowrap;
transition:all 0.3s;
flex-shrink:0
}
#index .news .news-block ul li a .date .day {
font-size:56px;
font-weight:bold;
font-family:'DIN';
line-height:56px
}
#index .news .news-block ul li a .date .mon {
font-size:16px;
font-family:'DIN'
}
#index .news .news-block ul li a .text {
width:calc(100% - 110px);
margin-left:40px
}
#index .news .news-block ul li a .text .title {
font-size:18px;
font-weight:bold;
transition:all 0.3s
}
#index .news .news-block ul li a .text .desc {
width:100%;
line-height:28px;
color:#888;
margin-top:10px;
transition:all 0.3s
}
#index .news .news-block ul li a:hover .date, #index .news .news-block ul li a.active .date {
color:#01327e
}
#index .news .news-block ul li a:hover .text .title, #index .news .news-block ul li a.active .text .title {
color:#01327e
}
#index .news .news-block ul li a:hover .text .desc, #index .news .news-block ul li a.active .text .desc {
color:#333
}
#index .news .case-block {
width:100%;
display:flex;
justify-content:space-between;
flex-wrap:wrap
}
#index .news .case-block .item {
display:block;
width:100%;
margin-left:0;
margin-top:20px;
background-color:#fff;
padding:30px 30px 30px;
border-bottom:1px solid #fff;
transition:all 0.3s
}
#index .news .case-block .item .title {
font-size:18px;
font-weight:bold;
transition:all 0.3s
}
#index .news .case-block .item .desc {
width:100%;
line-height:28px;
color:#888;
margin-top:10px;
transition:all 0.3s
}
#index .news .case-block .item:hover {
border-color:#01327e
}
#index .news .case-block .item:hover .title {
color:#01327e
}
#index .news .case-block .item:hover .desc {
color:#333
}
#index .news .case-block .item:nth-child(2n+1) {
margin-left:0
}
#index .contact {
width:100%;
background-image:url(../img/22.png);
background-position:center;
background-size:cover;
padding:140px 0 120px;
text-align:center
}
#index .contact .big {
font-size:30px;
font-weight:bold;
color:#fff
}
#index .contact .small {
font-size:24px;
font-weight:bold;
color:#fff;
margin-top:10px
}
#index .contact .btn {
display:block;
width:200px;
height:50px;
background-color:#fff;
border-radius:25px;
line-height:50px;
text-align:center;
font-size:16px;
color:#01327e;
margin:50px auto 0
}
#prod_detail .main {
padding:40px 60px 20px;
display:block
}
#prod_detail .main .gallary {
width:100%;
flex-shrink:0
}
#prod_detail .main .gallary .view {
width:100%;
height:auto;
border:1px solid #ddd
}
#prod_detail .main .gallary .view img {
width:100%;
height:auto;
cursor:pointer
}
#prod_detail .main .gallary .thumb {
width:100%;
margin-top:10px;
height:auto;
display:flex;
align-items:stretch
}
#prod_detail .main .gallary .thumb .btn {
width:30px;
height:auto;
background-color:#f2f4f5;
color:#fff;
display:flex;
flex-shrink:0;
align-items:center;
justify-content:center;
transition:all 0.3s
}
#prod_detail .main .gallary .thumb .btn i {
font-size:12px
}
#prod_detail .main .gallary .thumb .btn:hover {
background-color:#ebf7ff;
color:#01327e
}
#prod_detail .main .gallary .thumb .swiper {
width:calc(100% - 60px);
padding:0 10px
}
#prod_detail .main .gallary .thumb .swiper .swiper-slide {
width:100px;
height:auto;
border:1px solid #ddd;
cursor:pointer
}
#prod_detail .main .gallary .thumb .swiper .swiper-slide img {
width:100%;
height:100%
}
#prod_detail .main .info {
width:100%;
padding-left:0;
margin-top:20px
}
#prod_detail .main .info .title {
width:100%;
font-size:24px;
font-weight:bold
}
#prod_detail .main .info .num {
width:100%;
position:relative;
margin-top:10px
}
#prod_detail .main .info .num .view-num {
color:#888;
float:left
}
#prod_detail .main .info .num .share-btn {
display:flex;
align-items:center;
width:100px;
height:24px;
float:right
}
#prod_detail .main .info .num .share-btn i {
font-size:20px
}
#prod_detail .main .info .num .share-btn span {
margin-left:10px
}
#prod_detail .main .info .num .share-block {
display:none;
width:77px;
height:30px;
line-height:30px;
position:absolute;
top:-30px;
right:0;
z-index:2
}
#prod_detail .main .info .num .share-block .bdsharebuttonbox {
width:100%;
height:100%;
text-align:right
}
#prod_detail .main .info .title-line {
width:100%;
height:40px;
background-color:#ebf7ff;
padding:0 20px;
font-size:18px;
color:#01327e;
line-height:40px;
margin-top:18px
}
#prod_detail .main .info .desc {
width:100%;
height:auto;
overflow-y:auto;
margin-top:20px;
line-height:24px
}
#prod_detail .main .info .btns {
width:100%;
max-width:unset;
overflow:hidden;
margin-top:20px
}
#prod_detail .main .info .btns a {
display:block;
width:32%;
height:40px;
line-height:40px;
text-align:center;
border:1px solid #ddd;
transition:all 0.3s;
float:left;
margin-left:2%;
margin-bottom:10px
}
#prod_detail .main .info .btns a:nth-child(3n+1) {
margin-left:0
}
#prod_detail .main .info .btns a:hover {
background-color:#01327e;
border-color:#01327e;
color:#fff
}
#prod_detail .main .info>.bot {
width:100%;
overflow:hidden;
border-top:1px solid #ddd;
padding-top:5px;
display:block
}
#prod_detail .main .info .contact {
width:100%;
float:none
}
#prod_detail .main .info .contact .tact-item {
margin-top:14px;
display:inline-flex;
align-items:center;
flex-wrap:wrap
}
#prod_detail .main .info .contact .tact-item .qq {
display:flex;
align-items:center;
justify-content:center;
width:100px;
height:30px;
background-color:#cc0001;
border-radius:15px;
white-space:nowrap;
flex-shrink:0;
margin-right:10px
}
#prod_detail .main .info .contact .tact-item .qq i {
font-size:16px;
color:#fff
}
#prod_detail .main .info .contact .tact-item .qq span {
font-size:12px;
margin-left:6px;
color:#fff
}
#prod_detail .main .info .contact .tact-item .name {
margin-right:10px;
height:30px;
line-height:30px;
white-space:nowrap;
flex-shrink:0
}
#prod_detail .main .info .contact .tact-item .name img {
height:100%
}
#prod_detail .main .info .contact .tact-item .name span {
margin-left:4px
}
#prod_detail .main .info .contact .tact-item .tel {
font-size:18px;
height:30px;
line-height:30px;
font-family:'DIN';
white-space:nowrap;
flex-shrink:0
}
#prod_detail .main .info .contact .tact-item .tel span {
margin-right:10px
}
#prod_detail .main .info .prev-next {
width:100%;
float:none;
margin-top:20px;
padding-left:0
}
#prod_detail .main .info .prev-next a {
width:100%;
display:block;
height:30px;
line-height:30px;
margin-top:5px
}
#contents {
margin-top:10px
}
#contents .main {
overflow:hidden
}
#contents .scroll {
width:100%;
float:left
}
#contents .scroll .scroll-item {
margin-bottom:10px;
background-color:#fff;
padding:20px 60px 30px
}
#contents .scroll .title-line {
width:100%;
height:50px;
background-color:#ebf7ff;
padding:0 20px;
font-size:18px;
color:#01327e;
line-height:50px
}
#contents .scroll .title-line a {
display:block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
background-color:#01327e;
color:#fff;
border-radius:15px;
float:right;
margin-top:10px;
font-size:14px
}
#contents .scroll .content {
width:100%;
padding:20px 0
}
#contents .scroll .content img {
max-width:100%
}
#contents .scroll .down-list {
width:100%;
overflow:hidden
}
#contents .scroll .down-list .item {
display:block;
float:left;
margin-left:2%;
width:32%;
margin-top:10px
}
#contents .scroll .down-list .item .img {
width:100%;
border:1px solid #ddd;
transition:all 0.3s
}
#contents .scroll .down-list .item .img img {
width:100%
}
#contents .scroll .down-list .item .img:hover {
border-color:#01327e
}
#contents .scroll .down-list .item .title {
font-size:14px;
margin-top:6px
}
#contents .scroll .down-list .item:nth-child(3n+1) {
margin-left:0
}
#contents .scroll .case-list .item {
display:block;
width:100%;
padding:20px;
border:1px solid #d3eeff;
margin-top:10px
}
#contents .scroll .case-list .item .title {
font-size:18px
}
#contents .scroll .case-list .item .desc {
line-height:28px
}
#contents .scroll .prob-list .item {
display:block;
width:100%;
padding:20px 0;
border-bottom:1px solid #d3eeff;
margin-top:10px
}
#contents .scroll .prob-list .item .title {
font-size:18px
}
#contents .scroll .prob-list .item .desc {
line-height:28px
}
#contents .scroll .recom {
width:100%;
margin-top:10px;
margin-bottom:100px
}
#contents .scroll .recom .title-line {
width:100%;
text-align:center;
background-color:#d3eeff
}
#contents .scroll .recom .list {
width:100%;
overflow:hidden;
margin-top:10px
}
#contents .scroll .recom .list .item {
display:block;
width:23.5%;
margin-left:2%;
float:left
}
#contents .scroll .recom .list .item .img {
width:100%
}
#contents .scroll .recom .list .item .img img {
width:100%
}
#contents .scroll .recom .list .item .title {
width:100%;
height:50px;
line-height:50px;
text-align:center;
font-size:16px;
background-color:#d3eeff
}
#contents .scroll .recom .list .item:nth-child(4n+1) {
margin-left:0
}
#contents .target {
display:none
}
}
@media screen and (max-width: 750px) {
#contact .contact .main {
display:block
}
#contact .contact .main .texts {
width:100%;
padding:30px 5%
}
#contact .contact .main .texts .big {
font-size:38px;
line-height:38px
}
#contact .contact .main .texts .name {
font-size:18px;
margin-top:15px
}
#contact .contact .main .texts .icon-line {
margin-top:20px
}
#contact .contact .main .texts .icon-line i {
font-size:20px
}
#contact .contact .main .texts .icon-line span {
font-size:14px;
margin-left:15px
}
#contact .contact .main .texts .way {
margin-top:30px
}
#contact .contact .main .texts .way .title {
font-size:16px
}
#contact .contact .main .texts .way .items p {
font-size:16px;
margin-right:15px
}
#contact .contact .main .texts .wechat {
width:100%;
margin-top:40px
}
#contact .contact .main .texts .wechat .img {
width:120px;
height:120px
}
#contact .contact .main .texts .wechat .rights {
width:calc(100% - 120px);
margin-left:16px
}
#contact .contact .main .texts .wechat .rights .big {
font-size:18px;
line-height:24px
}
#contact .contact .main .texts .wechat .rights .desc {
font-size:16px;
margin-top:10px
}
#contact .contact .main .texts .wechat .rights .small {
margin-top:10px;
width:100%
}
#contact .contact .main #map {
width:100%;
height:500px
}
#contact .feed {
width:100%;
padding-top:10px;
padding-bottom:50px
}
#contact .feed .main {
padding:40px 30px
}
#contact .feed .main .title {
width:100%;
font-size:20px;
line-height:20px
}
#contact .feed .main .form {
width:100%;
margin-top:40px
}
#contact .feed .main .form .input-line {
width:100%;
flex-wrap:wrap
}
#contact .feed .main .form .input-line input {
width:49%;
height:50px;
padding:0 20px;
margin-bottom:10px
}
#contact .feed .main .form .textarea {
width:100%;
height:200px;
margin-top:10px
}
#contact .feed .main .form .textarea textarea {
padding:10px 20px
}
#contact .feed .main .form .bot-line {
flex-wrap:wrap
}
#contact .feed .main .form .bot-line .yzm {
display:flex;
width:100%
}
#contact .feed .main .form .bot-line .yzm input {
width:100%
}
#contact .feed .main .form .bot-line .yzm img {
width:100px;
flex-shrink:0
}
#contact .feed .main .form .bot-line .sub-btn {
width:100%;
margin-top:20px
}
#contact .feed .main .form .bot-line .sub-btn .btn {
width:100%
}
#study .study-tip .main {
padding:20px 20px;
line-height:24px
}
#study .tab {
width:100%;
display:flex;
justify-content:center
}
#study .tab .item {
display:block;
width:33%;
max-width:260px;
height:40px;
line-height:40px;
text-align:center;
background-color:#d3eeff;
position:relative;
margin:0 5px;
white-space:nowrap
}
#study .tab .item::after {
content:'';
display:block;
width:6px;
height:6px;
transform:rotate(-45deg) translate(-50%, 20%);
background-color:transparent;
position:absolute;
bottom:0;
left:50%
}
#study .tab .item.active, #study .tab .item:hover {
background-color:#014193;
color:#fff
}
#study .tab .item.active::after, #study .tab .item:hover::after {
background-color:#014193
}
#gall {
margin-top:20px;
margin-bottom:30px
}
#gall .main {
padding:20px;
height:500px
}
#ques {
margin-top:20px;
margin-bottom:30px
}
#ques .main {
padding:20px
}
#ques .main .list {
margin-top:20px
}
#ques .main .list a {
width:100%;
height:50px;
line-height:50px
}
#ques .main .list a .date {
width:100px
}
#ques .main .list a .title {
font-size:14px;
width:calc(100% - 120px);
float:left;
transition:all 0.3s
}
#ques .main .list a i {
font-size:18px;
color:#ddd;
float:right;
transition:all 0.3s
}
#ques .main .list a:hover .title {
color:#014193
}
#ques .main .list a:hover i {
color:#014193
}
#ques .load-more {
margin-top:30px
}
#explan {
margin-top:20px;
margin-bottom:30px
}
#explan .main .item {
padding:0 20px
}
#explan .main .item .tops {
width:100%;
height:70px;
display:flex;
justify-content:space-between;
align-items:center
}
#explan .main .item .tops .title {
font-size:16px
}
#explan .main .item .tops .btn {
display:flex;
align-items:center;
justify-content:center;
width:100px;
height:30px;
border-radius:15px;
background-color:#d3eeff;
transition:all 0.3s
}
#explan .main .item .tops .btn::before {
content:'展开';
display:inline-block;
color:#01327e;
transition:all 0.3s
}
#explan .main .item .tops .btn i {
color:#01327e;
font-size:12px;
margin-left:8px;
transition:all 0.3s
}
#explan .main .item .tops .btn.active {
background-color:#01327e
}
#explan .main .item .tops .btn.active::before {
content:'收起';
color:#fff
}
#explan .main .item .tops .btn.active i {
color:#fff;
transform:rotate(-180deg)
}
#explan .main .item .bots {
display:none;
padding:20px;
background-color:#f2f4f5;
line-height:24px;
margin-bottom:20px
}
#explan .main .item .bots img {
max-width:100%
}
#sample {
margin-top:20px
}
#sample .item {
width:49%;
background-color:#fff;
margin-left:2%;
margin-bottom:20px;
padding:15px 10px
}
#sample .item .img {
width:auto;
height:60px;
flex-shrink:0
}
#sample .item .img img {
width:auto;
height:100%
}
#sample .item .rights {
width:calc(100% - 94px);
padding-left:20px
}
#sample .item .rights .date {
color:#888;
font-family:'DIN'
}
#sample .item .rights .name {
display:block;
font-size:16px;
line-height:18px;
margin-top:5px
}
#sample .item .rights .btn {
width:100px;
height:30px;
border-radius:15px;
line-height:30px;
margin-top:12px;
font-size:12px
}
#sample .item:nth-child(3n+1) {
margin-left:2%
}
#sample .item:nth-child(2n+1) {
margin-left:0
}
#sample .load-more {
margin-top:30px;
margin-bottom:30px
}
#news .list .item {
width:100%;
height:auto;
padding:20px 0;
transition:all 0.3s
}
#news .list .item .main {
width:94%
}
#news .list .item a {
display:block;
width:100%;
height:100%
}
#news .list .item .img {
width:100%;
height:auto
}
#news .list .item .img img {
width:100%;
height:auto
}
#news .list .item .date {
display:none
}
#news .list .item .texts {
width:100%;
margin-top:10px
}
#news .list .item .texts .title {
font-size:16px
}
#news .list .item .texts .desc {
line-height:28px;
margin-top:10px
}
#news .list .item .btn {
opacity:1;
margin-left:0;
margin-top:10px
}
#news .list .item:hover {
background-color:#d3eeff
}
#news .list .item:hover .date {
color:#01327e
}
#news .list .item:hover .texts .title {
color:#01327e
}
#news .list .item:hover .btn {
opacity:1
}
#news .load-more {
margin-top:30px;
margin-bottom:30px
}
#news .study-tip {
margin-bottom:15px
}
#news .study-tip .main {
padding:20px 20px;
line-height:24px
}
#news .detail {
margin-bottom:30px
}
#news .detail .main {
background-color:#fff;
padding:30px 20px 0
}
#news .detail .main .title {
text-align:center;
font-size:18px
}
#news .detail .main .date {
text-align:center;
margin-top:10px;
font-size:12px
}
#news .detail .main .date span {
margin:0 10px;
display:block
}
#news .detail .main .content {
margin-top:20px;
padding:20px 0;
line-height:24px;
border-top:1px solid #ddd
}
#news .detail .main .content img {
max-width:100%
}
#news .detail .main .prev-next {
width:100%;
padding:15px 0;
display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid #ddd
}
#news .detail .main .prev-next .lefts {
width:80%
}
#news .detail .main .prev-next .lefts a {
margin:10px 0;
display:block
}
#news .detail .main .prev-next .back {
display:block;
width:100px;
height:30px;
border-radius:15px;
line-height:30px;
text-align:center;
background-color:#d3eeff;
color:#01327e
}
#notice {
background-color:#f2f4f5
}
#notice .contents {
padding-bottom:30px
}
#notice .contents .main {
overflow:hidden;
padding:0 20px 20px;
background-color:#fff
}
#notice .contents .main .item {
width:100%;
margin-top:30px
}
#notice .contents .main .item .mod {
height:18px;
line-height:18px;
font-size:16px;
border-left:4px solid #01327e;
color:#01327e;
padding-left:10px;
margin-bottom:20px
}
#notice .contents .main .item .content {
font-size:14px;
line-height:24px
}
#notice .contents .main .item .content img {
max-width:100%
}
#calc {
margin-top:20px;
margin-bottom:20px
}
#calc .main {
background-color:#fff;
padding:20px 20px
}
#calc .main .calc-lines {
margin-top:30px
}
#calc .main .calc-line {
display:block;
margin-bottom:30px
}
#calc .main .calc-line .item {
width:100%
}
#calc .main .calc-line .item .title {
width:100%;
height:50px;
line-height:50px;
padding:0 20px;
background-color:#d3eeff;
font-size:16px
}
#calc .main .calc-line .item .tops {
width:100%;
height:45px;
border-bottom:1px solid #ddd;
line-height:45px;
font-size:16px;
font-weight:500;
margin-top:20px
}
#calc .main .calc-line .item .block {
margin:20px 0
}
#calc .main .calc-line .item .block .input {
width:100%
}
#calc .main .calc-line .item .block .input .label {
width:100%;
font-size:14px
}
#calc .main .calc-line .item .block .input input {
width:100%;
height:40px;
border:1px solid #ddd;
margin-top:8px;
padding:0 10px
}
#calc .main .calc-line .item .block .input input[readonly] {
background-color:#f2f4f5;
border-color:#f2f4f5;
color:#01327e
}
#calc .main .calc-line .item .block .input select {
width:100%;
height:40px;
border:1px solid #ddd;
margin-top:8px;
padding:0 10px
}
#calc .main .calc-line .item .block1 {
width:100%;
display:block
}
#calc .main .calc-line .item .block1 .left {
width:100%
}
#calc .main .calc-line .item .block1 .left .img {
width:100%
}
#calc .main .calc-line .item .block1 .left .img img {
width:100%;
max-width:unset
}
#calc .main .calc-line .item .block1 .left .inputs {
width:100%;
display:flex;
justify-content:space-between;
margin-top:29px
}
#calc .main .calc-line .item .block1 .left .inputs .input {
width:45%;
max-width:unset
}
#calc .main .calc-line .item .block1 .right {
width:100%;
display:flex;
flex-direction:column;
justify-content:flex-end
}
#calc .main .calc-line .item .block1 .right .input {
margin-top:35px
}
#calc .main .calc-line .item .block2 {
width:100%;
display:flex;
justify-content:space-between
}
#calc .main .calc-line .item .block2 .input {
width:45%
}
#calc .main .calc-line .item .block2 .icon {
width:10%;
text-align:center
}
#calc .main .calc-line .item .block3 {
width:100%;
display:flex;
justify-content:space-between;
align-items:stretch
}
#calc .main .calc-line .item .block3 .left {
width:45%
}
#calc .main .calc-line .item .block3 .left .img {
width:100%
}
#calc .main .calc-line .item .block3 .left .img img {
width:100%
}
#calc .main .calc-line .item .block3 .left .inputs {
width:100%;
display:flex;
justify-content:space-between;
margin-top:29px
}
#calc .main .calc-line .item .block3 .left .inputs .input {
width:45%;
max-width:100px
}
#calc .main .calc-line .item .block3 .right {
width:45%;
display:flex;
flex-direction:column
}
#calc .main .calc-line .item .block3 .right .input {
margin-bottom:20px
}
#calc .main .calc-line .item .block4 {
width:100%
}
#calc .main .calc-line .item .block4 .img {
width:100%
}
#calc .main .calc-line .item .block4 .img img {
width:100%
}
#calc .main .calc-line .item .block4 .inputs {
width:100%;
display:flex;
margin-top:29px
}
#calc .main .calc-line .item .block4 .inputs .input {
width:30%;
max-width:100px;
margin-left:5%
}
#calc .main .calc-line .item .block4 .inputs .input:first-child {
margin-left:0
}
#calc .main .calc-line .item .block5 {
width:100%;
display:flex
}
#calc .main .calc-line .item .block5 .input {
width:30%;
margin-left:5%
}
#calc .main .calc-line .item .block5 .input:nth-child(3n+1) {
margin-left:0
}
#calc .main .table {
width:100%;
margin-top:60px;
overflow-x:auto
}
#calc .main .table table {
width:100%;
table-layout:fixed;
border:1px solid #ddd
}
#calc .main .table table th {
height:50px;
background-color:#d3eeff;
font-size:16px;
text-align:center;
padding:0 10px;
white-space:nowrap
}
#calc .main .table table td {
padding:10px 20px
}
#calc .main .table table td .goods {
display:block;
align-items:center
}
#calc .main .table table td .goods img {
width:60px;
height:60px;
max-width:unset
}
#calc .main .table table td .goods span {
display:block;
margin-left:0
}
#calc .main .table table tbody tr {
transition:all 0.3s
}
#calc .main .table table tbody tr:hover {
background-color:#f4fbff
}
#about .about {
display:block;
background-color:#fff
}
#about .about .texts {
width:100%;
padding-left:3%;
padding-top:30px;
padding-bottom:30px;
padding-right:3%
}
#about .about .texts .slogen {
font-size:24px;
font-weight:bold
}
#about .about .texts .content {
width:100%;
height:px;
overflow-x:hidden;
overflow-y:auto;
font-size:16px;
line-height:32px;
margin-top:20px;
-webkit-overflow-scrolling:touch
}
#about .about .texts .content img {
max-width:100%
}
#about .about .texts .content::-webkit-scrollbar {
width:6px;
height:6px;
background-color:#f5f5f5
}
#about .about .texts .content::-webkit-scrollbar-track {
border-radius:3px;
background-color:#f5f5f5
}
#about .about .texts .content::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#ddd
}
#about .about .texts .items {
width:100%;
display:flex;
justify-content:space-between;
margin-top:40px
}
#about .about .texts .items .item {
color:#01327e
}
#about .about .texts .items .item .en {
font-size:14px;
text-transform:uppercase
}
#about .about .texts .items .item .num {
font-size:50px;
line-height:40px
}
#about .about .texts .items .item .desc {
font-size:14px;
margin-top:10px
}
#about .about .img {
width:100%;
height:400px;
flex-shrink:0;
background-image:url(../img/33.png);
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
justify-content:center
}
#about .about .img i.play {
display:block;
width:54px;
height:54px;
background-image:url(../img/34.png);
background-size:100%;
cursor:pointer;
transition:all 0.3s
}
#about .about .img i.play:hover {
transform:scale(1.1)
}
#about .dev {
width:100%;
height:auto;
display:block;
align-items:stretch;
border-top:1px solid #ddd
}
#about .dev .imgs {
width:100%;
height:480px;
position:relative;
flex-shrink:0
}
#about .dev .imgs .swiper {
width:100%;
height:100%
}
#about .dev .imgs .swiper .swiper-container {
height:100%
}
#about .dev .imgs .swiper .swiper-container .swiper-wrapper {
height:100%
}
#about .dev .imgs .swiper .swiper-container .swiper-wrapper .swiper-slide {
height:100%;
background-position:center;
background-size:cover
}
#about .dev .imgs .btns {
position:absolute;
top:50%;
right:0;
transform:translateY(-50%);
width:70px;
height:140px;
z-index:3
}
#about .dev .imgs .btns a {
display:block;
width:70px;
height:70px;
text-align:center;
line-height:70px
}
#about .dev .imgs .btns a i {
font-size:24px
}
#about .dev .imgs .btns a.prev {
background-color:#fff;
color:#01327e
}
#about .dev .imgs .btns a.next {
background-color:#01327e;
color:#fff
}
#about .dev .years {
width:100%;
height:246px;
background-color:#fff;
overflow:hidden
}
#about .dev .years .swiper-container {
height:100%
}
#about .dev .years .swiper-container .swiper-wrapper {
height:100%
}
#about .dev .years .swiper-container .swiper-wrapper .swiper-slide {
width:420px;
height:100%;
padding:30px 30px 30px 30px;
border-right:1px solid #ddd
}
#about .dev .years .num {
font-size:30px;
font-family:'DIN';
transition:all 0.3s
}
#about .dev .years i {
display:block;
width:40px;
height:2px;
margin-top:15px;
background-color:#333;
transition:all 0.3s
}
#about .dev .years .content {
width:100%;
height:auto;
overflow-y:auto;
font-size:14px;
line-height:28px;
margin-top:20px;
-webkit-overflow-scrolling:touch
}
#about .dev .years .content::-webkit-scrollbar {
width:6px;
height:6px;
background-color:#f5f5f5
}
#about .dev .years .content::-webkit-scrollbar-track {
border-radius:3px;
background-color:#f5f5f5
}
#about .dev .years .content::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#ddd
}
#about .dev .years .content img {
max-width:100%
}
#about .dev .years .swiper-slide-active .num {
color:#01327e
}
#about .dev .years .swiper-slide-active i {
background-color:#01327e
}
#about .advantage {
width:100%;
padding:30px 0;
background-color:#f2f4f5
}
#about .advantage .item {
width:100%;
height:200px;
display:flex;
justify-content:space-between;
margin-bottom:10px
}
#about .advantage .item .swiper {
width:42.25%;
height:200px
}
#about .advantage .item .swiper .swiper-slide {
height:200px;
background-position:center;
background-size:cover
}
#about .advantage .item .texts {
width:57.75%;
height:100%;
padding:30px 20px;
background-color:#fff
}
#about .advantage .item .texts .title {
font-size:16px;
font-weight:bold
}
#about .advantage .item .texts .desc {
font-size:14px;
line-height:30px;
margin-top:10px
}
#about .advantage .item:nth-child(2n) {
flex-direction:row-reverse
}
#about .honor {
width:100%;
padding:30px 0
}
#about .honor .swiper-slide {
width:29%
}
#about .honor .swiper-slide img {
width:100%
}
#about .team {
width:100%
}
#about .team img {
width:100%
}
#index .banner {
height:240px
}
#index .floor-top .tab a {
margin-left:20px;
font-size:14px
}
#index .mod-title {
display:inline-block
}
#index .mod-title i {
display:block;
width:40px;
height:4px;
background-color:#01327e
}
#index .mod-title .cn {
display:block;
width:100%;
font-size:16px;
font-weight:bold;
line-height:16px;
margin-top:10px;
white-space:nowrap
}
#index .mod-title .en {
display:block;
width:100%;
font-size:12px;
font-family:'Arial';
text-transform:uppercase;
line-height:12px;
margin-top:10px;
white-space:nowrap
}
#index .more {
display:inline-flex;
align-items:center;
font-family:'DIN';
font-weight:bold;
font-size:14px;
transition:all 0.3s
}
#index .more i {
margin-left:6px;
height:14px;
line-height:14px;
transition:all 0.3s
}
#index .more:hover i {
transform:rotate(90deg)
}
#index .floor1 {
width:100%;
padding:30px 0 30px;
background-color:#fff
}
#index .floor1 .items {
width:100%;
margin-top:20px;
display:flex;
flex-wrap:wrap;
justify-content:space-between
}
#index .floor1 .items .item {
display:block;
width:49%;
margin-bottom:10px;
background-color:#f2f4f5;
border:1px solid #f2f4f5;
transition:all 0.3s
}
#index .floor1 .items .item .img {
width:100%;
height:auto
}
#index .floor1 .items .item .img img {
width:100%;
height:auto
}
#index .floor1 .items .item .text {
width:100%;
padding:14px 14px
}
#index .floor1 .items .item .text .title {
font-size:16px;
line-height:16px;
margin-bottom:10px
}
#index .floor1 .items .item .text .desc-line {
line-height:14px;
color:#888;
margin-top:10px
}
#index .floor1 .items .item:hover {
background-color:#fff;
border-color:#01327e
}
#index .floor2 {
width:100%;
padding:30px 0 10px;
background-color:#ebedef
}
#index .floor2 .blocks {
width:100%
}
#index .floor2 .items {
width:100%;
margin-top:20px;
display:none;
justify-content:space-between
}
#index .floor2 .items.active {
display:block
}
#index .floor2 .items .item {
display:inline-flex;
align-items:center;
width:100%;
height:140px;
background-color:#fff;
overflow:hidden;
margin-bottom:10px
}
#index .floor2 .items .item .img {
width:110px;
height:110px;
min-width:110px
}
#index .floor2 .items .item .img img {
width:110px;
height:110px
}
#index .floor2 .items .item .text {
width:calc(100% - 110px);
padding:10px
}
#index .floor2 .items .item .text .title {
font-size:16px;
line-height:24px;
margin-bottom:10px
}
#index .floor2 .items .item .text .desc-line {
font-size:12px;
line-height:16px;
color:#888;
margin-top:6px
}
#index .floor2 .items .item:hover {
background-color:#fff;
border-color:#01327e
}
#index .floor3 {
width:100%;
padding:30px 0 10px;
background-color:#fff
}
#index .floor3 .items {
width:100%;
margin-top:120px;
display:flex;
flex-wrap:wrap;
justify-content:space-between
}
#index .floor3 .items .item {
width:49%;
margin-left:2%;
margin-bottom:10px;
position:relative
}
#index .floor3 .items .item:nth-child(3n+1) {
margin-left:2%
}
#index .floor3 .items .item:nth-child(2n+1) {
margin-left:0
}
#index .floor3 .items .item .img {
width:100%;
height:auto
}
#index .floor3 .items .item .img img {
width:100%;
height:auto;
-webkit-filter:grayscale(0);
-moz-filter:grayscale(0);
-ms-filter:grayscale(0);
-o-filter:grayscale(0);
filter:grayscale(0);
filter:gray;
transform:all 0.3s
}
#index .floor3 .items .item i.mask {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-color:rgba(0, 0, 0, 0.3);
transition:all 0.3s
}
#index .floor3 .items .item .con {
width:100%;
text-align:center;
position:absolute;
top:50%;
left:0;
margin-top:-30px;
color:#fff;
opacity:1;
transition:all 0.3s
}
#index .floor3 .items .item .con i {
display:block;
font-size:28px;
margin:0 auto
}
#index .floor3 .items .item .con span {
font-size:14px;
margin-top:14px
}
#index .about {
width:100%;
position:relative;
padding:30px 0 30px;
background-color:#ebedef
}
#index .about .img {
width:100%;
padding-left:0
}
#index .about .img img {
width:100%;
height:auto
}
#index .about .texts {
width:100%;
padding:20px 20px 20px 20px;
padding-left:20px;
position:relative;
top:0;
left:0;
z-index:3;
transform:translateY(0);
background-color:#fff
}
#index .about .texts .logo {
height:24px
}
#index .about .texts .logo img {
height:24px
}
#index .about .texts .name {
font-size:18px;
font-weight:bold;
margin-top:10px
}
#index .about .texts .desc {
font-size:14px;
line-height:26px;
margin-top:14px
}
#index .thumb {
width:100%;
padding:0 0 70px;
background-color:#ebedef;
position:relative
}
#index .thumb .swiper {
width:100%;
height:auto;
position:relative;
z-index:1
}
#index .thumb .swiper .swiper-slide img {
width:100%;
height:auto;
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:gray;
transform:all 0.3s
}
#index .thumb .swiper .swiper-slide.swiper-slide-active img {
-webkit-filter:grayscale(0);
-moz-filter:grayscale(0);
-ms-filter:grayscale(0);
-o-filter:grayscale(0);
filter:grayscale(0);
filter:gray
}
#index .thumb .bar {
width:94%;
max-width:800px;
height:88px;
overflow:hidden;
position:absolute;
left:50%;
bottom:30px;
z-index:3;
transform:translateX(-50%);
background-color:#fff;
padding:10px 20px 10px 20px;
display:flex;
justify-content:space-between;
align-items:center
}
#index .thumb .bar .t-swiper {
width:calc(100% - 130px);
height:100%
}
#index .thumb .bar .t-swiper .swiper-slide {
height:40px
}
#index .thumb .bar .t-swiper .swiper-slide .flex {
display:flex;
align-items:center
}
#index .thumb .bar .t-swiper .swiper-slide .flex .icon {
width:30px;
height:30px;
color:#01327e
}
#index .thumb .bar .t-swiper .swiper-slide .flex .icon i {
font-size:30px;
height:30px;
display:block
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text {
margin-left:20px
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text .big {
font-size:14px;
line-height:14px;
font-weight:bold
}
#index .thumb .bar .t-swiper .swiper-slide .flex .text .small {
line-height:14px;
margin-top:10px
}
#index .thumb .bar .navigation {
width:70px;
display:flex;
justify-content:space-between;
align-items:center
}
#index .thumb .bar .navigation i {
font-size:14px;
transition:all 0.3s
}
#index .thumb .bar .navigation i:hover {
color:#01327e
}
#index .thumb .bar .navigation .c-page {
font-size:12px
}
#index .thumb .bar .navigation .c-page #current {
font-size:14px;
color:#01327e
}
#index .study {
width:100%;
padding:30px 0 30px;
background-color:#fff
}
#index .study .items {
width:100%;
margin-top:20px;
display:block;
justify-content:space-between
}
#index .study .items .mod {
width:100%;
height:40px;
padding:0 14px;
display:flex;
justify-content:space-between;
align-items:center;
background-color:#01327e;
color:#fff
}
#index .study .items .mod>span {
font-size:16px
}
#index .study .items .mod .more {
display:inline-flex;
align-items:center;
font-family:'DIN';
font-weight:bold;
font-size:14px;
color:#fff;
transition:all 0.3s
}
#index .study .items .mod .more i {
margin-left:6px;
height:14px;
line-height:14px;
transition:all 0.3s
}
#index .study .items .mod .more:hover i {
transform:rotate(90deg)
}
#index .study .items>.item {
width:100%;
margin-right:0;
margin-bottom:30px
}
#index .study .items>.item ul {
margin-top:10px
}
#index .study .items>.item li {
width:100%;
height:50px;
padding:0 14px;
border-bottom:1px solid #f2f4f5;
line-height:50px
}
#index .study .items>.item li a {
display:block;
width:100%;
transition:all 0.3s
}
#index .study .items>.item li a:hover {
color:#01327e
}
#index .study .items>.shorts {
width:100%
}
#index .study .items>.shorts .type1 li {
padding:0 14px;
height:50px
}
#index .study .items>.shorts .type1 li img {
width:24px
}
#index .study .items>.shorts .type1 li a {
width:calc(100% - 36px)
}
#index .study .items>.shorts .type2 {
margin-top:30px
}
#index .study .items>.shorts .type2 li {
padding:0 14px;
height:70px;
margin-top:10px
}
#index .study .items>.shorts .type2 li img {
width:50px
}
#index .study .items>.shorts .type2 li a {
width:calc(100% - 62px)
}
#index .study .items>.shorts .type2 li:first-child {
margin-top:0
}
#index .study .items>.shorts ul {
margin-top:10px
}
#index .study .items>.shorts li {
width:100%;
border-bottom:1px solid #f2f4f5;
display:flex;
align-items:center;
overflow:hidden
}
#index .study .items>.shorts li img {
flex-shrink:0;
margin-right:12px
}
#index .study .items>.shorts li .text {
width:100%
}
#index .study .items>.shorts li a {
display:block;
transition:all 0.3s
}
#index .study .items>.shorts li a:hover {
color:#01327e
}
#index .news {
width:100%;
padding:30px 0 30px;
background-color:#ebedef
}
#index .news .news-block {
width:100%;
margin-top:20px;
display:flex;
align-items:stretch;
justify-content:space-between
}
#index .news .news-block .img {
display:none
}
#index .news .news-block ul {
width:100%;
background-color:#fff;
padding:0
}
#index .news .news-block ul li {
width:100%;
padding:15px 0 15px;
border-bottom:1px solid #f2f4f5
}
#index .news .news-block ul li a {
display:flex;
align-items:center
}
#index .news .news-block ul li a .date {
width:70px;
text-align:center;
white-space:nowrap;
transition:all 0.3s;
flex-shrink:0
}
#index .news .news-block ul li a .date .day {
font-size:28px;
font-weight:bold;
font-family:'DIN';
line-height:28px
}
#index .news .news-block ul li a .date .mon {
font-size:14px;
font-family:'DIN'
}
#index .news .news-block ul li a .text {
width:calc(100% - 95px);
margin-left:14px
}
#index .news .news-block ul li a .text .title {
font-size:14px;
font-weight:bold;
transition:all 0.3s
}
#index .news .news-block ul li a .text .desc {
width:100%;
font-size:12px;
line-height:20px;
color:#888;
margin-top:5px;
transition:all 0.3s
}
#index .news .news-block ul li a:hover .date, #index .news .news-block ul li a.active .date {
color:#01327e
}
#index .news .news-block ul li a:hover .text .title, #index .news .news-block ul li a.active .text .title {
color:#01327e
}
#index .news .news-block ul li a:hover .text .desc, #index .news .news-block ul li a.active .text .desc {
color:#333
}
#index .news .case-block {
width:100%;
display:flex;
justify-content:space-between;
flex-wrap:wrap
}
#index .news .case-block .item {
display:block;
width:100%;
margin-left:0;
margin-top:10px;
background-color:#fff;
padding:15px;
border-bottom:1px solid #fff;
transition:all 0.3s
}
#index .news .case-block .item .title {
font-size:14px;
font-weight:bold;
transition:all 0.3s
}
#index .news .case-block .item .desc {
width:100%;
font-size:12px;
line-height:20px;
color:#888;
margin-top:5px;
transition:all 0.3s
}
#index .news .case-block .item:hover {
border-color:#01327e
}
#index .news .case-block .item:hover .title {
color:#01327e
}
#index .news .case-block .item:hover .desc {
color:#333
}
#index .news .case-block .item:nth-child(2n+1) {
margin-left:0
}
#index .contact {
width:100%;
background-image:url(../img/22.png);
background-position:center;
background-size:cover;
padding:50px 0 40px;
text-align:center
}
#index .contact .big {
font-size:20px;
font-weight:bold;
color:#fff
}
#index .contact .small {
font-size:14px;
font-weight:bold;
color:#fff;
margin-top:10px
}
#index .contact .btn {
display:block;
width:120px;
height:40px;
background-color:#fff;
border-radius:20px;
line-height:40px;
text-align:center;
font-size:14px;
color:#01327e;
margin:20px auto 0
}
.cate .main .tops {
}
.cate .main .tops::-webkit-scrollbar {
display:none
}
.cate .main .tops .scroll {
}
.cate .main .tops .scroll a {
display:inline-block;
white-space:nowrap;
padding:0 14px;
height:50px;
line-height:50px;
color:#fff;
transition:all 0.3s
}
.cate .main .tops .scroll a:hover, .cate .main .tops .scroll a.active {
background-color:#fff;
color:#01327e
}
.cate .main .tops .scroll a:first-child {
}
.cate .main .tops .scroll a:last-child {
margin-right:14px
}
.cate .main .bots {
display:flex;
width:100%;
height:50px;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch
}
.cate .main .bots .scroll {
display:none;
padding:0
}
.cate .main .bots .scroll a {
display:inline-block;
white-space:nowrap;
margin-left:20px;
height:50px;
line-height:50px;
transition:all 0.3s
}
.cate .main .bots .scroll a:hover, .cate .main .bots .scroll a.active {
color:#01327e
}
.cate .main .bots .scroll a:last-child {
margin-right:20px
}
.cate .main .bots .scroll.flex {
display:flex !important
}
.cate .main .bots .scroll.block {
display:flex !important
}
.prod-tip {
width:100%;
background-color:#f2f4f5;
margin-top:20px
}
.prod-tip .main {
background-color:#fff;
padding:20px;
font-size:14px;
line-height:24px
}
.prod-list {
width:100%;
background-color:#f2f4f5
}
.prod-list .item {
width:100%;
padding:20px;
background-color:#fff;
margin-top:10px;
display:block
}
.prod-list .item .img {
width:100%;
height:auto;
flex-shrink:0
}
.prod-list .item .img img {
width:100%;
height:100%
}
.prod-list .item .rights {
width:100%;
margin-left:0
}
.prod-list .item .rights .title {
font-size:16px;
margin-top:10px
}
.prod-list .item .rights .desc {
font-size:14px;
line-height:20px;
margin-top:10px
}
.prod-list .item .rights .bots {
width:100%;
display:block;
margin-top:10px
}
.prod-list .item .rights .bots .labels {
width:100%;
overflow:hidden
}
.prod-list .item .rights .bots .labels .label {
float:left;
margin-right:80px;
margin-top:5px
}
.prod-list .item .rights .bots .more {
display:block;
width:100px;
height:30px;
line-height:30px;
margin-top:15px
}
.prod-list .item .rights .contact {
width:100%;
border-top:1px solid #ddd;
margin-top:15px
}
.prod-list .item .rights .contact .tact-item {
margin-top:20px;
display:inline-flex;
align-items:center;
flex-wrap:wrap;
margin-right:50px
}
.prod-list .item .rights .contact .tact-item .qq {
display:none;
align-items:center;
justify-content:center;
width:100px;
height:30px;
background-color:#cc0001;
border-radius:15px;
white-space:nowrap;
flex-shrink:0;
margin-right:10px
}
.prod-list .item .rights .contact .tact-item .qq.ismobile {
display:flex
}
.prod-list .item .rights .contact .tact-item .qq i {
font-size:16px;
color:#fff
}
.prod-list .item .rights .contact .tact-item .qq span {
font-size:12px;
margin-left:6px;
color:#fff
}
.prod-list .item .rights .contact .tact-item .name {
margin-right:10px;
height:30px;
line-height:30px;
white-space:nowrap;
flex-shrink:0
}
.prod-list .item .rights .contact .tact-item .name img {
height:100%
}
.prod-list .item .rights .contact .tact-item .name span {
margin-left:4px
}
.prod-list .item .rights .contact .tact-item .tel {
font-size:18px;
height:30px;
line-height:30px;
font-family:'DIN';
white-space:nowrap;
flex-shrink:0
}
.prod-list .item .rights .contact .tact-item .tel span {
margin-right:10px
}
.hot {
width:100%;
margin-top:30px;
margin-bottom:20px
}
.hot .main {
display:block
}
.hot .label {
width:100%;
flex-shrink:0;
white-space:nowrap;
margin-top:10px;
height:16px;
line-height:16px;
padding-left:14px
}
.hot .links {
width:100%;
overflow:hidden
}
.hot .links a {
float:left;
padding:0 14px;
height:16px;
line-height:16px;
margin-top:10px
}
.prob {
width:100%;
margin-top:20px;
margin-bottom:30px
}
.prob .main {
background-color:#fff
}
.prob .tops {
width:100%;
height:40px;
padding:0 14px;
line-height:40px;
background-color:#d3eeff;
font-size:16px
}
.prob .list {
width:100%;
overflow:hidden;
padding:8px 14px
}
.prob .list a {
display:block;
float:left;
width:100%;
height:34px;
line-height:34px;
margin-top:8px;
border-bottom:1px solid #f2f4f5;
padding:0;
margin-left:0;
transition:all 0.3s
}
.prob .list a:nth-child(2n+1) {
margin-left:0
}
.prob .list a:hover {
color:#01327e
}
#prod_detail .main {
padding:20px 20px 20px;
display:block
}
#prod_detail .main .gallary {
width:100%;
flex-shrink:0
}
#prod_detail .main .gallary .view {
width:100%;
height:auto;
border:1px solid #ddd
}
#prod_detail .main .gallary .view img {
width:100%;
height:auto;
cursor:pointer
}
#prod_detail .main .gallary .thumb {
width:100%;
margin-top:10px;
height:auto;
display:flex;
align-items:stretch
}
#prod_detail .main .gallary .thumb .btn {
width:20px;
height:auto;
background-color:#f2f4f5;
color:#fff;
display:flex;
flex-shrink:0;
align-items:center;
justify-content:center;
transition:all 0.3s
}
#prod_detail .main .gallary .thumb .btn i {
font-size:12px
}
#prod_detail .main .gallary .thumb .btn:hover {
background-color:#ebf7ff;
color:#01327e
}
#prod_detail .main .gallary .thumb .swiper {
width:calc(100% - 40px);
padding:0 10px
}
#prod_detail .main .gallary .thumb .swiper .swiper-slide {
width:100px;
height:auto;
border:1px solid #ddd;
cursor:pointer
}
#prod_detail .main .gallary .thumb .swiper .swiper-slide img {
width:100%;
height:100%
}
#prod_detail .main .info {
width:100%;
padding-left:0;
margin-top:20px
}
#prod_detail .main .info .title {
width:100%;
font-size:16px;
font-weight:bold
}
#prod_detail .main .info .num {
width:100%;
position:relative;
margin-top:10px
}
#prod_detail .main .info .num .view-num {
color:#888;
float:left
}
#prod_detail .main .info .num .share-btn {
display:none
}
#prod_detail .main .info .title-line {
width:100%;
height:40px;
background-color:#ebf7ff;
padding:0 14px;
font-size:16px;
color:#01327e;
line-height:40px;
margin-top:18px
}
#prod_detail .main .info .desc {
width:100%;
height:auto;
overflow-y:auto;
margin-top:14px;
line-height:24px
}
#prod_detail .main .info .btns {
width:100%;
max-width:unset;
overflow:hidden;
margin-top:20px
}
#prod_detail .main .info .btns a {
display:block;
width:49%;
height:40px;
line-height:40px;
text-align:center;
border:1px solid #ddd;
transition:all 0.3s;
float:left;
margin-left:2%;
margin-bottom:10px
}
#prod_detail .main .info .btns a:nth-child(3n+1) {
margin-left:2%
}
#prod_detail .main .info .btns a:nth-child(2n+1) {
margin-left:0
}
#prod_detail .main .info>.bot {
width:100%;
overflow:hidden;
border-top:1px solid #ddd;
padding-top:5px
}
#prod_detail .main .info .contact {
width:100%;
float:none
}
#prod_detail .main .info .contact .tact-item {
margin-top:14px;
display:inline-flex;
align-items:center;
flex-wrap:wrap
}
#prod_detail .main .info .contact .tact-item .qq {
display:none;
align-items:center;
justify-content:center;
width:100px;
height:30px;
background-color:#cc0001;
border-radius:15px;
white-space:nowrap;
flex-shrink:0;
margin-right:10px
}
#prod_detail .main .info .contact .tact-item .qq.ismobile {
display:flex
}
#prod_detail .main .info .contact .tact-item .qq i {
font-size:16px;
color:#fff
}
#prod_detail .main .info .contact .tact-item .qq span {
font-size:12px;
margin-left:6px;
color:#fff
}
#prod_detail .main .info .contact .tact-item .name {
margin-right:10px;
height:30px;
line-height:30px;
white-space:nowrap;
flex-shrink:0
}
#prod_detail .main .info .contact .tact-item .name img {
height:100%
}
#prod_detail .main .info .contact .tact-item .name span {
margin-left:4px
}
#prod_detail .main .info .contact .tact-item .tel {
font-size:18px;
height:30px;
line-height:30px;
font-family:'DIN';
white-space:nowrap;
flex-shrink:0
}
#prod_detail .main .info .contact .tact-item .tel span {
margin-right:10px
}
#prod_detail .main .info .prev-next {
width:100%;
float:none;
margin-top:20px
}
#prod_detail .main .info .prev-next a {
display:block;
height:30px;
line-height:30px;
margin-top:5px
}
#contents {
margin-top:10px
}
#contents .main {
overflow:hidden
}
#contents .scroll {
width:100%;
float:left
}
#contents .scroll .scroll-item {
margin-bottom:10px;
background-color:#fff;
padding:20px 20px 20px
}
#contents .scroll .title-line {
width:100%;
height:40px;
background-color:#ebf7ff;
padding:0 14px;
font-size:16px;
color:#01327e;
line-height:40px
}
#contents .scroll .title-line a {
display:block;
width:80px;
height:30px;
line-height:30px;
text-align:center;
background-color:#01327e;
color:#fff;
border-radius:15px;
float:right;
margin-top:5px;
font-size:12px
}
#contents .scroll .content {
width:100%;
padding:20px 0
}
#contents .scroll .content img {
max-width:100%
}
#contents .scroll .down-list {
width:100%;
overflow:hidden
}
#contents .scroll .down-list .item {
display:block;
float:left;
margin-left:2%;
width:49%;
margin-top:10px
}
#contents .scroll .down-list .item .img {
width:100%;
border:1px solid #ddd;
transition:all 0.3s
}
#contents .scroll .down-list .item .img img {
width:100%
}
#contents .scroll .down-list .item .img:hover {
border-color:#01327e
}
#contents .scroll .down-list .item .title {
font-size:14px;
margin-top:6px
}
#contents .scroll .down-list .item:nth-child(3n+1) {
margin-left:2%
}
#contents .scroll .down-list .item:nth-child(2n+1) {
margin-left:0
}
#contents .scroll .case-list .item {
display:block;
width:100%;
padding:14px;
border:1px solid #d3eeff;
margin-top:10px
}
#contents .scroll .case-list .item .title {
font-size:14px
}
#contents .scroll .case-list .item .desc {
font-size:12px;
line-height:22px
}
#contents .scroll .prob-list .item {
display:block;
width:100%;
padding:6px 0;
border-bottom:1px solid #d3eeff;
margin-top:10px
}
#contents .scroll .prob-list .item .title {
font-size:14px
}
#contents .scroll .prob-list .item .desc {
font-size:12px;
line-height:22px
}
#contents .scroll .recom {
width:100%;
margin-top:10px;
margin-bottom:30px
}
#contents .scroll .recom .title-line {
width:100%;
text-align:center;
background-color:#d3eeff
}
#contents .scroll .recom .list {
width:100%;
overflow:hidden;
margin-top:10px
}
#contents .scroll .recom .list .item {
display:block;
width:49%;
margin-left:2%;
margin-bottom:10px;
float:left
}
#contents .scroll .recom .list .item .img {
width:100%
}
#contents .scroll .recom .list .item .img img {
width:100%
}
#contents .scroll .recom .list .item .title {
width:100%;
height:40px;
line-height:40px;
text-align:center;
font-size:16px;
background-color:#d3eeff
}
#contents .scroll .recom .list .item:nth-child(4n+1) {
margin-left:2%
}
#contents .scroll .recom .list .item:nth-child(2n+1) {
margin-left:0
}
#contents .target {
display:none
}
#search .search-box {
width:100%;
margin:40px 0 30px;
height:40px;
position:relative;
z-index:9
}
#search .search-box .container {
height:100%
}
#search .search-box .left {
width:calc(100% - 80px);
max-width:unset;
height:100%;
display:inline-block;
float:left;
border:1px solid #e6e6e6;
border-radius:0
}
#search .search-box .left .select {
display:inline-block;
float:left;
width:70px;
height:100%;
padding:0 10px 0 0;
position:relative
}
#search .search-box .left .select>span {
display:block;
width:100%;
height:100%;
line-height:40px;
font-size:14px;
padding:0 14px 0 14px;
background-image:url("../img/67.png");
background-position:right center;
background-repeat:no-repeat;
background-size:6px 4px;
cursor:pointer
}
#search .search-box .left .select .sub {
width:100%;
position:absolute;
top:41px;
left:0;
border:1px solid #e6e6e6;
background-color:#fff;
z-index:99;
display:none
}
#search .search-box .left .select .sub span {
display:block;
width:100%;
text-align:center;
height:30px;
line-height:30px;
transition:all 0.3s;
cursor:pointer
}
#search .search-box .left .select .sub span:hover, #search .search-box .left .select .sub span.active {
background-color:#01327e;
color:#fff
}
#search .search-box .left .input {
display:inline-block;
float:left;
width:calc(100% - 70px);
height:100%;
border-left:1px solid #e6e6e6
}
#search .search-box .left .input input {
width:100%;
height:100%;
padding:0 10px;
border:none;
background-color:#fff;
border-radius:0;
font-size:14px
}
#search .search-box .btn {
display:inline-block;
float:left
}
#search .search-box .btn button {
width:80px;
height:40px;
background-color:#01327e;
border:none;
color:#fff;
font-size:14px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer
}
#search .search-box .btn button span {
display:inline-block;
line-height:14px
}
#search .search-box .btn button i {
display:inline-block;
width:16px;
height:16px;
background-image:url("../img/66.png");
background-size:100% 100%;
margin-left:5px
}
#search .search-result {
width:100%;
padding-bottom:30px
}
#search .search-result .item {
width:100%;
padding:14px 0;
border-bottom:1px solid #e6e6e6
}
#search .search-result .item .title {
width:100%;
line-height:14px;
font-size:14px;
display:flex;
align-items:center
}
#search .search-result .item .title i {
display:inline-block;
width:4px;
height:4px;
background-color:#01327e;
margin-right:10px
}
#search .search-result .item .title p {
display:inline-block;
width:calc(100% - 14px)
}
#search .search-result .item .date {
width:100%;
font-size:12px;
line-height:12px;
color:#999;
margin-top:10px;
padding-left:14px
}
#search .search-result .pages {
margin-top:30px
}
#search .load-more {
margin-bottom:30px
}
}
@media screen and (max-width: 480px) {
#contact .contact .main {
display:block
}
#contact .contact .main .texts {
width:100%;
padding:20px 20px
}
#contact .contact .main .texts .big {
font-size:24px;
line-height:24px
}
#contact .contact .main .texts .name {
font-size:18px;
margin-top:10px
}
#contact .contact .main .texts .icon-line {
margin-top:10px
}
#contact .contact .main .texts .icon-line i {
font-size:20px
}
#contact .contact .main .texts .icon-line span {
font-size:14px;
margin-left:15px
}
#contact .contact .main .texts .way {
margin-top:10px
}
#contact .contact .main .texts .way .title {
font-size:16px
}
#contact .contact .main .texts .way .items p {
font-size:16px;
margin-right:15px
}
#contact .contact .main .texts .wechat {
width:100%;
margin-top:20px
}
#contact .contact .main .texts .wechat .img {
width:120px;
height:120px
}
#contact .contact .main .texts .wechat .rights {
width:calc(100% - 120px);
margin-left:16px
}
#contact .contact .main .texts .wechat .rights .big {
font-size:14px;
line-height:24px
}
#contact .contact .main .texts .wechat .rights .desc {
font-size:14px;
margin-top:10px
}
#contact .contact .main .texts .wechat .rights .small {
margin-top:10px;
width:100%
}
#contact .contact .main #map {
width:100%;
height:300px
}
#contact .feed {
width:100%;
padding-top:10px;
padding-bottom:30px
}
#contact .feed .main {
padding:20px 20px
}
#contact .feed .main .title {
width:100%;
font-size:16px;
line-height:24px
}
#contact .feed .main .form {
width:100%;
margin-top:40px
}
#contact .feed .main .form .input-line {
width:100%;
flex-wrap:wrap
}
#contact .feed .main .form .input-line input {
width:49%;
height:40px;
padding:0 10px;
margin-bottom:10px
}
#contact .feed .main .form .textarea {
width:100%;
height:200px;
margin-top:0
}
#contact .feed .main .form .textarea textarea {
padding:10px 10px
}
#contact .feed .main .form .bot-line {
flex-wrap:wrap
}
#contact .feed .main .form .bot-line .yzm {
display:flex;
width:100%
}
#contact .feed .main .form .bot-line .yzm input {
width:100%;
padding:0 10px
}
#contact .feed .main .form .bot-line .yzm img {
width:100px;
flex-shrink:0
}
#contact .feed .main .form .bot-line .sub-btn {
width:100%;
margin-top:20px
}
#contact .feed .main .form .bot-line .sub-btn .btn {
width:100%
}
#ques {
margin-top:20px;
margin-bottom:30px
}
#ques .main .list a {
width:100%;
height:50px;
line-height:50px
}
#ques .main .list a .date {
width:100px
}
#ques .main .list a .title {
font-size:14px;
width:calc(100% - 120px);
float:left;
transition:all 0.3s
}
#ques .main .list a i {
font-size:18px;
color:#ddd;
float:right;
transition:all 0.3s
}
#ques .main .list a:hover .title {
color:#014193
}
#ques .main .list a:hover i {
color:#014193
}
#ques .load-more {
margin-top:30px
}
#sample {
margin-top:20px
}
#sample .item {
width:100%;
margin-left:0;
margin-bottom:10px;
padding:15px 10px
}
#sample .item .img {
width:auto;
height:60px;
flex-shrink:0
}
#sample .item .img img {
width:auto;
height:100%
}
#sample .item .rights {
width:calc(100% - 94px);
padding-left:20px
}
#sample .item .rights .date {
color:#888;
font-family:'DIN'
}
#sample .item .rights .name {
display:block;
font-size:16px;
line-height:18px;
margin-top:5px
}
#sample .item .rights .btn {
width:100px;
height:30px;
border-radius:15px;
line-height:30px;
margin-top:12px;
font-size:12px
}
#sample .item:nth-child(3n+1) {
margin-left:2%
}
#sample .item:nth-child(2n+1) {
margin-left:0
}
#sample .load-more {
margin-top:20px;
margin-bottom:30px
}
#about .about .texts {
padding-top:20px;
padding-bottom:20px
}
#about .about .texts .slogen {
font-size:20px
}
#about .about .texts .content {
width:100%;
height:auto;
overflow-x:hidden;
overflow-y:auto;
font-size:14px;
line-height:26px;
margin-top:20px
}
#about .about .texts .items {
width:100%;
display:flex;
justify-content:space-between;
margin-top:20px
}
#about .about .texts .items .item {
color:#01327e
}
#about .about .texts .items .item .en {
font-size:14px;
text-transform:uppercase
}
#about .about .texts .items .item .num {
font-size:40px;
line-height:30px
}
#about .about .texts .items .item .desc {
font-size:14px;
margin-top:10px
}
#about .about .img {
width:100%;
height:200px;
flex-shrink:0;
background-image:url(../img/33.png);
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
justify-content:center
}
#about .about .img i.play {
display:block;
width:40px;
height:40px;
background-image:url(../img/34.png);
background-size:100%;
cursor:pointer;
transition:all 0.3s
}
#about .about .img i.play:hover {
transform:scale(1.1)
}
#about .dev {
width:100%;
height:auto
}
#about .dev .imgs {
width:100%;
height:200px;
position:relative;
flex-shrink:0
}
#about .dev .imgs .swiper {
width:100%;
height:100%
}
#about .dev .imgs .swiper .swiper-container {
height:100%
}
#about .dev .imgs .swiper .swiper-container .swiper-wrapper {
height:100%
}
#about .dev .imgs .swiper .swiper-container .swiper-wrapper .swiper-slide {
height:100%;
background-position:center;
background-size:cover
}
#about .dev .imgs .btns {
position:absolute;
top:50%;
right:0;
transform:translateY(-50%);
width:40px;
height:80px;
z-index:3
}
#about .dev .imgs .btns a {
display:block;
width:40px;
height:40px;
text-align:center;
line-height:40px
}
#about .dev .imgs .btns a i {
font-size:18px
}
#about .dev .imgs .btns a.prev {
background-color:#fff;
color:#01327e
}
#about .dev .imgs .btns a.next {
background-color:#01327e;
color:#fff
}
#about .dev .years {
width:100%;
height:246px;
background-color:#fff;
overflow:hidden
}
#about .dev .years .swiper-container {
height:100%
}
#about .dev .years .swiper-container .swiper-wrapper {
height:100%
}
#about .dev .years .swiper-container .swiper-wrapper .swiper-slide {
width:300px;
height:100%;
padding:20px 20px 20px 20px;
border-right:1px solid #ddd
}
#about .dev .years .num {
font-size:28px
}
#about .dev .years i {
display:block;
width:40px;
height:2px;
margin-top:10px;
background-color:#333;
transition:all 0.3s
}
#about .dev .years .content {
width:100%;
height:140px;
overflow-y:auto;
font-size:14px;
line-height:28px;
margin-top:10px;
-webkit-overflow-scrolling:touch
}
#about .dev .years .content::-webkit-scrollbar {
width:6px;
height:6px;
background-color:#f5f5f5
}
#about .dev .years .content::-webkit-scrollbar-track {
border-radius:3px;
background-color:#f5f5f5
}
#about .dev .years .content::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#ddd
}
#about .dev .years .content img {
max-width:100%
}
#about .dev .years .swiper-slide-active .num {
color:#01327e
}
#about .dev .years .swiper-slide-active i {
background-color:#01327e
}
#about .advantage {
width:100%;
padding:20px 0;
background-color:#f2f4f5
}
#about .advantage .item {
width:100%;
height:200px;
display:flex;
justify-content:space-between;
margin-bottom:10px
}
#about .advantage .item .swiper {
width:42.25%;
height:200px
}
#about .advantage .item .swiper .swiper-slide {
height:200px;
background-position:center;
background-size:cover
}
#about .advantage .item .texts {
width:57.75%;
height:100%;
padding:20px 20px;
background-color:#fff
}
#about .advantage .item .texts .title {
font-size:16px;
font-weight:bold
}
#about .advantage .item .texts .desc {
font-size:14px;
line-height:24px;
margin-top:10px;
height:120px;
overflow-y:auto;
-webkit-overflow-scrolling:touch
}
#about .advantage .item .texts .desc::-webkit-scrollbar {
width:6px;
height:6px;
background-color:#f5f5f5
}
#about .advantage .item .texts .desc::-webkit-scrollbar-track {
border-radius:3px;
background-color:#f5f5f5
}
#about .advantage .item .texts .desc::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#ddd
}
#about .advantage .item:nth-child(2n) {
flex-direction:row-reverse
}
#about .honor {
width:100%;
padding:30px 0
}
#about .honor .swiper-slide {
width:29%
}
#about .honor .swiper-slide img {
width:100%
}
#about .team {
width:100%
}
#about .team img {
width:100%
}
#index .banner {
height:160px
}
}
.apage {
	line-height: 25px;
	background: #ffffff;
	padding: 0 5px;
	text-align: center;
	padding:20px
}
.apage a {
	border: 1px solid #cccccc;
	padding: 5px 14px;
	margin-right: 5px;
	margin: 0 3px;
}
.apage .num_btns {
	float: right;
	font-family: Tahoma;
}
.apage a:hover, .apage .cur {
	border: 1px solid #01327e;
	background-color: #01327e;
	color: #fff;
	text-decoration: none;
}
.apage .cust_txt {
	float: left;
}
.apage .oran_pg_fp {
	background: url(../images/first_page.gif) 4px 4px no-repeat;
	padding-right: 9px;
}
.apage .oran_pg_pp {
	background: url(../images/pre_page.gif) 4px 4px no-repeat;
	padding-right: 5px;
}
.apage .oran_pg_np {
	background: url(../images/next_page.gif) 8px 4px no-repeat;
	padding-right: 12px;
}
.apage .oran_pg_lp {
	background: url(../images/last_page.gif) 8px 4px no-repeat;
	padding-right: 12px;
}
.apage select {
	font-size: 8px;
	margin-top: 5px;
}
.apage .oran_pg_txt {
	height: 15px;
	border: solid 1px #d4e3e9;
	width: 20px;
	margin-left: 5px;
}
.apage .oran_pg_btn {
	height: 15px;
	border: solid 1px #d4e3e9;
	margin-left: 5px;
	font-size: 9px;
	background: #5984ac;
	color: #fff;
}