@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0;}

body{ font:16px "MicroSoft YaHei"; color:#4e4e4e; background:#f1f5f8; line-height:1.5;}
body::-webkit-scrollbar {
    display: none;    
}
a{ outline:none; text-decoration:none; color:#4e4e4e;}
a:hover{ color:red;}
img { border:0;}
ol, ul, li { list-style-type:none;}

.main_div2{/* overflow:hidden;*/ width:100%; z-index:10;}
.main_div3{ /*overflow:hidden; */width:100%; margin:20px 0; z-index:10; position:relative; border-top:6px solid #027ac6; padding:12px 0 30px; background:#FFF;position: relative;}
/*-----------------------------
左侧边导航栏
-------------------------------*/
#masthead {
	clear: both;
	width: 100%;
	z-index: 99;
	position: relative;
	transition: all 0.2s ease-in-out 0s;
	padding: 8px 0;
	background: #fff;
}
.site-branding {
	text-align: left;
	margin-bottom:0px;
}

.sidr {
    width: 180px;
    position: fixed;
    top: 0;
    left:0px;
    color:#fff;
    bottom: 0;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    background: #3e454b;
    -webkit-transition: 0.15s;
    transition: 0.15s;
    z-index:99999;
}
.sidr-toggle {
    position: absolute;
    left: 100%;
    top: 0;
    padding:0.5rem;
    background: #3e454b;
    color: white;
    cursor: pointer;
    font-size: 65%rem;
    line-height: 1;
    display:none;
}

#sidr-toggle {
    position: absolute;
    clip: rect(0 0 0 0);
    opacity: 0;
}
/**
 * When checkbox is checked, open the nav
 */

#sidr-toggle:checked ~ .sidr {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
/**
 * Rotate the label when nav is opened
 * Purely aesthetic
 */

@-webkit-keyframes bugfix {
    to {
        padding: 0;
    }
}
.sidr ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 180px;
    background-color: #f1f1f1;
}
 
.sidr ul li a {
    display: block;
    color: #000;
    padding: 6px 16px;
    text-decoration: none;
}

.sidr ul li:hover > a,
.sidr ul li:hover > span, .sidr ul li.active > a,
.sidr ul li.active > span, .sidr ul li.sidr-class-active > a,
.sidr ul li.sidr-class-active > span {
  box-shadow: 0 0 10px 3px #00a3df inset;
}
/*-----------------------------

搜索栏
------------------------------*/

search {padding: 30px 0;}
.searchform {
	position: relative;
	width: 300px;
	margin: 0 auto;
	top:4px;
        z-index:99;
}
input, button {border: none;outline: none;}
button {
	height: 28px;
	width: 28px;
	cursor: pointer;
	position: absolute;
}
.header-search { position: absolute;top:7px;right:68px;float:right;z-index:98;}
.header-search form {height: 36px;}
.header-search input {
	width: 300px;
	height: 28px;
	border-radius: 36px;
        padding-left:13px;
	transition: .3s linear;
	float: right;
	background:#aed1f1;
}
.header-search input:focus {
	width: 300px;
}
.header-search button {
	background: #951e46;
	top: 0px;
	right: 0;
	border-radius: 36px;
        z-index:2;
}
.search-toggle {
    position: absolute;
    right:20px;
    top: 8px;
    padding:0.1rem 0.6rem;
    background: #3e454b;
    color: white;
    cursor: pointer;
	border-radius: 36px;
	font-size:14px;
}
#search-toggle {
    position: absolute;
    clip: rect(0 0 0 0);
    opacity: 0;
	top:0px;
	right:10px;
}
#search-toggle ~ .header-search {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
	display: none;
}
#search-toggle:checked ~ .header-search {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    display: block;
z-index:9998;
}
.search .article { text-align:left;}
/*-----------------
      主导航栏
-------------------*/
.main-navigation ul {
	display: block;
	margin: 0;
	padding: 0;
}

.main-navigation {
	float: left;
}

#main-navigation {
	position: relative;
	width:60%;
	top:0;
	left:40%;
	padding: 0;
        
}

