@charset "utf-8";
/* CSS Document */

* {outline: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
html {font: normal 14px "Noto Sans SC","Microsoft YaHei";-webkit-text-size-adjust: 100%;}
body {padding: 0;margin: 0 auto;line-height:2.2; color: #fff;min-width:320px; overflow-x:hidden;font-family:"Noto Sans SC", "Microsoft YaHei";
-webkit-text-size-adjust: none;
/*取出点击出现半透明的灰色背景*/
-webkit-tap-highlight: rgba(0,0,0,0);
/*控制内容的可选择性*/
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {-webkit-appearance: none;}
.ul,
form,
dl,
dt,
dd,
.ol,
figure,
aside,
menu,
nav,
.p,
.h1,.h2,.h3,.h4,.h5,.h6{padding: 0;margin: 0;}
.h1,.h2,.h3,.h4,.h5,.h6{ font-weight:normal;}
.ul,
.ul li {list-style: none;}
table {border-collapse: collapse;border-spacing: 0}
table td {border-collapse: collapse;}
select, input, textarea {font-size: 14px;color: #333;border-radius: 0;-webkit-border-radius: 0;font-family: "Microsoft YaHei";}
img{border: none;max-width: 100%;vertical-align: middle;}
a {color: #fff;text-decoration: none;noline:-webkit-tap-highlight-color:rgba(0,0,0,0);/* 去掉链接触摸高亮 */}
a:hover {color: #db261d;text-decoration: none;}
a:focus {color: #db261d;outline: none;-moz-outline: none;}
a:active {color: #db261d;}
.ul li em,
.ul li i{ font-style:normal}
pre{
    white-space:pre-wrap;
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    word-wrap:break-word;
    margin:0;
    font-family: "Microsoft YaHei";
/*  text-align:justify;
    text-justify:inter-ideograph;*/
    }

.clear {clear: both;height: 0px;overflow: hidden;zoom: 0;}
.clearfix {*zoom:1;}/*IE/7/6*/
.clearfix:after { content:"\200B"; display:block; height:0; clear:both; }

.boxfixed{ position:fixed; width:100%; height:100%; z-index:10; left:0; top:0}
.boxabsolute{ position:absolute; width:100%; height:100%; z-index:10}
.xytable{ display:table; width:100%; height:100%; table-layout: fixed;}
.xytable-cell{ display:table-cell; vertical-align:middle;}

.row {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; display:block}
.row1,.row2, .row3, .row4, .row5, .row6 {display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical;}
.row1 { -webkit-line-clamp: 1;}
.row2 { -webkit-line-clamp: 2;}
.row3 { -webkit-line-clamp: 3;}
.row4 { -webkit-line-clamp: 4;}
.fl{ float:left}
.fr{ float:right}


.body_main{ height: 100vh; background: url("../images/main_bg.jpg") no-repeat center center fixed; }
.bodybg:before{ content: ''; width: 100%; height: 100%; position: fixed; display: block; background: rgba(0,0,0,0.8); z-index: 100}
@media(max-width:640px){
.body_main .xytable,
.body_main .xytable-cell{ display: block}
}

.home_main{ height: 100vh; background: url("../images/home_bg.jpg") no-repeat center center;background-size: cover; position: relative}


.logo_menu .logo_line{ position: absolute; left:0; top: 0; width: 100%; height: 100%; }
.logo_menu .line1{ position: absolute; left:  5%; top: 5%; width: 90%; height: 90%; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%}
.logo_menu .line2{ position: absolute; left:  15%; top: 15%; width: 70%; height:70%; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%}

.logo_menu .logo_dot{ position: absolute; left:0; top: 0; width: 100%; height: 100%; }
.logo_menu .logo_dot span:nth-child(1){ position: absolute; left: 5%; top:5%; width: 40px ;height: 40px; background: rgba(255,255,255,0.3); border-radius: 50% }
.logo_menu .logo_dot span:nth-child(2){ position: absolute; left: -25%; top:45%; width: 70px ;height:70px; background: rgba(255,255,255,0.1); border-radius: 50% }
.logo_menu .logo_dot span:nth-child(3){ position: absolute; right: -25%; top:15%; width: 40px ;height:40px; background: rgba(0,0,0,0.2); border-radius: 50% }
.logo_menu .logo_dot span:nth-child(4){ position: absolute; right: -35%; bottom:18%; width: 40px ;height:40px; background: rgba(218,37,28,0.5); border-radius: 50% }




.logo_menu .logo_center{ text-align: center; position: absolute; left: 50%; top: 50%; margin-left: -132.5px; margin-top: -132.5px; }
.logo_menu .logo_center .con{background: #211a17;width:265px; height:265px; line-height:265px; border-radius: 50%; position: relative}
.logo_menu .logo_center .con:before{ content: ""; display: block; position: absolute; left: 0; top: 0; width:305px; height: 305px; margin-top: -20px; margin-left: -20px; background:#db261d; border-radius: 50%; z-index: -2 }
.logo_menu .logo_center .con h1{margin: 0; font-size:50px; font-weight: normal}
.logo_menu .logo_center .con img{ border-radius: 100%;}




.logo_title{ padding: 0 0 4% 0; margin: 0;text-align: center;}
.logo_menu{ position: relative; max-width: 620px; height:620px; margin: auto; text-align: center}
.logo_menu li{width: 14.738%; position:absolute; display: inline-block; border-radius: 100%; overflow: hidden; transition: transform .5s ease-in-out}
.logo_menu li:hover{transform: scale(1.1);}
.logo_menu li .show{ transition:0.3s;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0); position: absolute; width: 100%; height: 100%; border-radius: 100%; background-color: rgba(33,25,23,0.72); opacity: 0}
.logo_menu li .show span{ display: block; padding: 1px 5px; line-height: 1.6}
.logo_menu li .show a{color: #fff; display: inline-block; border-bottom: solid 1px #fff;font-size:14px;}
.logo_menu li .show a:hover{color: #e90f03;border-bottom-color: #e90f03;}
.logo_menu li:hover .show{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1); opacity: 1}
.logo_menu li:nth-child(1),
.logo_menu li:nth-child(2),
.logo_menu li:nth-child(3){ width: 29.606%;}


.logo_menu li:nth-child(1){ left: 34%; top:-8%}
.logo_menu li:nth-child(2){left: 0%;bottom:7%}
.logo_menu li:nth-child(3){ right: -5%; bottom: 15%}
.logo_menu li:nth-child(4){ left:0%; top: 15%}
.logo_menu li:nth-child(5){ right:-15%; top: 25%}
.logo_menu li:nth-child(6){ left:-22%; top: 55%}
.logo_menu li:nth-child(7){ left:50%; bottom: 2%}
.logo_menu li:nth-child(8){ right:-25%;bottom: 36%}
.logo_menu li:nth-child(9){ right:5%;top: 12%}

.logo_menu li:nth-child(4) span:nth-child(2) + span,
.logo_menu li:nth-child(5) span:nth-child(2) + span,
.logo_menu li:nth-child(6) span:nth-child(2) + span,
.logo_menu li:nth-child(7) span:nth-child(2) + span,
.logo_menu li:nth-child(8) span:nth-child(2) + span,
.logo_menu li:nth-child(9) span:nth-child(2) + span{display:none;}

.logo_menu li:nth-child(4):hover .show,
.logo_menu li:nth-child(5):hover .show,
.logo_menu li:nth-child(6):hover .show,
.logo_menu li:nth-child(7):hover .show,
.logo_menu li:nth-child(8):hover .show,
.logo_menu li:nth-child(9):hover .show{opacity: 0}

@media(max-width:768px){
.logo_title{ padding-bottom: 10%}
.logo_title img{ width: 80%}

.logo_menu li .show span{ font-size: 12px}
.logo_menu .logo_center{ margin-left: -50px; margin-top: -50px; }
.logo_menu .logo_center .con{width: 100px; height: 100px; line-height: 100px; }
.logo_menu .logo_center .con:before{ width: 120px; height: 120px; margin-top: -10px; margin-left: -10px; }
.logo_menu .logo_center .con h1{margin: 0; font-size:18px; font-weight: normal}
.logo_menu{ position: relative; max-width:200px; height:200px; padding:  0 2% }

.logo_menu li{width:30%; }
.logo_menu li:nth-child(1),
.logo_menu li:nth-child(2){ width: 90%;}
.logo_menu li:nth-child(3){ width: 70%;}

.logo_menu li:nth-child(2){left: -30%;bottom:-90%}
.logo_menu li:nth-child(1){ left: 14%; top:-90%}
.logo_menu li:nth-child(3){ right: -45%; bottom: -18%}
.logo_menu li:nth-child(4){ left:-15%; top: 15%}
.logo_menu li:nth-child(5){ right:-35%; top: -25%}
.logo_menu li:nth-child(6){ left:-20%; top: 55%}
.logo_menu li:nth-child(7){left:  80%; bottom:-60%}
.logo_menu li:nth-child(8){right: -45%; bottom: 55%}
.logo_menu li:nth-child(9){left: -45%; top:-20%}
}


.top-lang{position: absolute;right: 1%;top: 0; overflow: hidden; margin-top: 20px;z-index: 102;}
.top-lang a{float: left;display: block;color: #fff; line-height: 30px;min-width:35px;text-align: center; border: 2px solid #fff;}
.top-lang a:hover,
.top-lang a.on{border: 2px solid #e90f03; color: #e90f03;}
.top-lang a:not(:last-child){margin-right: 10px;}
/* .lang-menu{top: -10%; margin-top: 0px;} */

@media(max-width:640px){
.lang-menu{position: absolute;right: 15%;top: 20px;  margin-top: 5px; z-index: 102;}
.top-lang a{ line-height: 25px;min-width:30px;}
}



.mainbox{ position: relative; height: 80%}
.right_main{ padding-left:460px; padding-right: 2%; height: 100%; position: relative; padding-top: 5%;}
.contacts{padding-top:5%;}
.right_main.contacts:before{background:#201b19;content:'';position: absolute;left:0;top:0;height:41%;width:100%;z-index:-1;}


.side_menu{transition:0.5s; z-index: 100; position:fixed; left: 0px; width:450px; top:10%; height:90%; background: rgba(69,80,89,0.86); border: solid 1px #fff;border-left:none; line-height: 2; }

/*.side_menu ul li.aon b a{color: #e90f03;}*/

.side_menu .menubox{ padding-right: 59%}
.side_menu .menu{ padding-top: 80px;}
.side_menu .tel{ text-align: center;}
.side_menu .ewm{ text-align: center; padding: 4% 0}
.side_menu .ewm img{ width: 70%;}
.side_menu .logo{ position: absolute; width: 100%; text-align: center; top: -10%; left: -7%;}
.side_menu .logo img{ width: 25%;transition:2s; }
.side_menu ul li {padding-bottom: 20%;}

.side_menu ul li b{ display: block; font-weight: normal; position: relative}
.side_menu ul li b a{ line-height: 42px;  display: block; background: #191f24; border-radius: 10px;text-align:center;}
.side_menu h4{ padding: 0; margin: 0; font-size: 20px; line-height: 50px;text-align:center;}
/*.side_menu:hover{ left: -10px; }*/
.side_menu ul li.aon .subbox{ display: block!important}
.side_menu .subbox{ position: absolute; padding-top: 30px; right: 3%; top: 0; width: 51%; height: 100%}
.side_menu dl{ margin-bottom: 10px; background: #191f24; border-radius:10px}
.side_menu dt{ position: relative}
.side_menu .sub-has-sub dt b:before{ content: ''; position: absolute; display: block; right: 4%; top: 50%; margin-top: -5px; width: 12px; height:12px; background: url("../images/menu_sub_icon.png") no-repeat center center; background-size: contain}
.side_menu dd{ display: none; font-size: 14px; padding-bottom: 10px; max-height: 280px; overflow-y: auto;}
.side_menu dd a{ display: block; padding-left: 8%;}
.side_menu dd a i{ border-bottom: solid 1px #fff}

.side_menu dd::-webkit-scrollbar {width: 5px;height: 1px;}
.side_menu dd::-webkit-scrollbar-thumb { border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #fff;}
.side_menu dd::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background:rgba(255,255,255,0.5);}




@media(min-width:640px){

.side_menu:hover .logo img{transform: rotate(360deg)}
.side_menu:before{ content: ''; left: 43%; width: 1px; position: absolute; height: 100%; background: #fff;}
}
@media(max-width:640px){
.right_main.contacts:before{top:-50%;height:70%;}
.right_main{ padding: 2%}
.side_menu{ position: relative; width: 100%; left: 0!important;background: none; border: none; z-index: 101;}
.side_menu .logo{  padding: 10px; top: auto; position: relative;left: 0; text-align: left;}
.side_menu .logo img{ width: 90px;}
.side_menu .menubox{left: -200%;; position: absolute; background: rgba(69,80,89,0.86);border: solid 1px #fff;transition:0.5s;padding-bottom:11%}
.side_menu_show .menubox{  left: -10px;}
.side_menu_show .menubox:before{ content: ''; left: 44%; width: 1px; position: absolute; height: 100%; background: #fff;}
.side_menu .subbox{ padding-top: 0;overflow-y: auto;}
.side_menu .subbox::-webkit-scrollbar {width: 5px;height: 1px;}
.side_menu .subbox::-webkit-scrollbar-thumb { border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #fff;}
.side_menu .subbox::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background:rgba(219,255,255,0.5);}

.side_menu dd {margin-right: 5px;}

.side_menu .menu{ padding-top: 50px;}
.side_menu ul li {padding-bottom: 10px;}
.side_menu ul li#nav3 > b:after,
.side_menu ul li#nav3 .sub-has-sub b:after{ content: '';position: absolute; display: block; top: 0; width: 100%; height: 100%;}
.side_menu .tel{ line-height: 1}

#open_menu{ position:absolute; right:2%; width:40px; height:40px; border:2px solid transparent; border-radius:50%;  top:20px; z-index:200;}
#open_menu i,
#open_menu i::before,
#open_menu i::after{ position:absolute;}
#open_menu i,
#open_menu i::before,
#open_menu i::after{background:#db261d;}
#open_menu i{ top:50%;}
#open_menu i{ width:80%; left:10%;  margin-top:-1px; height:2px;}
#open_menu i::before,
#open_menu i::after{ left:0; width:100%; height:100%; content:'';transition:transform 0.3s;}
#open_menu i::before{ top:10px;}
#open_menu i::after{top:-10px;}
#open_menu.open_menu_on{ border-color:#fff;}
#open_menu.open_menu_on i{ background:none !important;}
#open_menu.open_menu_on i::before,
#open_menu.open_menu_on i::after{ background:#fff; margin-top:0;}
#open_menu.open_menu_on i::before,
#open_menu.open_menu_on i::after{  top:0 !important;}
#open_menu.open_menu_on i::before{ transform:rotate(45deg);}
#open_menu.open_menu_on i::after{ transform:rotate(-45deg);}
}


.about{ max-width:1000px; min-height: 100%; margin: auto; color: #fff; border: solid 1px rgba(255,255,190,0.58); border-radius: 10px; padding: 20px; background-color: rgba(255,255,255,0.09)}
.about i.red{ font-style: normal; color: #db261d}
.about .title b{ font-size:26px}
@media(min-width:960px){
.about{ font-size:16px}
}
@media(max-width:640px){
.about .title { font-size: 20px; padding-bottom: 3%}
.about .title b{ font-size: 30px; display: block; line-height: 1.2}
}


.service{ max-width: 1000px; min-height: 100%; margin: auto;padding-bottom:10%;}
.service .pic2,
.service .photo{ text-align: center}
.service .photo{ max-width: 80%; margin: auto }
.service .icon { font-size:18px; padding: 2% 0}
.service .icon b img{ vertical-align: middle}
.service .txt_box1 .pic{float: left;width: 27%;}
.service .txt_box1 .txt{float: right;width: 68%;/* padding-top: 3%; */font-size:16px;line-height: 2;}
.service .pic2{padding-top:4%;padding-bottom: 4%;}
@media(max-width:640px){
.service .txt_box1 .pic,
.service .txt_box1 .txt{ float:none; width:100%}
.service .txt_box1 .txt{line-height: 2}
.service .icon { font-size: 18px;}
.service .photo{max-width: 100%;}
}

.contact { max-width: 1000px; margin: auto;}
.contact .pic img{padding-bottom:4%;}
.contact .title{font-size:22px;  color: #f9443b; padding: 0; margin:0;margin-left:-16px;letter-spacing: 5px;}
.contact .txt{ font-size:16px; padding-bottom: 2% }
.contact .txt dl{ padding:1% 0; overflow: hidden; clear: both; line-height: 1.4}
.contact .txt dl dt{ float: left}
.contact .txt dl dd{float: left}
.contact .map{ position: relative; padding-bottom:40%; max-width: 1180px;}
.contact #allmap{ position: absolute; top: 0; width: 100%; height: 90%}
@media(max-width:640px){
.contact .map{padding-bottom: 60%;}
}

.product { max-width:1000px; margin: auto; padding-bottom: 2%}
.product ul{ position: relative}
.product ul li{ float: left; width: 20%; text-align: center; padding:2% 2% }
.product ul li a{display: block; background: #000000;}
.product ul li .pic{ overflow: hidden;}
.product ul li .pic span{ padding-bottom: 72%; display: block; background: no-repeat center center;transition:0.3s;background-size:cover;}
.product ul li a:hover .pic span{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);}
.product ul li h5{ padding: 0; margin: 0; line-height: 36px; font-size: 14px;font-weight:normal;}

@media(max-width:1367px){
.product ul li{ width: 24%}
}

@media(max-width:960px){
.product ul li{ width: 33.333%}
.product ul:before{ content: ''; position: absolute; text-align: center;display: block; width: 31.333%; height: 19%; padding-top: 10%; right: 2%; bottom: 2%; background: url("../images/logo.png") no-repeat center center; opacity: 0.5}
}
@media(max-width:768px){
.product ul li{width: 50%;}
.product ul:before{ display: none}
}

.product_info { max-width: 1000px; margin: auto}
.product_info .search{margin-bottom:2%;margin-right:0 !important;}
.product_info .photo{ float: left; width:42%; background: #fff;}
.product_info .photo .boxout{}
.product_info .photo .box{ text-align: center; border: solid 1px #dcdad9}
.product_info .photo img{}
.product_info .info{ float: right; width: 54%; font-size:14px}
.product_info .info td{ color: #222; border: solid 1px #383838; padding:0 10px; background: #fff;white-space:pre-line;
word-wrap: break-word;
    word-break: break-all;line-height:56.35px;}
.product_info .info td.td_name{ width: 120px; text-align: right}
.product_info .info tr:nth-child(odd) td{ background: #d9d9d9}

.zoomLens{ min-width: 60px; min-height: 60px;}

@media(max-width:960px){
.product_info .photo,
.product_info .info{float:none; width:100%; }
}

.product_other { max-width:870px; margin: auto; padding-top:3%}
.product_other ul{margin:0 -10px;}
.product_other ul li{ float: left; padding:1% 10px}
.product_other ul li a{ display: block; padding-bottom: 100%; background:#fff no-repeat center center; border-radius: 10px; background-size:contain}


.product_other .slick-arrow{  font-size:0; width:50px !important; height:50px !important; border:none; position:absolute; top:50%; margin-top:-25px; background:none !important; cursor:pointer; padding:0;}
.product_other .slick-prev{ left:-60px;;}
.product_other .slick-next{ right:-60px;}
.product_other .slick-next::before,
.product_other .slick-prev::before{ position:absolute; content:''; width:50%; height:50%; border-top:2px solid  rgba(255,255,255,0.5); border-right:2px solid rgba(255,255,255,0.5); top:25%; left:25%; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.product_other .slick-prev::before{transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.product_other .slick-next:hover::before,
.product_other .slick-prev:hover::before{ border-color:#fff;}


.product_info .photo .slick-arrow{  font-size:0; width:40px !important; height:40px !important; border:none; position:absolute; top:50%; margin-top:-20px; background:none !important; cursor:pointer; padding:0;z-index: 200;}
.product_info .photo .slick-prev{ left:1%;}
.product_info .photo .slick-next{ right:1%;}
.product_info .photo .slick-next::before,
.product_info .photo .slick-prev::before{ position:absolute; content:''; width:50%; height:50%; border-top:2px solid  rgba(0,0,0,0.3); border-right:2px solid rgba(0,0,0,0.3); top:25%; left:25%; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.product_info .photo .slick-prev::before{transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.product_info .photo .slick-next:hover::before,
.product_info .photo .slick-prev:hover::before{ border-color:#db261d;}

@media(max-width:960px){
    .product_other .slick-arrow{   width:30px !important; height:30px !important;margin-top:-15px;}
.product_other .slick-prev{ left:0px;;}
.product_other .slick-next{ right:0px;}
.product_other ul{margin:0 ; padding: 0 20px}

}



.Pages{ text-align:center;padding-top:1%; padding-bottom:4%}
.Pages .p_cur,
.Pages .p_count,
.Pages .p_total,
.Pages .p_jump,
.Pages .p_page a.a_first,
.Pages .p_page a.a_end{ display:none}
.Pages .p_page{ display:block; text-align:center}
.Pages .p_page em{ font-style:normal;}
.Pages .p_page a{ color: #fff; display:inline-block; padding:2px 12px; margin:0 2px; background-color:#000}
.Pages .p_page a.a_cur,
.Pages .p_page a:hover{ background-color:#db261d; color:#fff;}

.zoomContainer{ z-index:100;}
.search{float: right;position: relative;width: 250px;margin-right:2%;}
.search .text{width: 100%;background: none;color: #fff;/* padding: 0 50px 0 20px; */border: none;/* border-radius: 50px; */line-height: 40px;height: 40px;border-bottom: 1px solid #9c9c9c;}
.search .btn{position: absolute;right: 0;top: 15px;background: url(../images/search_btn2.png) no-repeat center;width: 20px;height: 20px;background-size: 20px;}
@media(max-width:640px){
.Pages .p_page a{padding:3px 10px;}
.search{width:100%}
}