@font-face{ font-family:"PingFang"; src:url(font/PingFang.ttf)}

body{ font:12px "Microsoft YaHei", "YaHei", "arial", "Hiragino Sans GB", "sans-serif"}
body, ul, li, h1, h2, h3, h4, h5, h6, p, th, td, dl, dt, dd{ margin:0; padding:0; font-weight:normal; font-style:normal}
table, h1, h2, h3, h4, h5, h6{ font-size:12px}
ul, li, dl, dt, dd{ list-style-type:none}
table{ border-collapse:collapse; border-spacing:0; border:0}
img{ border:none; vertical-align:bottom}
a, button{ cursor:pointer}
*:focus { outline: none}
.html_y{ overflow-y:hidden}
.html_hidden{ height:100%; overflow:hidden}

a:link{ text-decoration:none}
a:visited{ text-decoration:none}
a:hover{ text-decoration:none}
a:active{ text-decoration:none}

.font_14{ font-size:14px}
.font_16{ font-size:16px}
.font_20{ font-size:20px}
.font_26{ font-size:26px}
.font_32{ font-size:32px}
.fw_b{ font-weight:bold}

.co_red{ color:#F00}
.co_666{ color:#666}

.f_l{ float:left}
.f_r{ float:right}
.ta_l{ text-align:left}
.ta_c{ text-align:center}
.ta_r{ text-align:right}
.dp_n{ display:none}

.main{ width:1280px; margin:auto; overflow:hidden}
.main_1600{ width:1600px; height: 218px; margin:auto; overflow:hidden; position: relative}
.bg{ background-image:url(../images/icon.png?t=202103301648); background-repeat:no-repeat}
.bg_m{ background-image:url(../images/icon_m.png?t=202103301648); background-repeat:no-repeat; background-size:400px 3000px}

.head{ width: 100%; height: 68px; position:relative; background-color: rgba(0,0,0,0.2); z-index: 10}
.head .logo{ width:120px; height:24px; float:left; margin-top:21px}
.head .nav{ float: right; margin-top: 16px}
.head .nav a{ font-size: 16px; color: #fff; line-height: 34px; float: left; margin-left:108px; padding: 0 2px; border-bottom: 1px solid rgba(255,255,255,0); transition:all .3s ease}
.head .nav a:first-child{ margin-left: 0}
.head .nav a:hover, .head .nav .cur{ border-bottom: 1px solid rgba(255,255,255,1)}
.head_black{ background-color:rgba(0,0,0,0)}
.head_black .logo{ background-position: 0 -100px}
.head_black .nav a{ color: #444; border-bottom: 1px solid rgba(68,68,68,0)}
.head_black .nav a:hover, .head_black .nav .cur{ border-bottom: 1px solid rgba(68,68,68,1)}
.head_white_nobc{ background-color:rgba(0,0,0,0)}

.foot{ width:100%; height: 218px; float:left; position:relative; background-color:#444}
.foot ul{ float: left; padding-top: 57px; margin-left: -98px}
.foot li{ float: left; padding: 0 98px; position: relative; color: #fff}
.foot .t_1{ font-size: 22px; line-height: 32px; padding-bottom: 12px}
.foot .t_2{ font-size: 30px; line-height: 40px}
.foot .t_3{ font-size: 14px; line-height: 26px; color: rgba(255,255,255,0.3); padding-top: 5px}
.foot .line{ width: 1px; height: 64px; float: left; background-color: rgba(255,255,255,0.1); position: absolute; top: 8px; right: 0}
.foot .info{ width:100%; float:left; border-top:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.4); line-height:20px; font-size: 14px; margin-top:24px; padding:14px 0}
.foot .info a{ float:left; color:rgba(255,255,255,0.4)}
.foot .info .iline{ width:1px; height:10px; float:left; background-color:rgba(255,255,255,0.4); margin:5px 10px 0}
.foot .return{ width: 52px; height: 52px; float: left; background-position: 0 -400px; position: absolute; top: 83px; right: 0}


.head_m{ width:100%; height:56px; float:left; overflow:hidden; position:relative; border-bottom: 1px solid rgba(226,226,226,0); -webkit-transform:translate3d(0,0,0); z-index:99999; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out}
.head_m .menu{ width:26px; height:43px; float:left; position:relative; padding:0 18px; top:19px}
.head_m .menu .line_box{ width:26px; height:2px; float:left; position:absolute; top:0; transition:transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition:transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99)}
.head_m .menu .line_box .line{ width:26px; height:2px; float:left; background-color:#000; border-radius:50px; transition:transform 0.25s 0.1s cubic-bezier(0.4, 0.01, 0.165, 0.99),background-color 0.6s ease; -webkit-transition:transform 0.25s 0.1s cubic-bezier(0.4, 0.01, 0.165, 0.99),background-color 0.6s ease}
.head_m .menu .t_21{ top:8px; transition:opacity 0.1s linear; -webkit-transition:opacity 0.1s linear}
.head_m .menu .t_26{ top:16px}
.head_m .logo{ width:131px; height:26px; float:left; position:absolute; left:50%; margin:15px 0 0 -65px; background-position:0 -50px; opacity: 1; transition:opacity 0.6s ease}
.head_m .logo_white{ background-position: 0 0; opacity:0}
.head_m_bo{ border-bottom: 1px solid rgba(226,226,226,1)}

.head_m_white .menu .line_box .line{ background-color:#FFF}
.head_m_white .logo{ opacity:0}
.head_m_white .logo_white{ opacity:1}

.select_product_m{ width:100%; height:0; float:left; overflow:hidden; position:fixed; top:57px; left:0; background-color:rgba(255,255,255,1); z-index:99998; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out}
.select_product_m ul{ width:calc(100% - 56px); float:left; margin-left:28px}
.select_product_m li{ width:100%; height:50px; line-height:50px; float:left; font-size:19px; border-bottom:1px solid #E5E5E5; transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-transition:all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99); opacity:0}
.select_product_m li a{ width:100%; float:left; color:#000}

.foot_m{ width:calc(100% - 56px); height: 160px; float:left; position:relative; padding: 30px 28px; background-color:#444}
.foot_m .wp_50{ width: 50%; float: left}
.foot_m .t_1{ width: 100%; float: left; color: #fff; font-size: 14px; line-height: 24px; padding-bottom: 4px}
.foot_m .t_2{ width: 100%; float: left; color: #fff; font-size: 18px; line-height: 24px}
.foot_m .t_3{ width: 100%; float: left; font-size: 10px; line-height: 20px; color: rgba(255,255,255,0.3); padding: 3px 0 19px}
.foot_m .t_4{ width: 100%; float: left; color: #fff; font-size: 14px; line-height: 24px; padding-top: 19px}
.foot_m .t_5{ width: 100%; float: left; color: rgba(255,255,255,0.3); font-size: 10px; line-height: 20px; padding-top: 2px}
.foot_m .line{ width: 100%; height: 1px; float: left; background-color: rgba(255,255,255,0.1);}

@keyframes opa_1{ 0%{ opacity:0} 100%{ opacity:1}}
@-webkit-keyframes opa_1{ 0%{ opacity:0} 100%{ opacity:1}}

@keyframes opac_1{ 0%{ opacity:0} 100%{ opacity:1}}
@-webkit-keyframes opac_1{ 0%{ opacity:0} 100%{ opacity:1}}

@keyframes opac_0{ 0%{ opacity:1} 100%{ opacity:0}}
@-webkit-keyframes opac_0{ 0%{ opacity:1} 100%{ opacity:0}}

@keyframes scale_1{ 0%{ transform:translate3d(0,0,0) scale(1.12) rotate(0.0001deg)} 99.99%{ transform:translate3d(0,0,0) scale(1) rotate(0.0001deg)} 100%{ transform:translate3d(0,0,0) scale(1) rotate(0)}}
@-webkit-keyframes scale_1{ 0%{ -webkit-transform:translate3d(0,0,0) scale(1.12) rotate(0.0001deg)} 99.99%{ -webkit-transform:translate3d(0,0,0) scale(1) rotate(0.0001deg)} 100%{ -webkit-transform:translate3d(0,0,0) scale(1) rotate(0)}}

@keyframes x_15{ 0%{ opacity:0; transform:translate3d(15px,0,0) rotate(0.0001deg)} 99.99%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0)}}
@-webkit-keyframes x_15{ 0%{ opacity:0; -webkit-transform:translate3d(15px,0,0) rotate(0.0001deg)} 99.99%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0)}}

@keyframes y__80{ 0%{ opacity:0; transform:translate3d(0,-80px,0) rotate(0.0001deg)} 99.99%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0)}}
@-webkit-keyframes y__80{ 0%{ opacity:0; -webkit-transform:translate3d(0,-80px,0) rotate(0.0001deg)} 99.99%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0)}}

@keyframes y__40{ 0%{ opacity:0; transform:translate3d(0,-40px,0) rotate(0.0001deg)} 99.99%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0)}}
@-webkit-keyframes y__40{ 0%{ opacity:0; -webkit-transform:translate3d(0,-40px,0) rotate(0.0001deg)} 99.99%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0)}}