.main-navigation ul ul.sub-menu {
	padding: 10px 25px;
	background-color: #fff;
	text-align: left;
	visibility: hidden;
	opacity: 0;
	transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	top: 150%;
	left: 0;
	-webkit-box-shadow: 0 0px 20px rgba(166, 166, 166, 0.25);
	-moz-box-shadow: 0 0px 20px rgba(166, 166, 166, 0.25);
	box-shadow: 0 0px 20px rgba(166, 166, 166, 0.25);
	width: 200px;
	position: absolute;
	z-index: 999;
}

.main-navigation ul > li:hover > ul.sub-menu {
	opacity: 1;
	left: 0;
	z-index: 9999;
	visibility: visible;
	top:130%
}

.main-navigation ul ul ul {
	left: 100%;
	top: 0;
	box-shadow: 2px 1px 2px #222;
}

.main-navigation li {
	position: relative;
	display: inline-block;
	margin-bottom:0;
}

.main-navigation ul > li:hover > ul {
	opacity: 1;
	left:0;
	z-index: 9999;
}

.main-navigation ul ul ul ul  {
	display: none;
}

.main-navigation ul ul ul li:hover > ul {
	display: block;
}

.main-navigation ul ul li:hover > ul {
	opacity: 1;
	left:100%;
}

.main-navigation li li {
	float: none;
	display: block;
}

.main-navigation ul li li:last-child > a {
	border: none;
}

.main-navigation ul li a {
	color: #222;
	display: block;
	font-size: 16px;
	font-weight: 600;
	padding: 15px 0;
	position: relative;
	z-index: 99;
	text-transform: uppercase;
	margin: 0 20px 0 0;
	font-family: 'Montserrat', sans-serif;
}

.main-navigation ul ul a {
	border-bottom: 1px solid #f5f2f2;
	border-left: medium none;
	border-right: medium none;
	box-shadow: 0 1px 1px rgba(255, 255, 255, 0.18) inset;
	transition: padding 0.2s ease-in-out 0s;
	height: auto;
	padding: 10px 0;
	text-align: left;
	width: 100%;
	margin: 0;
	color: #666666;
	font-size: 14px;
	text-transform: capitalize;
}

.main-navigation ul li.menu-item-has-children > a,
.main-navigation ul li.page-item-has-children > a {
	padding-right: 30px;
}

.main-navigation li > a:hover, .main-navigation li.current-menu-item > a,
.main-navigation li.current-page-item > a, .main-navigation li:hover > a {
	color: #f51e46;
}

.main-navigation li li > a:hover,
.main-navigation li li.current-menu-item > a,
.main-navigation li li.current-page-item > a,
.main-navigation li li:hover > a {
	color:#f51e46;
}

.main-navigation li li > a:hover,
.main-navigation li li.current-menu-item > a,
.main-navigation li li.current-page-item > a,
.main-navigation li li:hover > a {
	padding-left: 5px;
}

#main-navigation ul ul::after {
	content: "";
	display: block;
	position: absolute;
	top: -6px;
	border-left: 1px solid #f1f0f0;
	border-top: 1px solid #f1f0f0;
	z-index: 9999;
	left: 20px;
	transform: rotate(45deg);
	background: #fff;
	height: 12px;
	width: 12px;
}
.main-navigation ul ul a:hover:before {
	opacity: 1;
	left: -6px;
}

.main-navigation ul li.menu-item-has-children a,
.main-navigation ul li.page-item-has-children a {
	padding-right: 20px;
}
.main-navigation li a:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background-color: #f51e46;
	-webkit-transition: all 0.33s ease-out;
	-moz-transition: all 0.33s ease-out;
	-o-transition: all 0.33s ease-out;
	-ms-transition: all 0.33s ease-out;
	transition: all 0.33s ease-out;
	opacity: 0;
}

.main-navigation li li a:after {
	display: none;
}

.main-navigation li:hover a:after,
.main-navigation li.current-menu-item a:after,
.main-navigation li.current_page_item a:after {
	opacity: 1;
	width: 100%;
}

