﻿@charset "utf-8";
@import "base.css";

body {font-family: "Microsoft YaHei";font-size: 14px;line-height:1.5;overflow-x: hidden;}
a {text-decoration: none;/*color: #ffffff*/transition: all 0.5s;}

.container {width:98%;max-width:1200px;margin: 0 auto;}


.top_head {width: 100%;line-height:2.2;color: #777777;background: #f3f3f3;font-size: 15px;}
.top_head .top_headText{float: right;}

.top{padding: 15px 0;}
.top .logo {width: 180px;float: left;margin-top:20px }
.top .ma{float: right;margin-right: 20px;margin-top:30px;position: relative;z-index: 11100;cursor: pointer;text-align: center;line-height: 30px;font-size: 15px;}
.top .ma p{color: #777777;background: url(../images/top03.png) no-repeat center top;padding-top:30px;}
.top .ma img {display: none;position: absolute;width: 145px;max-width: 145px;top: 100%;left: 50%;transform: translateX(-50%);}
.top .ma:hover p{color: #e60212;background: url(../images/top04.png) no-repeat center top;}
.top .ma:hover img {display: block;}

.top_r {background: url(../images/top05.png) no-repeat 26px 0;width: 220px;float: right;}
.top_r p {font-size: 18px;color: #2b2b2b;font-weight: bold;text-indent: 61px;letter-spacing: 4px;}
.top_r dl {border: 1px solid #ed7d31;margin-top: 8px;font-weight: bold;text-align: center;font-size: 24px;}
.top_r dl dt {color: #ed7d31;}
.top_r dl dd {background: #ed7d31;color: #fff;}

.menu_button{position: fixed;width: 40px;right:2%;top:20px;cursor: pointer;display: none;z-index: 101;background: #2b2b2b;padding: 8px 5px;}
.menu_button span{width:100%;display: block;height: 2px;background: #ffffff;border-radius: 10px;-webkit-transition: .3s;transition: .3s;position: relative}
.menu_button span:nth-child(2){margin:5px 0}

.menu_button.cross span:nth-of-type(1) {transform: translateY(7px) rotate(-45deg);}
.menu_button.cross span:nth-of-type(2) {opacity: 0;}
.menu_button.cross span:nth-of-type(3) {transform: translateY(-7px) rotate(45deg);}

.nav {background: #909590;}
.nav ul li {float: left;width: calc(100%  / 7);line-height: 50px;font-size: 17px;}
.nav ul li a {display: block;color: #ffffff;}
.nav ul li:hover a,.nav ul li a.current {background: #e60212;}
.search_div {width: 100%;border-bottom: 1px dashed #d9d9d9;padding: 10px 0;}
.sea_key {float: left;width:calc(100% - 320px);padding-left: 20px;line-height: 40px;box-sizing: border-box;background: url(../images/ser01.png) no-repeat left center;}
.sea_key a {color: #777777;margin: 0 5px;}
.sea_key a:hover {color: #e60212;}
.sea_key span {color: #2b2b2b;}

.search {width: 310px;background: #f3f3f3;border-radius: 5px;float: right;}
.search .input ,.search .btn_sure{height: 40px;border: none;font-size: 13px;float: left}
.search .input {width: calc(100% - 50px);color: #777777;text-indent: 10px;background: none;}
.search .btn_sure {width: 50px;background: url(../images/btn.png) no-repeat center;cursor: pointer;}

.banner ul li{background-size: cover;background-repeat: no-repeat;height: 550px;background-position: center;}

.index_pro {background-color: #f3f3f3;padding-bottom: 20px;}

.title{text-align: center;padding-top: 60px;padding-bottom: 15px;font-size: 16px;color: #2b2b2b;}
.title h3{font-size: 38px;color: #373e4a;font-weight: bold;}
.title h3 span{color: #ff0000}
.title p.spa{letter-spacing: 5px;}
.title p span{font-size: 18px;font-weight: bold}


@media only screen and (max-width : 1200px) {
    .top_head{font-size: 12px;}
    .top_r dl{font-size: 20px;}
    .nav ul li{}
    .banner ul li{height: 360px;}

}
@media only screen and (max-width :812px) {
    body{font-size: 12px;}
    .menu_button{display: block}

    .top_head,.top_r,.sea_key,.top .ma{display: none}
    .top_r dl{font-size: 20px;}
    .top .logo{margin-top: 0;width: 100px;}

    .nav {background: #2b2b2b;position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 99;display: none}
    .nav.open{display: block}
    .nav ul li{width: 100%;float: none;font-size: 16px;line-height: 46px;}
    .nav ul li:first-child{margin-top: 60px;}

    .banner ul li{height: 210px;}

    .search {width: 310px;}
    .search .input ,.search .btn_sure{height:30px;font-size: 12px;}

    .title{padding-top: 40px;font-size:14px}
    .title h3{font-size:30px;}
    .title p.spa{letter-spacing:2px;}
    .title p span{font-size: 16px;}

}

@media only screen and (max-width :640px) {
    .title{padding-top: 20px;font-size:12px}
    .title h3{font-size:22px;}
    .title p span{font-size: 14px;}
}


.index_pro .category {}
.index_pro .category .tit {width: 280px;height:100px;padding-top: 25px;float: left;font-size: 12px;color: #f3a4a7;background: url(../images/bg_category.png) no-repeat lemonchiffon center;box-sizing: border-box}
.index_pro .category .tit .tit_box {background: url(../images/ico_car.png) no-repeat left center;padding-left: 50px;width: 135px;margin: auto;}
.index_pro .category .tit h3 {font-size: 24px;color: #ffffff;font-weight: bold;}

.index_pro .category .box {float: right;font-size: 15px;width:calc(100% - 290px);text-align: center;}
.index_pro .category .box a {width:calc((100% - 40px) /5 );height: 45px;line-height: 45px;margin-right: 10px;margin-bottom: 10px;float: left;display: block;background: #909590;color: #fff;}
.index_pro .category .box a:nth-child(5n){margin-right: 0;}
.index_pro .category .box a:hover {background: #e60212;}
.index_pro .category .box a.more {background: url(../images/cp06.jpg) no-repeat center center;}


.index_pro ul li {width: calc(96% / 3);float: left;margin-right: 2%;margin-top:20px;background: #fff;}
.index_pro ul li:nth-child(3n){margin-right: 0;}
.index_pro ul li .img {height: 280px;}
.index_pro ul li p {color: #2b2b2b;font-size: 18px;padding:10px 20px;}



.ad_box {width: 100%;padding: 40px 0;text-align: center;color: #ffffff;background: url(../images/bg_tage.jpg) no-repeat center;}
.ad_box .title {color: #ffffff;padding-top:0}
.ad_box .title h3{color: #ffffff;}
.ad_box a.more {display: block;width: 170px;line-height: 40px;margin: auto;font-size: 15px;background: #ed7d31;color: #fff;}
.ad_box a.more:hover {text-decoration: underline;}

.choose {background: #f3f3f3;padding-bottom: 80px;}
.choose ul li {margin-bottom: 30px;}
.choose ul li .img {width: 47%;float: right;}
.choose ul li .text {width: 47%;float: left;}
.choose ul li:nth-child(even) .img {float: left;}
.choose ul li:nth-child(even) .text {float: right;}

.choose ul li dl dt{width: 55px;height: 80px;line-height: 66px;background: #ec1b24;color: #ffffff;text-align: center;font-size: 26px;font-weight: bold;float: left;position: relative}
.choose ul li dl dt:before{position: absolute;width:25px;height: 2px;background: #ffffff;left: 50%;transform: translateX(-50%);bottom:10px;content: '';z-index: 1}
.choose ul li dl dd{width:calc(100% - 70px);float: right;color: #777777;}
.choose ul li dl dd h3{font-size: 24px;color: #2b2b2b;border-bottom: 1px #2b2b2b dashed;padding-bottom: 7px;margin-bottom: 10px;font-weight: bold}
.choose ul li dl dd p{line-height:2.1;}
.choose ul li dl dd p span{color: #ec1b24;font-weight: bold;}



/*定制流程*/
.dz_box ul {background: url(../images/dz02.png) no-repeat 237px 44px;}
.dz_box ul li {width: 20%;height:35px;padding-top: 65px;float: left;margin:25px 0;font-size: 15px;color: #2b2b2b;text-align: center;line-height: 2.1;cursor: pointer;}
.dz_box ul li.dz1 {background: url(../images/dz1.png) no-repeat center top;}
.dz_box ul li.dz1:hover {background: url(../images/dz11.png) no-repeat center top;}
.dz_box ul li.dz2 {background: url(../images/dz2.png) no-repeat center top;}
.dz_box ul li.dz2:hover {background: url(../images/dz22.png) no-repeat center top;}
.dz_box ul li.dz3 {background: url(../images/dz3.png) no-repeat center top;}
.dz_box ul li.dz3:hover {background: url(../images/dz33.png) no-repeat center top;}
.dz_box ul li.dz4 {background: url(../images/dz4.png) no-repeat center top;}
.dz_box ul li.dz4:hover {background: url(../images/dz44.png) no-repeat center top;}
.dz_box ul li.dz5 {background: url(../images/dz5.png) no-repeat center top;}
.dz_box ul li.dz5:hover {background: url(../images/dz55.png) no-repeat center top;}
.dz_box ul li.dz6 {background: url(../images/dz10.png) no-repeat center top;}
.dz_box ul li.dz6:hover {background: url(../images/dz100.png) no-repeat center top;}
.dz_box ul li.dz7 {background: url(../images/dz9.png) no-repeat center top;}
.dz_box ul li.dz7:hover {background: url(../images/dz99.png) no-repeat center top;}
.dz_box ul li.dz8 {background: url(../images/dz8.png) no-repeat center top;}
.dz_box ul li.dz8:hover {background: url(../images/dz88.png) no-repeat center top;}
.dz_box ul li.dz9 {background: url(../images/dz7.png) no-repeat center top;}
.dz_box ul li.dz9:hover {background: url(../images/dz77.png) no-repeat center top;}
.dz_box ul li.dz10 {background: url(../images/dz6.png) no-repeat center top;}
.dz_box ul li.dz10:hover {background: url(../images/dz66.png) no-repeat center top;}


.in_about {width: 100%;background: url(../images/bg_about.jpg) repeat-x top #ffffff;border-bottom: 1px dashed #c9c9c9;}
.in_aboutBox{background: #ffffff;max-width: 1400px;width: 96%;margin: auto;padding-bottom: 20px;}
.in_about_img {width:48%;float: right;}
.in_about_text {width:49%;float: left;}
.in_about_text h3 {font-size: 24px;color: #2b2b2b;letter-spacing: 3px;margin-top: 30px;margin-bottom: 10px;}
.in_about_text p {color: #818181;text-indent: 2em;letter-spacing: 2px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 7;-webkit-box-orient: vertical;}
.in_about_text p a {color: #0f84da;}
.in_about_text .btn {margin-top: 50px;}
.in_about_text .btn a {width: 140px;line-height:2.8;display: inline-block;margin-right: 20px;color: #2b2b2b;border: 1px solid #2b2b2b;text-align: center;}
.in_about_text .btn a:hover {color: #fff;background: #e60212;border: 1px solid #e60212;}

.about_swiper {margin-top: 40px;position: relative}
.about_swiper .prev,.about_swiper .next{width: 25px;height: 46px;cursor: pointer;display: inline;position: absolute;top: 65px;}
.about_swiper .prev {left:0;background: url(../images/left.png) no-repeat center center;}
.about_swiper .next {right:0;background: url(../images/right.png) no-repeat center center;}
.about_swiper .swiper-container {width: calc(100% - 60px);margin: auto}
.about_swiper ul li {position: relative;overflow: hidden;}
.about_swiper ul li .ico {background: url(../images/ico_search.png) no-repeat center rgba(0,0,0,0.4);width: 100%;height:100%;position: absolute;top:100%;left: 0;}
.about_swiper ul li:hover .ico {top: 0;}
.about_swiper ul li .img{height: 240px;border: 1px solid #ccc}


.in_news{padding: 50px 0}
.in_news .tit {line-height: 40px;overflow: hidden;font-size: 16px;color: #434343;background: url(../images/news_tit.png) no-repeat left center;border-bottom: 1px #434343 solid;padding-left: 15px;}
.in_news .tit span {font-weight: bold;border-bottom:2px #434343 solid ;display: inline-block}
.in_news .tit a.more {display: inline-block;float: right;width: 48px;height: 15px;border-radius: 5px;border: 1px solid #434343;font-size: 12px;color: #434343;text-align: center;line-height: 13px;margin-top: 12px;}
.in_news .tit a.more:hover {background: #e60212;color: #fff;border: 1px solid #e60212;}

.in_newsL {width:48%;float: left;}
.in_newsL ul li {padding: 15px 0;border-bottom: 1px dashed #dbdbdb;}
.in_newsL ul li span {padding-left: 30px;background: url(../images/wenda1.png) no-repeat left center;margin-top: 16px;display: block;}
.in_newsL ul li span a {font-size: 16px;font-weight: bold;color: #434343;width: 400px;display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.in_newsL ul li p {font-size: 14px;color: #707070;width: 545px;display: block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;padding-left: 30px;background: url(../images/wenda2.png) no-repeat left center;margin-top: 5px;}
.in_newsL ul li span a:hover {color: #e60212;}

.in_newsR{width: 48%;float: right}
.in_newsR ul li {font-size: 15px;color: #343434;padding-left: 15px;line-height: 40px;overflow: hidden;border-bottom: 1px dashed #dbdbdb;background: url(../images/news_li.png) no-repeat left center;}
.in_newsR ul li span {float: right;font-size: 12px;color: #c5c5c5;}
.in_newsR ul li:hover a,.in_newsR ul li:hover span{color: #e60212;}
.in_newsR ul li:hover{background: url(../images/news_liH.png) no-repeat left center;}

.link {background: #ed7d31;padding: 15px;}
.link .link_box {background: url(../images/link.png) no-repeat left center;padding-left: 60px}
.link .link_box a {color: #e9a4a6;line-height:30px;margin-left: 20px;font-size: 15px;}
.link .link_box a:hover {color: #fff;}



.foot {background: #ffffff;}
.foot .foot_con {border-bottom: 1px solid #000;padding: 30px 0;color: #707070;}
.foot_con>div{float: left;width: 22%}
.foot .f_contact{width: 34%}
.foot .tit{display: block;font-size: 18px;color: #707070;font-weight: bold;padding-bottom: 10px;position: relative;margin-bottom: 15px;}
.foot .tit:before{content: '';position: absolute;width: 30px;height: 2px;background: #d2030f;left: 0;bottom: 0;}
.foot .text{line-height: 2;}
.foot .f_nav .text a{width: 50%;float: left}

.copy {background: #ffffff;}
.copy_box {border-top: 1px solid #363636;color: #707070;font-size: 15px;padding: 15px 0}
.copy_box .copy1 {float: left;}
.copy_box .copy2 {float: right;}
.copy_box a {font-size: 15px;color: #707070;}
.copy_box a:hover {color: #d2030f;}



@media only screen and (max-width : 1200px) {

}
@media only screen and (max-width :812px) {
    .index_pro .category .tit ,.index_pro .category .box a.more,.in_about_img,.foot_con>div,.foot .logo,.dz_box{display: none;}
    .index_pro .category .box{float: none;width: 100%;text-align: center}
    .index_pro .category .box a {width:auto;height:auto;line-height:2.2;padding: 0 15px;margin: auto;display: inline-block}
    .index_pro ul li{width: 48%;margin: 10px 1%;}
    .index_pro ul li p{font-size: 12px;}
    .index_pro ul li .img,.about_swiper ul li .img{height: 200px;}


    .choose ul li .img,.choose ul li .text,.in_about_text,.in_newsL,.in_newsR{width: 100%;float: none;}
    .choose ul li .img{text-align: center;margin-bottom: 5px;}
    .choose ul li dl dd h3{font-size: 20px;}

    .in_about_text h3{margin: 0;font-size: 20px;}
    .in_about_text .btn{margin-top: 20px;}
    .in_news{padding: 20px 0}
    .in_newsL{margin-bottom: 10px;}
    .in_news .tit{font-size: 12px;line-height: 30px;}
}






#content{padding: 30px 0;}
.content_L{width: 300px;float: left}
.content_R{width: calc(100% - 350px);float: right}

.l_box{margin-bottom: 20px;}
.l_box .tit {background: #909590;font-size: 16px;line-height: 60px;color: #fff;padding-left: 15px;}
.pro_category ul li{line-height: 40px;margin-top: 3px;color: #fff;cursor: pointer;margin-bottom: 3px;transition: all 0.5s;background: #f0f0f0}
.pro_category ul li h3{margin: 0 15px;background: url(../images/ico_r.png) no-repeat right center;}
.pro_category ul li dl{background: #ffffff;}
.pro_category ul li dl dt{margin: 0 15px;padding-left: 10px;line-height: 35px;background: url("../images/new_li2.jpg") no-repeat left center;}
.pro_category ul li dl dt:hover{background: url("../images/newslihover.png") no-repeat left center;}
.pro_category ul li.current{background: #e60212}
.pro_category ul li.current h3{color: #ffffff;background: url("../images/ico_down.png") no-repeat right center}

.hots_news ul{padding: 15px 15px 0 15px;}
.hots_news ul li {line-height: 40px;overflow: hidden;border-bottom: 1px dashed #ccc;}
.hots_news a {color: #333;}
.hots_news a:hover {color: #e60212;}

.l_contact ul{padding: 15px;}
.l_contact ul li {padding:5px 0 5px 20px;line-height: 20px;position: relative;color: #333;}
.l_contact ul li a {color: #333;}
.l_contact ul li a:hover {color: #e60212;}
.l_contact ul li span {width: 22px;height: 22px;position: absolute;top: 4px;left: -7px;display: block;}
.l_contact ul li.tact_user span {background: url(../images/ico_user.png) no-repeat left bottom;}
.l_contact ul li.tact_phone span {background: url(../images/ico_phone.png) no-repeat left bottom;}
.l_contact ul li.tact_tel span {background: url(../images/ico_tel.png) no-repeat left bottom;}
.l_contact ul li.tact_fax span {background: url(../images/ico_fax.png) no-repeat left bottom;}
.l_contact ul li.tact_mail span {background: url(../images/ico_mail.png) no-repeat left bottom;}
.l_contact ul li.tact_add span {background: url(../images/ico_add.png) no-repeat left bottom;}



.post {border-bottom: 1px solid #111;line-height: 60px;}
.post em{color: #111;font-size: 22px;font-weight: bold;}
.post span{float: right}
.post span a {color: #333;padding: 0 10px;}
.post span a:hover {color: #e60212;}

.content{padding: 20px 0;line-height: 1.7;color: #333;}
.content .tit {text-align: center;padding: 10px 0;font-size: 13px;color: #626262;margin-bottom: 30px;}
.content .tit h3 {color: #666;font-size: 24px;}
.content a {/* font-size: 14px; *//* color: #2b2b2b; */}
.content a:hover {color: #e60212;}






.pro_list{margin-top: 30px;}
.pro_list li {width:calc((100% - 20px) / 3);font-size: 16px;float: left;margin-right: 10px;margin-bottom: 10px;}
.pro_list li:nth-child(3n){margin-right: 0;}
.pro_list li .img{border: solid 1px #a0a0a0;height: 220px;overflow: hidden}
.pro_list li p{padding:10px;}
.pro_list li:hover a{color: #e60212;}
.pro_list li:hover .img {border: solid 1px #e60212;}


.recommend_tit {border-bottom: 1px solid #111;line-height:40px;margin-bottom:10px;font-size: 16px;color: #111;}
.recommend_tit span{float: right;font-size: 12px;color: #111;}
.recommend_tit span a:hover {color: #e60212;}
.recommend_news {margin-top: 10px;}
.recommend_news ul li{border-bottom: 1px dotted #ddd;width:48%;font-size: 14px;float: left;margin: 0 1%;line-height: 40px;}
.recommend_news ul li a {color: #666;}
.recommend_news ul li span {color: #666;float: right;}
.recommend_news ul li:hover a {color: #e60212;}
.recommend_news ul li:hover span {color: #e60212;}

.recommend_pro li .img{border: 1px solid #a0a0a0}
.recommend_pro li:hover .img{border: 1px solid #e60212}



.pages{padding: 30px 0 15px;text-align: center;}
.pages a {margin: 0 5px;padding: 0 13px;background: #fff;border: 1px solid #ddd;border-radius: 12px;display: inline-block}
.pages a.active,.pages a.current:hover {background-color: #e60212;color: #fff;}



.article_list{}
.article_list li {line-height: 34px;padding: 10px 0;margin-left: 5px;margin-bottom: 5px;border-bottom: 1px dotted #c2c2c2;}
.article_list li .tit{background: url(../images/new_li2.jpg) no-repeat left center;padding-left: 10px;line-height: 2.2;color: #333;font-weight: bold;}
.article_list li .tit span {float: right;color: #999;}
.article_list li .tit:hover{text-decoration: none;color: #e60212;}
.article_list li .tit:hover span {text-decoration: none;color: #e60212;}
.article_list li .text {color: #666;line-height: 1.4}


.page {text-align: center;margin: 20px auto;clear: both;padding-top: 30px;}
.page a {margin: 0 7px;color: #2b2b2b;}
.page a:hover {color: #e60212;}


.show_img{width: 48%;float: left}
.show_text {width:48%;float: right;padding-top: 10px;color: #666;}
.show_text .text {line-height: 26px;margin-bottom:15px;padding-bottom: 15px;border-bottom: 1px dotted #dedede;}
.show_text .tel{line-height: 30px;margin-bottom: 10px;}
.show_text .tel a {color: #fff;width: 100%;background: #e60212;text-align: center;display: inline-block;float: left;line-height: 40px;}
.show_text .tel span{font-size: 23px;color: #e60212;padding-left: 20px;}
.show_pro{margin-top: 30px;}
.show_pro .t{background: #e60212;padding: 0 10px 0 20px;line-height: 40px;}
.show_pro .t span{background: #e60212;display: inline-block;padding: 0 15px;color: white;}

.gallery_top{margin-bottom: 15px;border:1px solid #CCC}
.gallery_top li .img{height: 300px; }
.gallery_thumbs li .img{height:70px;border:1px solid #CCC }

@media only screen and (max-width :812px) {
    .content_L,.content_R{width: 100%;float: none}
    .l_box .tit{font-size: 14px;line-height: 40px;}
    .l_box.hots_news,.l_box.l_contact{display: none}
    .pro_category ul li{width: 50%;float: left}
    .post{line-height: 40px;}
    .post em{font-size: 14px;}

    .pro_list li{width: 48%;margin: 10px 1%;font-size: 12px;}

    .copy_box{font-size: 12px;}
}

@media only screen and (max-width: 812px) {
.show_text { width: 100%; float: right; padding-top: 10px; color: #666; } 
.show_img { width: 100%; float: left; }}
video {width:100%;}