@charset "utf-8";
*{margin: 0px; padding: 0px;}
html,body{ font-size:14px; font-family: "microsoft yahei", 'Helvetica Neue', Helvetica, Arial, sans-serif; background:#fff;}
table,td,tr,ul,ol,li,dl,dd,dt,p,input,form,em,p,img,h1,h2,h3,h4,h5{margin:0px;padding:0px;}
ul{list-style:none;}
em,i{ font-style:normal;}
.clear{font-size:0;line-height:0;height:0;clear:both;visibility:hidden;overflow:hidden}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
a{text-decoration:none;color:#444; transition:.5s;}
a:hover{text-decoration:none;color:#000; text-decoration:underline;}
@font-face
{
font-family: Playfair;
src: url('PlayfairDisplay-Black-2.ttf')
    ,url('PlayfairDisplay-Black-2.eot');
}
.symain{ width:88%; margin:0 auto; position:relative; max-width:1560px;}
.symains{ width:80%; margin:0 auto; position:relative; max-width:1300px;}
.symainy{ width:80%; margin:0 auto; position:relative; max-width:1300px;}

.top{ position:relative; padding:21px 0; border-top:5px #000 solid;}
.top_tel{ float:right;}
.bigxs{text-transform:Uppercase;}
@media screen and (min-width:960px){
.top{ height:60px;}
.top_search{ float:left; width:140px; padding:2px 6px; border:1px #ddd solid; margin-top:10px;}
.top_search .mytxt{ width:107px; height:33px; float:left; border:0; outline:none;}
.top_search .mysub{ width:33px; height:33px; float:left;}
.top_logo{ position:absolute; left:50%; transform: translateX(-50%);}
.top_logo img{ height:60px;}
.navbar{ background:#000; position:relative; z-index:25;}
.nav { padding: 0; text-align:center;}
.nav .arrow{ background:url(../images/jt.jpg) right no-repeat; padding-right:20px;}
.nav li{ display: inline-block; border-top: 0; border-bottom: 0; margin:0 2%; }
.nav a { display: block; color: #fff; line-height:50px; font-size:16px; text-transform: uppercase; }
.nav .sub { display: none; width:100%; padding: 0; position: absolute; top:50px; text-align: left; z-index: 110; left:0%;}
.nav .sub .symain{ background: rgba(255, 255, 255, 0.99); box-sizing: border-box; padding:20px 30px;}
.nav .sub .symain { box-shadow:0px 0px 8px #aaa;}
.nav .sub { display: none; width:100%; padding: 0; position: absolute; top:50px; text-align: left; z-index: 110; left:0%;}
.nav .sub .symainy{ background: rgba(255, 255, 255, 0.99); box-sizing: border-box; padding:20px 30px;}
.nav .sub .symainy { box-shadow:0px 0px 8px #aaa;}
.subnav{ float:left; width:25%;}
.subnav a{ display:block;}
.subnav a{ font-size:13px; line-height:23px; color:#666; transition:.5s;}
.subnav span a{ font-weight:700; color:#111; margin-top:10px; font-size:15px;}
.subnav a:hover{ color:#000; padding-left:6px;}
.subnavy{ float:left; width:25%;}
.subnavy a{ display:block;}
.subnavy a{ font-size:13px; line-height:23px; color:#666; transition:.5s;}
.subnavy span a{ font-weight:700; color:#111; margin-top:10px; font-size:15px;}
.subnavy a:hover{ color:#000; padding-left:6px;}
.nav .sub .symains{ background: rgba(255, 255, 255, 0.99); box-sizing: border-box; padding:20px 30px;}
.nav .sub .symains { box-shadow:0px 0px 8px #aaa;}
.nav .sub .symains a{ float:left; width:25%; font-weight:700; color:#111; margin-top:10px; font-size:15px;}
.smllmenu,.m_nav{ display:none;}

.nav .sub .symainy .sublt{ float:left; width:100px; font-size:18px; text-transform:uppercase;}
.nav .sub .symainy .sublt a{ font-weight:700; color:#111; line-height:42px;}
.nav .sub .symainy .subrig{ float:left; width: calc(100% - 100px); padding-bottom:15px; border-bottom:1px #ddd solid;}
.subnavm a{ display:block;}
.subnavm a{ font-size:13px; line-height:23px; color:#666; transition:.5s;}
.subnavm span a{ font-weight:700; color:#111; margin-top:10px; font-size:15px;}
.subnavm a:hover{ color:#000;}
.subnavm p a{ float:left; width:25%;}
}
@media screen and (max-width:960px){
.top_search{ display:none;}
.top_logo{ float:left;}
.top_logo img{ height:40px;}
.top{ border-bottom:1px #ddd solid;}
.navbar{ display:none;}
.smllmenu{ position:absolute; right:15px; top:50%; transform: translateY(-50%);}
	.m_nav{display:block;position:fixed;top:0px;left:0px;width:0px;height:0px;overflow:hidden;z-index:10000}
	.m_nav .closecover{position:absolute;width:100%;height:100%;background:#0b0d19;filter:alpha(opacity=0);opacity:0;left:0px;top:0px;z-index:1}
	.m_nav .closeicon{position:absolute;width:20%;left:30px;top:5%;z-index:100;text-align:center;filter:alpha(opacity=0);opacity:0}
	.m_nav .m_navList{position:absolute;width:80%;right:0px;top:0px;background:#0b0d19;height:100%;z-index:100;right:-80%;overflow-y:scroll}
	.m_nav .m_navList ul{padding-left:5%;padding-right:5%}
	.m_nav .m_navList ul li{border-bottom:1px solid #232530}
	.m_nav .m_navList ul li a{display:block;height:45px;color:#fff;line-height:45px;padding-left:5%;font-size:16px}
	.m_nav .m_navList ul li .m_f_a{display:flex;align-items:center;justify-content:space-between;width:100%}
	.m_nav .m_navList ul li .m_f_a a{flex:1}
	.m_nav .m_navList ul li .m_f_a i{width:40px;height:35px;box-sizing:border-box;padding:0 5px;display:block}
	.icon{ background:url(../images/plus.png) 100% no-repeat; background-position:50% 50%;-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}
	.icon_on{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}
	.m_nav .m_navList ul li .m_s_nav{display:none;width:100%}
	.m_nav .m_navList ul li .m_s_nav a{display:block;height:22px;line-height:22px;font-size:12px;padding-left:10%;overflow:hidden;white-space:nowrap;width:90%;text-overflow:ellipsis;color:#ddd}
	.m_nav .m_navList ul li .m_s_nav span a{ display:block; font-size:15px; font-weight:700; margin-top:10px;}
}

.footer{ background:#000; color:#eee; font-size:18px; padding-top:3%;}
.fnav img{ display:block; max-width:230px; margin-bottom:30px;}
.fnav a{ display:block; line-height:20px; font-size:13px; color:#aaa;}
.fnav p{ display:block; line-height:20px; font-size:13px; color:#fff;}
.fnav span{ display:block; font-weight:100;}
.fnav span a{ color:#eee; font-weight:700; font-size:14px;}
.fnav a:hover{ color:#fff;}
.copyright{ text-align:center; line-height:100px; font-size:16px; border-top:1px #444 solid; margin-top:35px;}
@media screen and (min-width:760px){
.fnav{ float:left; width:25%;}
.fnav span{ font-size:20px; line-height:50px;}
.fnav span a{ line-height:40px;}
}
@media screen and (max-width:760px){
.footer{ padding-top:20px;}
.fnav{ margin-bottom:15px;}
.fnav span{ font-size:17px; line-height:40px;}
.fnav span a{ display:block !important; line-height:30px;}
.fnav a{ display:none !important;}
.fnav img{ max-width:40%; margin-bottom:5px;}
.copyright{ line-height:60px; font-size:13px;}
}

.mybanner{ position:relative;}
.mybanner ul li img{ display:block; width:100%;}
.infoban{ display:block;}
.infoban img{ display:block; width:100%;}

.htitle{ text-align:center;}
.htitle span{ font-weight:700; font-family:"Playfair";}
.infotitle{ text-align:center;}
.infotitle span{ font-weight:700;}
.hmore{ text-align:center; margin-top:3%;}
.hmore a{ display:inline-block; background:#000; color:#fff; border-top-left-radius:15px; border-bottom-right-radius:15px;}
@media screen and (min-width:1200px){
.htitle span{ font-size:40px; line-height:150px;}
.infotitle span{ font-size:30px; line-height:80px;}
.hmore a{ font-size:16px; padding:11px 30px;}
}
@media screen and (max-width:1200px) and (min-width:760px){
.htitle span{ font-size:30px; line-height:100px;}
.infotitle span{ font-size:21px; line-height:60px;}
.hmore a{ font-size:15px; padding:8px 24px;}
}
@media screen and (max-width:760px){
.htitle span{ font-size:20px; line-height:50px;}
.infotitle span{ font-size:18px; line-height:45px;}
.hmore{ margin-bottom:20px;}
.hmore a{ font-size:14px; padding:7px 20px;}
}
.habout{ padding:3% 0 5%;}
.habout p{ text-align:center; font-size:20px; max-width:960px; margin:0 auto; line-height:35px;}

.hproduct{ background:#f0f0f0; padding:2% 0;}
.hproduct ul{ margin-top:2%;}

.hproduct li em{ line-height:60px; font-size:20px; font-weight:700; color:#333; display:block;}
.hproduct li a{ display:inline-block; color:#111; font-size:16px; margin-top:15px; text-decoration:underline;}
.hproduct li a:hover{ text-decoration:none;}
.hproduct li:hover .himg{ box-shadow:0px 0px 10px #ccc;}
.hproducts{ display:block;}
.hproducts a{ display:block;}
.hproducts .himg{ background:#fff; transition:.5s; overflow:hidden;}
.hproducts .himg img{ display:block; max-width:100%; max-height:100%; margin:0 auto; transition:.8s;}
.hproducts a:hover .himg img{ opacity:0.8;}
.hproducts a em{ font-weight:700; color:#333; display:block; text-align:center;}
@media screen and (min-width:1200px){
.hproducts .himg{ height:350px;}
.hproducts a em{ line-height:60px; font-size:19px;}
}
@media screen and (max-width:1200px) and (min-width:760px){
.hproducts .himg{ height:200px;}
.hproducts a em{ line-height:50px; font-size:17px;}
}
@media screen and (max-width:760px){
.hproducts .himg{ height:160px;}
.hproducts a em{ line-height:40px; font-size:15px;}
}

.hadone{ text-align:center; background:url(../images/had1.jpg) center no-repeat; padding:2% 0;}
.hadone span{ font-weight:700; font-family:"Playfair";}
@media screen and (min-width:1200px){
.hadone span{ font-size:45px; line-height:70px;}
.hadone p{ font-size:21px; line-height:60px;}
}
@media screen and (max-width:1200px) and (min-width:760px){
.hadone span{ font-size:35px; line-height:50px;}
.hadone p{ font-size:18px; line-height:40px;}
}
@media screen and (max-width:760px){
.hadone span{ font-size:21px; line-height:35px;}
.hadone p{ font-size:16px; line-height:25px; padding:0 5%;}
}

.hstyle{ padding:2% 0 4%;}
.hstyle ul{ margin-top:2%;}
.hstyle li{ float:left;}
.hstyle li .himg{ background:#fff; transition:.5s; overflow:hidden;}
.hstyle li .himg img{ display:block; width:100%; margin:0 auto; transition:.5s;}
.hstyle li:hover .himg img{ opacity:0.8;}
.hstyle li em{ font-weight:700; color:#333; display:block; padding:10px 0 5px;}
.hstyle li p{ font-size:16px; color:#444; line-height:22px;}
.hstyle li a{ display:inline-block; color:#111; font-size:16px; margin-top:5px; text-decoration:underline;}
.hstyle li a:hover{ text-decoration:none;}
.hstyle li:hover .himg{ box-shadow:0px 0px 10px #ccc;}
@media screen and (min-width:1200px){
.hstyle li{ width: calc(25% - 18px); margin-right:24px;}
.hstyle li:nth-child(4n+0){ margin-right:0;}
.hstyle li .himg{ height:360px;}
.hstyle li em{ line-height:25px; font-size:20px;}
}
@media screen and (max-width:1200px) and (min-width:760px){
.hstyle li{ width: calc(50% - 15px); margin-right:30px;}
.hstyle li:nth-child(2n+0){ margin-right:0;}
.hstyle li .himg{ height:300px;}
.hstyle li em{ line-height:25px; font-size:18px;}
}
@media screen and (max-width:760px){
.hstyle li{ width: calc(50% - 10px); margin-right:20px;}
.hstyle li:nth-child(2n+0){ margin-right:0;}
.hstyle li .himg{ height:160px;}
.hstyle li em{ line-height:22px; font-size:15px;}
}

.htools{ background:#eee; padding:2% 0 4%;}
.htools ul{ margin-top:1%;}
.htools li .himg{ background:#fff; transition:.5s; overflow:hidden;}
.htools li .himg a{ display:block; margin:0;}
.htools li .himg a img{ display:block; width:100%; margin:0 auto; transition:.5s;}
.htools li:hover .himg a img{ opacity:0.8;}
.htools li em{ line-height:60px; font-size:20px; font-weight:700; color:#333;}
.htools li p{ font-size:16px; color:#444; line-height:22px;}
.htools li a{ display:inline-block; color:#111; font-size:16px; margin-top:15px; text-decoration:underline;}
.htools li a:hover{ text-decoration:none;}
.htools li:hover .himg{ box-shadow:0px 0px 10px #ccc;}
@media screen and (min-width:760px){
.htools li{ float:left; width: calc(33.33% - 20px); margin-right:30px;}
.htools li:nth-child(3n+0){ margin-right:0;}
}
@media screen and (max-width:760px){
.htools li{ margin-bottom:20px;}
.htools li .himg{ float:left; width:40%; margin-right:15px;}
}

.hhot{ padding:2% 0 4%;}
.hhot ul{ margin-top:2%;}
.hhot li{ float:left; width: calc(25% - 18px); margin-right:24px;}
.hhot li:nth-child(4n+0){ margin-right:0;}
.hhot li .himg{ background:#fff; height:350px; transition:.5s; overflow:hidden;}
.hhot li .himg img{ display:block; max-width:100%; max-height:100%; margin:0 auto; transition:.5s;}
.hhot li:hover .himg img{ opacity:0.8;}
.hhot li em{ line-height:60px; font-size:20px; font-weight:700; color:#333;}
.hhot li p{ font-size:16px; color:#444; line-height:22px;}
.hhot li a{ display:inline-block; color:#111; font-size:16px; margin-top:15px; text-decoration:underline;}
.hhot li a:hover{ text-decoration:none;}
.hhot li:hover .himg{ box-shadow:0px 0px 10px #ccc;}

.hrecom{ display:block; position:relative; padding:1% 20px 2%;}
.myrecomm{ padding-bottom:30px !important; position:relative;}
.myrecomm a{ text-align:center;}
.myrecomm a p{ height:400px; overflow:hidden;}
.myrecomm a img{ display:block; width:100%;}
.myrecomm a em{ display:block; line-height:25px; padding:8px 0; font-size:19px;}
@media screen and (max-width:760px){
.hrecom{ display:none;}
}

.hbrief{ padding:3% 0 4%;}
.hbrief_img{ float:left; width:45%;}
.hbrief_img img{ width:95%; max-width:500px; margin-top:35px}
.hbrief_body{ float:right; width:55%; font-size:22px; line-height:35px;}
.hbrief_body h2{ font-size:30px; line-height:100px;}

.hcontact{ display:block; position:relative;}
.hcontact img{ display:block; width:100%;}
.hcontact p{ position:absolute; left:0; top:50%; transform: translateY(-50%); width:100%; text-align:center; z-index:10;}
.hcontact p span{ display:block; color:#fff;}
.hcontact p a{ display:inline-block; background:#fff;}
@media screen and (min-width:1200px){
.hcontact p span{ line-height:100px; font-size:35px;}
.hcontact p a{ font-size:20px; padding:10px 25px;}
}
@media screen and (max-width:1200px) and (min-width:760px){
.hcontact p span{ line-height:70px; font-size:25px;}
.hcontact p a{ font-size:18px; padding:8px 20px;}
}
@media screen and (max-width:760px){
.hcontact p span{ line-height:45px; font-size:18px;}
.hcontact p a{ font-size:15px; padding:6px 15px;}
}

.infourl{ line-height:60px; font-size:14px; color:#999;}
.infourl a{ color:#999;}
.infourl a:hover{ color:#111;}

.lproduct{ background:#f0f0f0; padding:2% 0;}
.lproduct ul{ margin-top:2%;}
.lproduct li{ float:left;}
.lproduct li .himg{ background:#fff; transition:.5s; overflow:hidden;}
.lproduct li .himg a{ display:block; margin:0; padding:0;}
.lproduct li .himg a img{ display:block; max-width:100%; max-height:100%; margin:0 auto; transition:.5s;}
.lproduct li:hover .himg a img{ opacity:0.8;}
.lproduct li em{ font-weight:700; color:#333; display:block; margin:15px 0 5px; overflow:hidden; text-align:center;}
.lproduct li p{ font-size:16px; color:#444; line-height:22px;}
.lproduct li a{ display:inline-block; color:#111; font-size:16px; margin-top:5px; text-decoration:underline;}
.lproduct li a:hover{ text-decoration:none;}
.lproduct li:hover .himg{ box-shadow:0px 0px 10px #ccc;}
@media screen and (min-width:1200px){
.lproduct li{ width: calc(25% - 18px); margin-right:24px; margin-bottom:30px;}
.lproduct li:nth-child(4n+0){ margin-right:0;}
.lproduct li .himg{ }
.lproduct li em{ line-height:25px; height:50px; font-size:19px;}
}
@media screen and (max-width:1200px) and (min-width:760px){
.lproduct li{ width: calc(33.33% - 16px); margin-right:24px; margin-bottom:30px;}
.lproduct li:nth-child(3n+0){ margin-right:0;}
.lproduct li .himg{ height:300px;}
.lproduct li em{ line-height:23px; height:46px; font-size:17px;}
}
@media screen and (max-width:760px){
.lproduct li{ width: calc(50% - 10px); margin-right:20px; margin-bottom:20px;}
.lproduct li:nth-child(2n+0){ margin-right:0;}
.lproduct li .himg{ height:160px;}
.lproduct li em{ line-height:23px; height:46px; font-size:15px;}
}

.ltools{ background:#f0f0f0; padding:2% 0;}
.ltools ul{ margin-top:2%;}
.ltools li{ float:left; width: calc(25% - 18px); margin-right:24px; margin-bottom:30px;}
.ltools li:nth-child(4n+0){ margin-right:0;}
.ltools li .himg{ background:#fff; transition:.5s; overflow:hidden;}
.ltools li .himg a{ display:block; margin:0; padding:0;}
.ltools li .himg a img{ display:block; max-width:100%; max-height:100%; margin:0 auto; transition:.5s;}
.ltools li:hover .himg a img{ opacity:0.8;}
.ltools li em{ line-height:25px; height:50px; font-size:19px; font-weight:700; color:#333; display:block; margin:15px 0 5px; overflow:hidden; text-align:center;}
.ltools li p{ font-size:16px; color:#444; line-height:22px;}
.ltools li a{ display:inline-block; color:#111; font-size:16px; margin-top:5px; text-decoration:underline;}
.ltools li a:hover{ text-decoration:none;}
.ltools li:hover .himg{ box-shadow:0px 0px 10px #ccc;}


@media screen and (min-width:960px){
.vproduct{ padding:2% 0;}
.smallpic{ float:left; width:100px; height:620px !important; position:relative;}
.smallpic ul li{ width:100% !important; overflow:hidden; border:2px #c9c9c9 solid; box-sizing: border-box; padding:10px 5px; border-radius:15px;}
.smallpic ul li img{ max-width:100%; max-height:100%; display:block; margin:0 auto;}
}
@media screen and (max-width:960px){
.vproduct{ padding:25px 0 50px;}
.smallpic{ float:left; width:50px; height:240px !important; position:relative;}
.smallpic ul li{ width:100% !important; overflow:hidden; border:1px #c9c9c9 solid; box-sizing: border-box; padding:10px 5px; border-radius:5px;}
.smallpic ul li img{ max-width:100%; max-height:100%; display:block; margin:0 auto;}
}
.bigpic .swiper-button-next, .bigpic .swiper-button-prev{ color:#222 !important;}

.swiper .swiper-slide-thumb-active {border:2px #111 solid;}

.bigpic img{ max-width:100%; max-height:700px; display:block; margin:0 auto;}

.vbody h1{ font-size:24px; line-height:35px; margin-bottom:20px;}
.vbody ul{ margin:2% 0; padding:2% 0; border-bottom:1px #ddd solid; border-top:1px #ddd solid;}
.vbody li{ border:2px #ccc solid; position:relative; float:left; width: calc(12.5% - 10px); border-radius:50%; overflow:hidden; margin-right:10px; box-sizing: border-box; margin-bottom:10px;} 
.vbody li img{ display:block; width:100%;}
.vbody li a{ position:absolute; width:100%; height:100%; z-index:10;}
.vbody li a img{ width:110%;}
.vbody li.on{ border:2px #555 solid;}
.vbody em{ display:block; font-size:21px; color:#544; font-weight:700; line-height:45px;}
.vbody_con{ font-size:16px; color:#333; line-height:25px;}
@media screen and (min-width:960px){
.bigpic{ float:left; width: calc(60% - 120px);}
.vbody{ float:right;  width: calc(40% - 30px);}
}


.labout{ padding:2% 0 4%;}
@media screen and (min-width:960px){
.about_img{ float:left; width:50%;}
.about_body{ float:right; width:45%; }
}
@media screen and (max-width:960px){
.about_img{ margin:25px 0;}
}
.about_img img{ display:block; width:100%;}
.about_body{ padding-top:15px; color:#444; font-size:16px; line-height:28px;}
.about_body h2{ color:#222; font-size:29px; font-weight:700; line-height:60px;}


.nlist{ padding:1% 0 3%;}
.news_list{ float:left; width: calc(100% - 380px);}
.news_list li{ margin-bottom:15px; background:#f0f0f0; border-top-left-radius:25px; border-bottom-right-radius:25px;}
.news_list .title { font-size:17px; font-weight:700; cursor: pointer; line-height: 54px; padding: 0 20px; background: url(../images/icon12.png) no-repeat 98% center; }
.news_list .box { padding:5px 20px 20px; line-height:27px; color:#444; display: none; transition: all 0s; -o-transition: all 0s; -webkit-transition: all 0s; -moz-transition: all 0s; -ms-transition: all 0s; }
.news_list .on .title{ background: url(../images/icon12-1.png) no-repeat 98% center;}

.news_class{ float:right; width:330px; background:#eee; box-sizing: border-box; padding:10px 30px 25px;}
.news_class em{ display:block; font-size:24px; color:#333; line-height:70px; position:relative; margin-bottom:25px;}
.news_class em:before{ content:""; position:absolute; width:50px; height:4px; background:#333; left:0; bottom:0;}
.news_class a{ display:block; font-size:15px; color:#555; line-height:27px;}

.video-title{ font-size:21px; color:#333; font-weight:700; line-height:45px; text-align:center;}
.video-body{ padding:3% 0;}
.video-body video{ display:block; width:100%; max-width:860px; margin:0 auto;}
.video-con{ display:block; padding-top:3%;}
.video-con blockquote{ display:block; margin:0 auto !important;}