/*---------------------
          product
----------------------*/
.content { display: flex; margin: 0 auto; justify-content: center; align-items: center; flex-wrap: wrap;}
.card { color: inherit; cursor: pointer; width: calc(25% - 2rem); min-width: calc(25% - 2rem); min-height: 353px; perspective: 1000px; margin: 1rem; position: relative;}
.front, .back {
  display: flex;
  border-radius: 6px;
  background-position: center;
  background-size: cover;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: ease-in-out 600ms;
  box-sizing: border-box;
}
.card, .front, .back{border-radius: 6px;}
.front { background-size: cover; padding: 2rem; font-size: 1rem; font-weight: 400; color: #fff; overflow: hidden; box-sizing: border-box;}
.front:before { position: absolute; display: block; content: ''; top: 0; left: 0;  right: 0; bottom: 0; background: linear-gradient(135deg, #1a9be6, #1a57e6); opacity: .15; z-index: -1;}
.card:hover .front { transform: rotateY(180deg);}
.card:nth-child(even):hover .front { transform: rotateY(-180deg);}
.back { background: #fff; transform: rotateY(-180deg); padding: 0 2em; box-sizing: border-box;}
.card:hover .back {  transform: rotateY(0deg);}
.card:nth-child(even) .back { transform: rotateY(180deg);}
.card:nth-child(even):hover .back { transform: rotateY(0deg);}


.main{  overflow:hidden; margin:0 auto;}
.main .about, .main .shpb, .main .chanpin, .main .news, .main .case, .main .link{ padding:30px 0 50px; width:100%;}
.shpb, .news{ background:#fff;}
.main-style{ max-width:1600px; margin:0 auto;}
.main .about{ padding:32px 0 82px; }
.main .about img{ width:15%;float:left; margin:85px 20px 65px 20px;position: relative;}
.main .shpb{ padding-bottom:20px;}
.main .contact{ float:right; width:300px;}
.main .about .main-style, .shpb .cont, .about .cont, .news .cont, .contact .cont, .link .cont{ line-height:1.5; text-indent:2em; letter-spacing:2px;}
.shpb .cont, .main .shpb .cont .main-style, .about .cont, .news .cont, .contact .cont, .link .cont{ color:#333;}
.news .cont{ width:100%;}
.main .shpb .cont div{padding-bottom:12px;}
.main .about img, .main .shpb .cont img, .grid figure { box-shadow:0 8px 20px rgba(0, 0, 0, 0.5), 0 33px 100px rgba(0, 0, 0, 0.3)}
.chanpin .bar a{ color:#333; float:right;padding-bottom:10px;}
.shpb .cont img{ margin:40px 0;width:25%;position: relative;}
.aboutUs{ overflow:hidden; margin-bottom:30px;}
.aboutUs img{ max-height:240px; float:left; margin:0 20px 0 0;}
.aboutUs .contUs{ line-height:25px; text-indent:2em;}
.linkUs .contUs{ padding:5px 0;}
.linkUs .contUs.img img{ margin:5px 3px; width:160px; border:1px solid #e1e1e1;}
.linkUs .contUs.txt a{ margin:5px 3px;}
.box{ padding-bottom:60px;}
.box .bar{ overflow:hidden;}

.box .bar .tit{ height:58px; padding:5px 0px; text-align:center; margin:40px 0 20px 0;}
.box .bar .tit03{ background:#027ac6; color:#fff;}
.box .bar .tit03 a{ color:#fff;}
.box .bar .tit03 a:hover{ color:red;}
.box .bar .tit01 h5{  display:block; font-size:30px;/*#3A3A3A;*/text-indent:0em; height:42px;}
.shpb .bar .tit01 h5, .about .bar .tit01 h5{ height:42px;}
.link .main-style .bar .tit01 h5{ color:#333;}
.box .bar .tit01 h5 em{ font-style:normal; color:#00a3df; font-weight:bold;}
.link .main-style .bar .tit01 h5 em{ color:#fff;}
.box .bar .tit01 span{ -webkit-text-size-adjust:none; height:16px; line-height:16px; display:block; font-size:12px; color:#62696f;text-indent:0em;padding-bottom:30px}
.chanpin .bar .tit01 span{ padding-bottom:0;}
.link .main-style .bar .tit01 span{ color:#aaa;}
.box .bar .tit03 h5{ height:18px; display:block; font-size:14px; color:#FFF;}
.box .bar .tit03 span{ -webkit-text-size-adjust:none; height:16px; line-height:16px; display:block; font-size:8px; color:#c8ddf8;}

.main .about div, .box .bar .tit01 h5{ color:#333;}
.box .cont, .box .contUs{ padding:5px 0; overflow:hidden;}

.main .about div{ overflow:hidden;}

.main .news img{ display:inline-block; padding:20px;}
.news li.one{ overflow:hidden}
.news li.one img{ float:left; height:75px; margin-right:10px;}
.news li .one .tit{ color:#1a1a1a; font-size:14px; line-height:27px; font-weight:bold;}
.news li .one .con{ color:#333; font-size:12px; line-height:24px;}
.news li{ line-height:45px; border-bottom:solid 1px #66CCFF;}
.news li span{ float:right;padding-right:10px;}
.news .artCont{ text-align:left;}
/*---------------
       case
-----------------*/
.case {  -webkit-box-sizing: border-box; box-sizing: border-box;}
.grid {
	position: relative;
	margin: 1rem auto;
	padding: 0;
	width: 100%;
	list-style: none;
	text-align: center;
}

/* Common style */

.grid figure figcaption {
	padding: 2rem;
	color: #fff;
	text-transform: uppercase;
	font-size: 1rem;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 2rem;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%rem;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 1rem 1rem;
	width: calc(25% - 2rem);
	max-width: 100%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
        border-radius: 6px;}
.grid figure img {
	position: relative;
	display: block;
	max-width:100%;
	max-height:100%;
}
.grid figure figcaption {
	color: #fff;
	text-transform: uppercase;
	font-size: 68.5%rem;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;}
.grid figure figcaption::before,
.grid figure figcaption::after { pointer-events: none;}
.grid figure figcaption,
.grid figure figcaption > a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.grid figure figcaption > a { font-size: 68.5%rem; opacity: 0;}
.grid figure p { margin: 0;letter-spacing: 1px; font-size: 1rem;}
figure.effect-case { background: #1867a3; -webkit-box-sizing: border-box; box-sizing: border-box; }
figure.effect-case img { min-height: 15rem;margin:0 auto;}
figure.effect-case figcaption { padding: 2rem; -webkit-box-sizing: border-box; box-sizing: border-box; }
figure.effect-case figcaption::before,
figure.effect-case figcaption::after { position: absolute; content: ''; opacity: 0;}
figure.effect-case figcaption::before {
	top:32px;
	right: 16px;
	left: 16px;
	bottom:32px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;}
figure.effect-case figcaption::after {
	top:16px;
	right: 32px;
	left: 32px;
	bottom:16px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;}
figure.effect-case p {
	padding: 0.5rem 1rem;
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);}
figure.effect-case img,
figure.effect-case figcaption::before,
figure.effect-case figcaption::after,
figure.effect-case p {-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}
figure.effect-case:hover img {opacity: 0.7; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
figure.effect-case:hover figcaption::before,
figure.effect-case:hover figcaption::after {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
figure.effect-case:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
figure.effect-case:hover figcaption::after,
figure.effect-case:hover p,
figure.effect-case:hover img {-webkit-transition-delay: 0.15s;transition-delay: 0.15s;}

.main .link{ background:url(../image/news_bg.png);}
.link .bar{ padding:15px 0px; border-bottom:2px solid #bec6cc;}
.link .bar a{ font-size:14px; color:#1894aa; float:right;}
.link .cont{ padding:5px 0; color:#eee}
.link .img img{ margin:5px 10px; width:180px; border:1px solid #e1e1e1;}
.link .txt a{ margin:5px 10px; color:#eee}

.left{ float:left; width:70%;padding-right:3%;}
.right{ float:left; width:26%;}
.main_div3 .box{ margin-bottom:10px;}
.main_div3 .box .bar .tit03{ height:30px; line-height:30px; font-weight:bold; font-size:14px;}
.main_div3 .box .artInfo_2 {text-align: center;}
.main_div3 .left .cont{ min-height:600px;text-align: center;}

ul.list li{ color:#121212; height:36px; line-height:36px; border-bottom:1px dashed #ccc}
ul.list li a{ }
ul.list li span{ float:right;}

.right .box .cont ul li{ overflow:hidden;}
ul.o_text li{ border-bottom:1px dashed #DFDFDF; margin-top:10px; padding-bottom:8px; overflow:hidden;}
ul.o_text li img{ display:block; float:left; margin-right:15px; height:90px; width:130px; border:1px solid #ddd; padding:4px;}
ul.o_text li dl dd.name{ line-height:25px; font-weight:bold; font-size:14px;}
ul.o_text li dl dd name a{ color:#000;}
ul.o_text li dl dd.text{ line-height:25px; text-indent:2em;}

ul.xmzs{ overflow:hidden; margin-top:16px; *margin-top:21px;}
ul.xmzs li{ width:200px; margin:0 5px 10px; float:left;}
ul.xmzs li a{ display:block;}
ul.xmzs li a.img{ border:1px solid #ccc; padding:3px;}
ul.xmzs li a.img img{ width:192px; height:192px; display:block;}
ul.xmzs li a.txt{ line-height:24px; text-align:center; background:#EBEBEB;}

ul.kyal{ overflow:hidden; margin-top:16px; *margin-top:21px;}
ul.kyal li{ width:200px; margin:0 5px 10px; float:left;}
ul.kyal li a{ display:block;}
ul.kyal li a.img{ border:1px solid #ccc; padding:3px;}
ul.kyal li a.img img{ width:192px; height:166px; display:block;}
ul.kyal li a.txt{ line-height:24px; text-align:center; background:#EBEBEB;}

.artName{ font-size:20px; font-weight:bold; text-align:center; margin-bottom:8px; line-height:30px;}
.artInfo{ font-size:12px; text-align:center; margin-bottom:10px; line-height:20px;}
.artCont{ font-size:16px; line-height:1.5; text-indent:2em; letter-spacing:2px;padding:18px;}
.product-artcont{width:100%;position: relative;}
.product-artcont>img{ position: relative; height: 100%;}
.product-artcont .pro-artcont-content h2, .product-artcont .pro-artcont-content h4{text-align:center;}
.product-artcont .pro-artcont-content p{text-align:left;text-indent:2em;}
.artInfo_2 .artPic{justify-content: center; align-items: center;height:320px;}
.main_div3 .box{padding:2px 12px;}
.main_div3 .product-int{padding-right:31%;}

.artInfo_2{ overflow:hidden; margin-bottom:15px; border-bottom:2px solid #a1a1a1; padding-bottom:10px;}
.artJJ{ line-height:25px; text-indent:2em;}
.main_div3 .box .artInfo_2. article .artPic{ float:right; width:300px; margin-left:20px; border:1px solid #CCC; padding:3px 2px;margin:0 auto;}
.explain1 {
  background:url(/uploadfile/image/product/20191210/1-1127.png) right top no-repeat;background-size:340px 710px;
}
.explain2 {
  background:url(/uploadfile/image/product/20191210/2-1127.png) right top no-repeat;background-size:340px 710px;
}
.explain3 {
  background:url(/uploadfile/image/product/20191210/3-1127.png) right top no-repeat;background-size:340px 710px;
}
.explain4 {
  background:url(/uploadfile/image/product/20191210/4-1127.png) right top no-repeat;background-size:340px 710px;
}
.explain5 {
  background:url(/uploadfile/image/product/20191210/5-1127.png) right top no-repeat;background-size:340px 710px;
}
.explain6 {
  background:url(/uploadfile/image/product/20191210/6-1127.png) right top no-repeat;background-size:340px 710px;
}
.explain7 {
  background:url(/uploadfile/image/product/20191210/7-1127.png) right top no-repeat;background-size:340px 710px;
}
.explain8 {
  background:url(/uploadfile/image/product/20191210/8-1127.png) right top no-repeat;background-size:340px 710px;
}
.explain9 {
  background:url(/uploadfile/image/product/20191210/9-1127.png) right top no-repeat;background-size:340px 710px;
}
.pro-explain {
  min-height:710px;text-align:left;margin:5px auto;"
}
.pro-explain h2 {
  padding-bottom:20px;text-align:center;
}
.pro-explain div {
  padding:15px 341px 15px 0;text-align:left;
}


table.recruit{ width:100%; border:0;}
table.recruit td{ height:30px;}
div.recruit{ border-top:1px solid #ddd; margin-top:20px; padding-top:20px;}
div.recruit .sm{ text-align:right; margin-top:50px;}
div.recruit .sm span{ color:#F00;}

.sort li{ color:#121212; height:36px; line-height:36px; border-bottom:1px dashed #ccc}
.sort li a{ display:block;}
li.sort2{ text-indent:2em;}

.mess input, .mess textarea, .mess img{ border:1px solid #CCC; vertical-align:middle;}
.mess input{ line-height:24px;}
.mess textarea{ font-size:12px;}
.mess img{ height:24px;}

.footer{ background:#3e454b;}
.footer .foot{  max-width:1600px; padding:12px 0; line-height:25px; color:#FFF; margin:0 auto;}
.footer .foot p{text-align:center;}
.footer .foot a{ color:#FFF;}
.footer .foot img{ float:right;}

.Page{ text-align:center; font-size:14px; margin-top:10px;}
.Page .selected{ color:#F00;}
.clear{ clear:both;}

@media screen and (max-width: 500px) {
*{font-size:14px;}
.search-toggle {right:10px;padding:0.2rem 0.4rem;font-size:10px;}
.container{width:100%}
.sidr{width:90px;}
.sidr-toggle{display:block;}
.sidr ul {width:90px;}
.searchform, .header-search form, .header-search input, .header-search input:focus {width:180px;height:20px;font-size:10px;}
button {height: 20px;width: 20px;}
.site-branding {width:85%;margin: 0;text-align: center;margin-bottom:0px;}
.site-branding img{width:55%;height:32px;padding-right:10px;}
.main-navigation{display:none;}
.main .about{ padding:12px 0 32px; }
.main .shpb .cont img{margin:10px 5px;width:100%;}
.chanpin .bar a{ color:#333;}
.main .about img{ width:50%; margin:20px 5px 10px 5px;}
.main_div2, .main_div3{width:100%;}
.shpb, .news, .main .about, .chanpin, .case, .link{ width:100%;}
.main_div3 * img{width:100%;position:relative;}
.main .shpb .cont div{width:100%;}
.main-style, .main, .link, .footer{width:100%;}
.cont .main-style, .footer .foot, .main .link{100%;}
.main_div3 .box .artInfo_2. article .artPic{width:70%;}
.shpb .cont, .about .cont, .news .cont, .contact .cont, .link .cont{ line-height:1.2; text-indent:2em; letter-spacing:1px;}

.content { display: flex;display: -webkit-flex; margin: 0; justify-content: center; align-items: center; -webkit-flex-flow: row wrap;flex-flow: column wrap;}
.card { width: 80%;margin: 5px 0;}
.front, .back {height: 100%;width: 100%;flex:4 0px}
.card, .front, .back{border-radius: 6px;}
.front {  padding: 2px 0; box-sizing: border-box;}
.back {  padding: 2px 0; box-sizing:  border-box;}

.case {  width: 100%;}
.grid {margin: 5px 0;padding: 0;width: 100%;}
.grid figure {display: inline-block;float: none;margin: 5px 0; width: 60%;}
.grid figure img {width:100%;}


.right{ display:none;}
.left{ float:none; width:100%;}
.box .bar .tit{ height:25px; padding:5px 0px; text-align:center; margin:10px 0;}
.box .bar .tit01 h5{ font-size:16px;/*#3A3A3A;*/text-indent:0em; height:20px;}
.box .bar .tit01 span{ -webkit-text-size-adjust:none; font-size:9px;padding-bottom:10px}
.box .bar .tit01 h5 em{ font-size:16px;}
.shpb .bar .tit01 h5, .about .bar .tit01 h5{ height:20px;}
.main .about, .main .shpb, .main .chanpin, .main .news, .main .case, .main .link{ padding:5px 0 0;}
.explain1 {
  background:url(/uploadfile/image/product/20191210/1-1127.png) right top no-repeat;background-size:170px 355px;
}
.explain1, .explain2, .explain3, .explain4, .explain5, .explain6, .explain7, .explain8, .explain9 {
  padding:15px 170px 15px 0;text-align:left;
}
}


@media screen and (min-width:501px) and (max-width:800px){
*{font-size:14px;}
.search-toggle {right:10px;padding:0.2rem 0.4rem;font-size:12px;}
.container{width:100%}
.sidr{width:90px;}
.sidr-toggle{display:block;}
.sidr ul {width:90px;}
.searchform, .header-search form, .header-search input, .header-search input:focus {width:180px;height:20px;font-size:10px;}
button {height: 20px;width: 20px;}
.site-branding {margin: 0;text-align: center;margin-bottom:0px;}
.main-navigation{display:none;}
.site-branding img{width:70%;padding-right:20px;}
.main .about{ padding:12px 0 32px; }
.main .shpb .cont img{margin:10px 0px;width:50%;}
.chanpin .bar a{ color:#333; float:right;padding-bottom:10px;}
.main .about img{ width:50%; margin:45px 5px 10px 5px;}
.main_div2, .main_div3{width:100%;}
.shpb, .news, .main .about, .chanpin, .case, .link{ width:100%;}
.main_div3 * img{width:100%;position:relative;}
.main .shpb .cont div{width:100%;}
.main-style, .main, .link, .footer{width:100%;}
.cont .main-style, .footer .foot, .main .link{100%;}
.main_div3 .box .artInfo_2. article .artPic{width:70%;}
.shpb .cont, .about .cont, .news .cont, .contact .cont, .link .cont{ line-height:1.2; text-indent:2em; letter-spacing:2px;}
.card { width:60%;}
.grid figure {display: inline-block;float: none;margin: 10px 0; width: 60%;}
.right{ display:none;}
.left{ float:none; width:100%;}
.box .bar .tit{ height:25px; padding:5px 0px; text-align:center; margin:10px 0;}
.box .bar .tit01 h5{ font-size:16px;/*#3A3A3A;*/text-indent:0em; height:20px;}
.box .bar .tit01 span{ -webkit-text-size-adjust:none; font-size:9px;padding-bottom:10px}
.box .bar .tit01 h5 em{ font-size:16px;}
.shpb .bar .tit01 h5, .about .bar .tit01 h5{ height:20px;}
.main .about, .main .shpb, .main .chanpin, .main .news, .main .case, .main .link{ padding:5px 0 0;}
.explain1, .explain2, .explain3, .explain4, .explain5, .explain6, .explain7, .explain8, .explain9 {
  background:url(/uploadfile/image/product/20191210/1-1127.png) right top no-repeat;background-size:204px 426px;
}
.pro-explain div {
  padding:15px 204px 15px 0;text-align:left;
}
}

@media screen and (min-width:801px) and (max-width:1024px){
.search-toggle {right:10px;padding:0.2rem 0.4rem;font-size:12px;}
.container{width:100%}
.sidr{width:110px;}
.sidr-toggle{display:block;}
.sidr ul {width:110px;}
.main-navigation{display:none;}
.main .shpb .cont img{margin:10px 7px;width:50%;}
.main .about img{ width:40%; margin:45px 5px 10px 5px;}
.main-style, .main, .link, .foot{width:100%;}
.card { width: calc(50% - 2rem); min-width: calc(50% - 2rem); }
.grid figure { width: calc(50% - 2rem); min-width: calc(50% - 2rem); }
.right{ display:none;}
.left{ float:none; width:100%;}
.explain1, .explain2, .explain3, .explain4, .explain5, .explain6, .explain7, .explain8, .explain9 {
  background-size:272px 568px;
}
.pro-explain div {
  padding:15px 272px 15px 0;text-align:left;
}

}


@media screen and (min-width:1025px) and (max-width:1280px){
.search-toggle {right:10px;padding:0.2rem 0.4rem;font-size:12px;}
.container{width:100%}
.sidr{width:110px;}
.sidr-toggle{display:block;}
.sidr ul {width:110px;}
.main-navigation{display:none;}
.main .shpb .cont img{margin:10px 7px;width:50%;}
.main .about img{ width:40%; margin:45px 5px 10px 5px;}
.main-style, .main, .link, .foot{width:100%;}
.card { width: calc(25% - 2rem); min-width: calc(25% - 2rem); }
.grid figure { width: calc(25% - 2rem); min-width: calc(25% - 2rem); }
.right .box .cont ul li a{ font-size:14px;}
}

@media only screen and (min-width:1025px) and (max-width: 1440px){
.main-style, .main, .link, .foot{width:100%;
.card { width: calc(25% - 2rem); min-width: calc(25% - 2rem); }
.grid figure { width: calc(25% - 2rem); min-width: calc(25% - 2rem); }}
}