.pt_40{ padding-top:40px}
.pt_45{ padding-top:45px}
.pt_60{ padding-top:60px}
.pl_10{ padding-left:10px}
.pb_5{ padding-bottom:5px}
.pb_50{ padding-bottom:50px}
.pb_100{ padding-bottom:100px}
.pb_200{ padding-bottom:200px}
.pr_80{ padding-right:80px}
.mr_10{ margin-right:10px}
.mr_20{ margin-right:20px}
.mr_50{ margin-right:50px}
.mb_0{ margin-bottom:0}

.w_20{ width:20px}
.wp_100{ width:100%}
.w_140{ width:140px}
.w_303{ width:303px}
.w_380{ width:380px}
.w_450{ width:450px}
.w_600{ width:600px}
.h_250{ height:250px}
.h_600{ height:600px}
.h_900{ height:900px}


@media only screen and (max-width : 1675px){
	.main_1600{ width:calc(100% - 64px); marign: 0 32px}
}


@media only screen and (max-width : 1360px){
	.main{ width:calc(100% - 64px); padding: 0 32px}
	.main_1600{ width:calc(100% - 32px); marign: 0 16px}
	
	.foot ul{ margin-left: -35px}
	.foot li{ padding: 0 35px}
}


@media only screen and (max-width : 1000px){
	.foot ul{ padding-top: 42px}
	.foot .t_1{ font-size: 14px; line-height: 16px; padding:16px 0 10px}
	.foot .t_2{ font-size: 18px; line-height: 20px}
	.foot .t_3{ font-size: 9px; line-height: 14px; padding-top: 2px}
	.foot .info{ margin-top:61px}
}

@media only screen and (min-width : 640px){
	body{ font:12px "PingFang"}
	
	.head{ display: block}
	.head_m{ display: none}
	
	.foot{ display: block}
	.foot_m{ display: none}
	
	.pc{ display: block}
	.mobile{ display: none}
}

@media only screen and (max-width : 640px){
	.head{ display: none}
	.head_m{ display: block}
	
	.foot{ display: none}
	.foot_m{ display: block}
	
	.pc{ display: none}
	.mobile{ display: block}
}